CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局
CSS基础选择器
(1)id选择器: # =》 标签拥有 id="user" 属性
<style>
#user {
width: 200px;
}
</style> <div id="user"></div>
(2)( class ) 类选择器 : . =》 标签拥有 class="user" 属性
<style>
.user {
width: 200px;
height: 50px;
}
</style> <div class="user"></div>
(3) 标签选择器 ( 通过标签名来控制 )
<style>
div {
width: 200px;
height: 50px;
}
</style> <div></div>
(4)通配选择器 *
<style>
* {
background-color: red;
}
</style>
选择器的优先级
控制范围越精确,优先级越高
通配 < 标签 < class < id < 行间式 < !important
行间式优先级高于内联,外联所有选择器的优先级,但是低于 !important
<style>
.name {
background-color: red!important;
}
</style> <div class="name"></div>
样式块
1.长度: 单位( px像素 mm毫米 cm厘米 em一个字宽,跟父级字体大小相关 rem跟跟标签html相关 vw视图宽 vh视图宽 i n英寸)
<style>
.name {
width: 100px;
}
</style>
2.颜色:#00 00 00 - #FF FF FF
rgb(0-255,0-255,0-255)
rgba(0-255,0-255,0-255,透明度(0-1))
<style>
.name {
background-color: #FF0000;
}
</style> <div class="name"></div>
3.控制标签的显示方式 display
display: none 不显示
display: inline 同行显示,只支持部分css样式(不支持宽高)
display: block 块级显示,支持所有css样式,宽高也有默认的特性
display: inline-block 同行显示,支持所有css样式
嵌套关系
inline-block 类型不建议嵌套任意标签,
inline 类型只嵌套inline类型的标签
block类型可以嵌套任意类型的标签
4.文本样式
vertical-align: baseline | top | middle | bottom
baseline: 文本底端对齐
top: 标签顶端对齐
middle:中线对齐
bottom: 标签底端对齐
<style>
.name {
vertical-align: baseline;
}
</style>
盒模型
组成: margin + border + padding + content 1.margin:外边距,控制盒子的位置(布局),跟边框一样
左右移动正常叠加,上下重叠取大值 父级的第一个子集会重叠边距,怎样解决此问题?
利用父级的padding来解决
margin: 上,右,下,左 (四值)
margin: 上,左右,下 (三值)
margin: 上下,左右 (二值)
margin:20px 上右下左都是20px (一值)
margin-top:-80px;
margin-left:-80px;
margin-left:calc( 80px * 2 ) 利用算法来算距离
2.边框 border: 边框样式 ,边框大小,边框颜色
border-style: solid实线 | dashed虚线 | dotted点状线
border-width: 20px 边框宽度
border-color:transparent; 边框颜色
border: solid 20px red;
transparent 透明色
3.内边距 padding 控制文本内移,想保持显示区域不变,相应减少content的区域
padding:20px 上右下左都是20px (一值)
padding: 上,右,下,左 (四值)
padding: 上,左右,下 (三值)
padding: 上下,左右 (二值)
4.content 内容
盒模型布局
1.上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值
2.第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值
解决方法:
1.父级设置border-top
2.父级设置padding-top
盒模型-block
block
.子集没有设置宽,宽自适应父级的宽 (子集的 border + padding + content = content)
.父级没有设置高,高适应子集的高
.没有设置高,高由内容撑开
子集自适应父级的宽度:
margin-left:auto; 水平居右
margin:0 auto; 水平居中
margin:auto; 上下居中,水平居中
CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局的更多相关文章
- css3种引入方式,样式与长度颜色,常用样式,css选择器
# CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; backgr ...
- HTML&CSS基础-属性选择器
HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- CSS基础和选择器
什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...
- CSS基础及选择器
CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 <div style="color:red"></div> 2.内部 ...
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- CSS基础2——选择器
前面说过样式规则.也知道了样式规则语法形式为:选择器+声明块 如:div{ color:black:padding:10px; } div即表示选择器(此处是元素选择器),花括号里的内容就是声明块 ...
- CSS基础--属性选择器、伪类选择器
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- HTML&CSS基础学习笔记1.31-像素和相对长度
像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...
随机推荐
- jquery/js记录点击事件,单击次数加一,双击清零
目的:点击按钮,点击后在网页上显示点击次数,双击清零 实现:js或者jquery 代码如下: <%@ page language="java" contentType=&qu ...
- 001_python多进程实例
一.工作中需要执行zk数据对比,需要按照机器进行并发,举例以下的例子 # coding:utf8 # !/usr/bin/python import time from multiprocessing ...
- 在IIS上部署(托管).NET Core站点
部署教程 操作系统要求 Windows 7 或更高版本 Windows Server 2008 R2 或更高版本 依赖的组件 Runtime & Hosting Bundle image. ...
- 使用serialize时多数据传递
class CartList(APIView): #定义编辑方法 def post(self,request): username = request.POST.get('username') # p ...
- 6-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案升级篇-优化升级(安装Apache (Web服务器)软件,测试HTTP)
为了和SDK升级保持协议一致,花了两天时间实现了用LUA开发,MQTT+HTTP方式实现远程升级 安装Apache主要是为了实现通过HTTP下载资源 升级介绍: 0,用户点击检查更新时,APP首先通过 ...
- python新式类与旧式类
python2.X是经典类[旧式类]: 是以深度优先[] 但是在Python2.x中,默认都是经典类,只有显式继承了object才是新式类,即:class Person(object):pass 新式 ...
- 基于 HTML5 的 WebGL 3D 档案馆可视化管理系统
前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...
- OSGI target环境配置过程
新建一个通用工程 新建target环境 新建存放依赖包的目录 新建server目录,用于存放server.target对应的依赖包. 在server目录下,新建plugins目录 新建目录之后的, ...
- mysql 解压版安装
1.官网下载压缩包 2.解压 3.配置环境变量 添加系统环境变量 MYSQL_HOME 值为解压的主目录,例如 D:\mysql-5.7.25-winx64 修改Path 环境变量,点击编辑 ...
- h5-canvas 单像素操作
###1. 自定义获取指定坐标像素 var canvas = document.querySelector("#cav"); if(canvas.getContext){ var ...