CSS 知识框架

定位

普通流

定义：自上而下，从左至右

浮动

脱离标准普通流的控制，移动到其父元素中指定位置的过程。</br>特点：

1. 加了浮动的盒子是漂浮起来的，漂浮在其他标准流盒子上面

2. 加了浮动的盒子是不占位置的，浮起来之后原来的位置漏给了标准流盒子

3. 浮动可以使元素显示模式体现为行内块特性</br>清除浮动</br>定义：为了解决父级元素因为子级浮动引起内部高度为 0 的问题。</br>

4. 方法一： 给父级添加： overflow 为 hidden|auto|scroll

5. 方法二：:after 方式为空元素 .clearfix:after { content: "."

定位 position 定位属性

静态定位 static

默认方式

相对定位：relative

1. 相对定位是将元素相对于它在标准流中的位置进行定位

2. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有

3. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

绝对定位：absolute

1. 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

2. 子绝父相

3. 绝对定位的盒子居中：首先 left 50% 父盒子的一半大小/然后走自己外边距负的一半值就可以了 margin-left。

固定定位

1. 以浏览器窗口作为参照物来定义网页元素

2. 固定定位的元素跟父亲没有任何关系，只认浏览器

3. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

文本属性

1. 行间距:line-height

2. 水平对齐方式:text-align

3. 首行缩进:text-indent

4. 字间距:letter-spacing

5. 单词间距:word-spacing

6. 颜色半透明:color: rgba(0,0,0,0.3)7.文字阴影:text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;