基础知识
1.层叠、优先级
层叠三大规则：
-
- 样式表来源
- 选择器优先级
- 源码位置
选择器优先级： 内联>id>class = attribute = pseudo-class > type = pseudo-element
源码优先级：
- 对于@import的样式，根据@import的顺序
- 对于link和style标签的样式，根据document中的顺序决定
有层叠概念引申出的css代码good proctice:
- 选择器尽量少用id
- 尽量不要用！important
- 自己的样式加载在引用库样式的后面
2.继承
- 大部分具有继承特性的属性跟文本相关：
color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing
还有少部分列表、表格的属性
- 可以使用inherit关键字显示指定一个属性值从其父元素继承
3.盒模型
浏览器根据视觉格式化模型（visual formatting model），将所有元素表示为盒子模型，css通过盒模型做layout
- 控制盒子类型：
display:block、inline、inline-block、flex、...
- 控制盒子大小 & 计算方式 width,height,...
box-sizing:content-box、border-box
- 控制盒中内容流
overflow:auto、scroll、hidden、...
- 控制定位
position:static、relative、absolute、fixed、sticky
- 是否可见
visibility:visible、hidden、...
3.1盒模型-内外边距
padding、border、margin中，只有margin可以设置负值
设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠；
如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来；
布局
1.概念
- css3之前常用的布局：
- Normal Flow 常规流
默认的布局方式
有块格式化上下文和内联格式化上下文
- Float浮动流
用float属性控制
脱流，做横向布局
- Positioning定位流
用position属性控制
fixed和absolute脱离文档流可以自由定位、覆盖等
- css3之后的新增布局：
Flex弹性盒子布局 一维空间布局
Grid网络布局 二维空间布局
Multicol多列布局 文本、内容的多列展示
