1、CSS的三大特性
- 继承性——“子承父业”
【继承失效的情况:继承的优先级, 没有浏览器的默认样式高】
- 层叠性——多个选择器可以同时作用于同一个标签, 效果叠加
【注意点:
(1)给同一个标签设置不同的样式, 样式会叠加
(2)给同一个标签设置相同的样式, 写在最后的会生效(优先级一样)
(3)当样式发生冲突的时候, 看优先级, 优先级高的显示, 如果优先级一样, 参见上一条】
- 优先级——通过权重来判断优先级不同的选择器拥有不同的权重
1.1 优先级介绍
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
- 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点:
- !important写在属性值的后面,分号的前面!
- !important不能提升继承的优先级,只要是继承优先级最低!
- 实际开发中不建议使用 !important 。
1.2 权重叠加计算
注意:
- 每一级之间不存在进位
- 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
- 如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
- important如果不是继承,则权重最高,天下第一!
2、盒子模型
- CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是 盒子模型
2.1 内容的宽度(width)和高度(height)
注意:常见取值:数字+px
2.2 边框(border)
- 作用:给设置边框粗细、边框样式、边框颜色效果
- 属性名:border
- 属性值:单个取值的连写,取值之间以空格隔开
(如:border : 10px solid red;) - 快捷键:bd + tab
- 单个属性:
2.2.1 边框(border)- 单方向设置
- 场景:只给盒子的某个方向单独设置边框
- 属性名:border - 方位名词
- 属性值:连写的取值 如:border-top:10px dashed yellow;
2.2.2 盒子实际大小初级计算公式
- 盒子宽度 = 左边框 + 内容宽度 + 右边框
- 盒子高度 = 上边框 + 内容高度 + 下边框
2.3 内边距(padding)
作用:设置边框与内容区域之间的距离
属性名:padding
常见取值:
2.3.1 内边距(padding)- 单方向设置
- 场景:只给盒子的某个方向单独设置边框
- 属性名:padding - 方位名词
- 属性值:数字 + px 如:padding-top:10px;
小属性 | 含义 |
---|---|
padding-top | 上 padding |
padding-right | 右 padding |
padding-bottom | 下 padding |
padding-left | 左 padding |
2.3.2 盒子实际大小初级计算公式
- 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
- 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
2.4 CSS3盒模型(自动内减)
解决方法 ① :手动内减
- 操作:自己计算多余大小,手动在内容中减去
- 缺点:项目中计算量太大,很麻烦
解决方法 ② :自动内减
- 操作:给盒子设置属性 box-sizing : border-box ; 即可
- 优点:浏览器会自动计算多余大小,自动在内容中减去
不会撑大盒子的特殊情况:
- 如果子盒子没有设置宽度,此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border,此时不会撑大子盒子
2.5 外边距(margin)
- 作用:设置边框以外,盒子与盒子之间的距离
- 属性名:margin
- 常见取值:
2.5.1 外边距(margin)- 单方向设置
- 场景:只给盒子的某个方向单独设置外边距
- 属性名:margin - 方位名词
- 属性值:数字 + px 如:margin-top:10px;
2.6 清除默认内外边距
场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这 些标签默认的margin和padding,后续自己设置
- 比如:body标签默认有margin:8px
- 比如:p标签默认有上下的margin
- 比如:ul标签默认由上下的margin和padding-left
解决方法:
* {
margin: 0;
padding: 0;
}
2.7 外边距折叠现象
2.7.1 合并现象
- 场景:垂直布局的块级元素,上下的margin会合并
- 结果:最终两者距离为margin的最大值
- 解决方法:只给其中一个盒子设置margin即可
2.7.2 塌陷现象
- 场景:互相嵌套的块级元素,子元素的margin-top会作用在父元素上
- 结果:导致父元素一起往下移动
- 解决方法:
- 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)
- 给父元素设置overflow:hidden
- 转换成行内块元素
- 设置浮动
2.8 行内元素的margin和padding无效情况
场景:给行内元素设置margin和padding时
结果:
1. 水平方向的margin和padding布局中有效!
2. 垂直方向的margin和padding布局中无效!
3、设置鼠标的形状
元素:hover {
cursor: pointer;
}