二. 继承-层叠-元素类型
2.1. CSS属性继承
CSS的某些属性具有继承性(Inherited):
- 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
- 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高); 如何知道一个属性是否具有继承性呢?
- 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性; 另外要多学会查阅文档, 文档中每个属性都有标明其继承性的:
2.2. CSS属性层叠
- 一个CSS属性可以多次设置:
- 判断一: 权重, 优先级;
- 判断二: 先后顺序;
- 常见的选择器:
- !important -> 10000
- 内联 -> 1000
- id -> 100
- 类/伪类/属性 -> 10
- 元素 -> 1
- 统配 -> 0
2.3. 元素的类型
- div -> 块级元素
- span -> 行内级
- 有本质的区别 -> display: block
- span -> 块级
- div -> 行内级
display:
- block
- 独占一行(父元素)
- 可以设置宽度和高度
- 默认高度是内容的高度
- inline-block
- 和其他行内级元素在同一行显示
- 可以设置宽度和高度
- 默认宽高由内容决定
- inline
- 和其他行内级元素在同一行显示
- 不能设置宽度和高度
- 宽高由内容决定
- none
2.4. 元素的隐藏方法
display: none：
- 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样); visibility: hidden
- 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
- 默认为visible, 元素是可见的; rgba -> alpha：
opacity -> 设置透明度
- 所有的子元素都会跟着一起设置
2.5. overflow
overflow用于控制内容溢出时的行为：
- visible
- hidden
- scroll
- auto
2.6. HTML嵌套的规范
- 块级/行内块级可以嵌套其他元素
- p元素不能嵌套div元素
- 行内级元素不能嵌套块级元素
块级元素、inline-block元素：
- 一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）
- 特殊情况，p元素不能包含其他块级元素 行内级元素（比如a、span、strong等）：
- 一般情况下，只能包含行内级元素
三. 盒子模型
3.1. 认识盒子模型
- HTML元素都是盒子
- 盒子模型组成属性:
- content：元素的内容width/height
- padding：元素和内容之间的间距
- border：元素自己的边框
- margin：元素和其他元素之间的间距
3.2. content
- width/height
- width: auto
- min-width/max-width；移动端适配时, 可以设置最大宽度和最小宽度;
注意: 对于行内级非替换元素来说, 设置宽高是无效的!
3.3. padding
内边距:padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;
3.4. border
边框
- width
- style
- color
div {
border: 10px solid red;
}
3.5. border-radius
圆角:
- 具体的值, 比如6px
- 百分比 -> border box(了解)
- 50%
