2020年6月25日笔记

CSS

CSS布局的三种机制

定位（position）

定位详解

定位模式（position）

固定定位（fixed）

固定定位是绝对定位的一种特殊形式

• 完全脱标——完全不占位置；
• 只认浏览器的可视窗口——浏览器可视窗口+边偏移属性来设置元素的位置；
• 跟父元素没有任何关系；
• 不跟滚动条滚动；
• IE6等低版本浏览器不支持固定定位。

定位的拓展

绝对定位的盒子居中

在使用绝对定位想要水平居中时可以使用下面的方法：

1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
2. margin-left: -100px：让盒子向左移动自身宽度的一半。

垂直居中同理。

堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认是后来居上，后面的盒子会压住前面的盒子。
使用z-index层叠等级属性，可以调整盒子的堆叠顺序。

1. 属性值：正整数、负整数、0，默认为0，数值越大，盒子越靠上。
2. 如果属性相同，则后来居上。
3. 数字后面不能加单位。
4. 只应用于相对定位、绝对定位、固定定位，标准流、浮动、静态定位无效。

定位改变display属性

可以改变显示模式（display）有以下方式：

• 用inline-block转换为行内块；
• 使用浮动float会把盒子默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）；
• 绝对定位和固定定位也和浮动类似，默认会转换为行内块。
• 浮动的元素、绝对定位的元素都不会触发外边距合并的问题。