CSS相关知识

[xiongchengbin]

position取值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

同时要注意以下几点：
（1）relative产生的定位并不会让元素脱离文档流，并且其原来的位置也会保留。
（2）当元素设置了 absolute 后，默认就不是100%的宽度了，而是内容多宽就是多宽。如果想让它变成100%的宽度。有两种方法，一个是直接设置width:100%，另一个是设置left:0px right:0px。
（3）position:absolute常和position:relative一起使用。
来源今日头条前端面试总结

元素居中

1. 水平居中

1. 行内元素： text-align:center
2. 块级元素：margin: auto

2. 垂直居中

1. padding-top&padding-bottom组合
2. line-height
3. table-cell 中设置 vertical-align: middle
4. 幽灵元素： 使用Inline-block的vertical-align:middle
5. 已知高度： position: absolute && top: 50% && margin: -apx;
6. 未知高度：position: absolute && top: 50% && transform: translateY(-50%);

3. 水平垂直居中

1. 高度和宽度固定： 结合position:absolute & margin: auto 实现
2. 使用transform方案

ps: 以上居中都可以使用flex实现
具体实现&示例:CSS居中完整指南

盒子模型&BFC

布局

圣杯布局

1. flex布局
2. float布局
3. position

高清屏1px问题

移动端自适应方案

CSS命名规范

CSS预编译方案