CSS相关

Posted 2020-07-21 薄冰

1.盒子3D模型（5层）：border、content+padding、background-image、background-color、margin

2.CSS布局模型：绝对定位（absolute）、相对定位（relative）、固定定位（fixed，与background-attachment:fixed功能相同）

3.定宽块状元素水平居中：用margin-left/right:auto;

不定宽块状元素水平居中：加table标签，display：inline ；table{margin:0 auto;}；

设置position：relative和left：50%；

自动居中，设置包裹层,如：#a{width:200px;margin:0 auto;}，auto会根据浏览器的宽度自动的设置外边距，外边距=（浏览器的宽度-外包含层的宽度）/2

如果想让页面自动居中，设置margin：auto后不能再设置浮动或绝对定位属性。

4.设置了浮动的元素，仍旧处于标准文档流中，仍占据空间。

5.横向两列布局：relative——父元素相对定位（固定宽度列）

absolute：自适应宽度元素绝对定位

注意：固定宽度列的高度>自适应宽度的列

5.fixed定位——绝对定位：脱离文档流，位置固定不变，兄弟元素会从其下穿过

未设置偏移量：有已定位祖先元素：以祖先元素为基准定位；无已定位祖先元素：以浏览器窗口为基准定位

已设置偏移量：有无已定位祖先元素，均以浏览器窗口为基准偏移。