<hl class=="title">拉森火山国家公园</hl>
<article>
<style>
.title {
color: blue;
}
article hl {
color: red;
}
</style>
选择器的特异度specificity
- "#" id
- "." 伪类
- "E" 标签
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
- 显式继承
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.some-widget {
box-sizing: content-box;
}
初始值
- CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字显式重置为初始值
- background-color：initial
CSS求值过程
布局（layout）是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
- 常规流：行级、块级、表格布局、FlexBox、Grid布局
- 浮动
- 绝对定位
布局属性
- width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的content box宽度
- height
- 指定content box高度
- 取值为长度、百分数、auto
- auto取值由内容计算的来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效
- padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
- border
- 指定容器边框样式、粗细和颜色
- margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
- overflow
块级 vs. 行级
- 块级：
- Block Level Box
- 不和其它盒子并列摆放
- 适用所有的盒模型属性
- 行级：
- Inline Level Box
- 和其它行级盒子一起放在一行货拆开成多行
- 盒模型中的width、height不适用
display属性
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- none：排版时完全被忽略
常规流 Normal Flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其它元素都在常规流之内
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
- Inline Formatting Context (IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
块级排版上下文
- Block Formatting Context (BFC)
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block oiu jE
- Flex子项和Grid子项
- overflow值不是visible 的块盒
- display: flow-root;
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合井
- BFC不会和浮动元素重叠
Flex Box是什么？
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 是否允许折行
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展：容器空间不够时，会收缩
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
学习CSS的几点建议
- 充分利用MDN和W3C CSS规范
- 保持好奇心，善用浏览器的开发者工具
- 持续学习，CSS新特性还在不断出现
