选择器的特异度(Specificity)
如#nav .list li a:link id :1 (伪)类 :2 标签 :2
.hd ul.links a id :0 (伪)类 :2 标签 :2
继承
某些属性会自动继承父元素的计算值，除非显式指定一个值。
初始值
- CSS中，每个元素都有一个初始值
- 如去background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字显示重置为初始值
- background-color: initial
布局(Layout)是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
- 常规流：行级 块级 表格布局 FlexBox Grid布局
- 浮动
- 绝对定位
width
- 指定 content box 宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定 content box 高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border
- 指定容器边框样式、粗细和颜色
- 三种属性: border-width border-sytle border-color
- 四个方向: border-top border-right border-bottom border-left
margin
-
指定元素边框样式、粗细和颜色
-
取值为长度、百分数、auto
-
百分数相对于容器宽度
-
当margin-left为auto，margin-right也为auto时，水平居中
-
只会在上面元素的margin-bottom和下面元素的margin-top中取大的来留中间的间距，不会将两者相加
使用margin:auto水平居中
box-sizing:border-box
overflow:visible/hidden/scroll
块级vs行级
- 块级:不和其他盒子并列摆放，适用所有的盒模型
- 行级:和其他行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用
- 块级元素：生成块级盒子 如:body、article、div、main、section、h1-6、p、ul、li等 display：block
- 行级元素：生成行级盒子，内容分散在多个行盒(line box)中 如: span、em、strong、cite、code等 display:inline
display属性
-
block 块级盒子
-
inline 行级盒子
-
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
-
none 排版时完全被忽略
块级排版上下文
- Block Formatting Context
- 某些容器会创造一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的快盒
- display: flow-root
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
flexibility
- 可以设置子项的弹性: 当容器有剩余空间时，会伸展；容器空间不够时，会收缩
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
