伪元素选择器
css伪元素是用来添加一些选择器的特殊效果。 (必须要加content:"";)
元素名：：指令+{content:"内容";}
::before 在之前
::after 在之后
例如 p::before{content:"在之前";color: aqua;}
元素名：：指令+{内容;}
::first-letter 选择每个<p> 元素的第一个字母
::first-line 在第一行
：：selection 用户选中的内容
例如：p::selection{color: brown;}
属性选择器
具有特定属性的HTML元素样式不仅仅是class和id。
[属性]{声明块}
[target="_self"]{声明块}
例如 [target="_self"]{font-size：18px;}
[target]{声明块}
例如 [target]{color:red;}
相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素。
例如 div+p{font-size: 20px;color: blueviolet;}
盒模型
块级元素：
-
占据所有可用宽度，以换行开始。
-
通常用于较大的内容块，比如标题或结构化元素。
行内元素：
- 只占据内容所需的宽度，在同一行内一个接一个摆放。
- 通常用于较小的内容块，如被选设置为粗体或者斜体的一些词。
盒子的位置：
垂直方向上若两个外边距相邻，则折叠：
-
垂直方向：水平方向上不会重叠
-
外边距相邻：两个外边距之间没有border、padding和content。
-
合并：均为正数取最大，均为负数取最小，一正一负则相加。
盒子的分类：
一个元素产生什么样的盒子与它的display属性有关。
盒子的组成：
由margin、border、padding、content组成。
边框盒（border-box） 由border、padding、content组成。
填充盒（padding-box） 由padding、content组成。
内容盒（content-box） 由content组成。
html文本内容超出设置的宽高：
注意是英文的 :
隐藏的 overflow: hidden;
显示的 overflow: visible;
滚动的 overflow: scroll;
收缩与展开
例如 .box1 {width: 200px;height: 200px;background-color: burlywood;overflow: hidden;}
.box2 {width: 200px;height: 50px;background-color: cadetblue;text-align: end;line-height: 20px;}
.box2:hover + .box1{height: 400px; }
边框的样式：
border-width 同时设置所有边框的粗细
border-style 同时设置所有的边框样式
border-color 同时设置所有的边框颜色
盒子的宽高（撑大盒子的情况下）
默认情况 内容盒
box-sizing：content-box；
边框盒 （自动计算content的height和width）
box-sizing：border-box;
定位体系：
-
常规流 normal flow
常规流，又叫做普通流、文档流、普通文档流、流式布局。
常规流失最常见的定位体系，所有元素默认状态下都是常规流定位。
-
浮动 float
当元素的float属性值为left或right时元素为浮动元素。
float:none 不浮动，默认状态
float:left 向左边浮动
float:right 向右边浮动
-
左浮动的盒子向上向左排列
-
右浮动的盒子向上向右排列
-
浮动盒子的顶边不得高于上一个盒子的顶边
-
若放不下浮动的盒子，则该盒子自动换行
高度坍塌：常规流盒子的自动高度计算时，无视浮动盒子。
清除浮动：对最后一个子元素使用 clear:both 可防止父元素高度坍塌。
常规流盒子和浮动盒子混合摆放：
-
浮动盒子在摆放时要避开常规流盒子。
-
常规流盒子在摆放时无视浮动盒子。
-
绝对定位 absolute positioned
总体上若设置了元素的 positioned属性，则为绝对定位。
当浮动元素被设置为绝对定位：
元素的float属性会被强制更改为none（float属性失效）。
positioned:static 默认值，静态位置
positioned：relative 相对位置（相对于盒子原来的位置偏移，原本所占空间不变，没有脱离文档流，一般会用来做绝对定位的父元素。）
positioned：absolute 绝对位置（相对于设置了定位属性（除static）的父元素偏移，如果没有就相对于html元素偏移，脱离文档流，不再占据空间。）
子绝对父相对
positioned：fixed 固定位置（相对于浏览器窗口的固定位置，不会随着用户的滚动变化，脱离文档流。）
sticky 粘性定位（依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。）
任何一个元素都必须属于其中某一种定位体系，不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异。
重叠
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）， 具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
例如 .box1{z-index:数字；}
块级格式化上下文（BFC）
是一个独立的渲染区域，并且这个区域和外部毫不相干。
如何创建BFC
-
float的值不是none;
-
position的值不是static或者relative;
-
display的值是 inline-block、table-cell、flex、table-caption或者 inline-flex；
-
overflow的值不是visible；
BFC的作用
- 利用bfc避免上下相邻的两个元素margin重叠;
- 清除浮动、解决父级高度塌陷的问题（）；
- 自适应的两栏布局;
列表
有序列表
<ol>
<li>把冰箱门打开</li>
<li>把冰箱门打开</li>
<li>把冰箱门打开</li>
</ol>
| 属性值 | 含义 | 例如 |
|---|---|---|
| disc | 无序列表表默认，标记是实心圆 | li{list-style:disc} |
| circle | 标记是空心圆 | li{list-style:circle} |
| square | 标记是实心方块 | li{list-style:square} |
| decimal | 有序列表默认，标记是数字 | li{list-style:decimal} |
| none | 取消有序列表 | li{list-style:none} |
| lower-alpha | 小写英文字母 | li{list-style:lower-alpha} |
| upper-alpha | 大写英文字母 | li{list-style:upper-alpha} |
无序列表
<ul>
<li>把冰箱门打开</li>
<li>把冰箱门打开</li>
<li>把冰箱门打开</li>
</ul>
属性同有序列表一样
定义列表
<dl>
<dt>把冰箱门打开</dt>
<dd>把冰箱门打开</dd>
<dt>把冰箱门打开</dt>
<dd>把冰箱门打开</dd>
<dt>把冰箱门打开</dt>
<dd>把冰箱门打开</dd>
</dl>
