CSS 定位

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情 >>

CSS知识框架

定位

普通流

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

浮动

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

1. 加了浮动的盒子是漂浮起来的，漂浮在其他标准流盒子上面
2. 加了浮动的盒子是不占位置的，浮起来之后原来的位置漏给了标准流盒子
3. 浮动可以使元素显示模式体现为行内块特性 清除浮动 定义：为了解决父级元素因为子级浮动引起内部高度为0 的问题。
4. 方法一： 给父级添加： overflow为 hidden|auto|scroll
5. 方法二：:after 方式为空元素 .clearfix:after { content: "."定位position 定位属性 静态定位 static 默认方式相对定位：relative
6. 相对定位是将元素相对于它在标准流中的位置进行定位
7. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有
8. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）绝对定位：absolute
9. 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
10. 子绝父相
11. 绝对定位的盒子居中：首先left 50% 父盒子的一半大小/然后走自己外边距负的一半值就可以了 margin-left。固定定位
12. 以浏览器窗口作为参照物来定义网页元素
13. 固定定位的元素跟父亲没有任何关系，只认浏览器
14. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

image.png

文本属性

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:水平位置 垂直位置 模糊距离 阴影颜色;