css定位、浮动与清除、元素的显示和隐藏内容总结

css定位、浮动与清除、元素的显示和隐藏

定位

方式：静态、粘性、相对、绝对、固定

1、静态定位：元素默认初始状态就是一种定位 position： static，在静态定位中 top/left/bottom/right 无效

2、粘性定位：在相对定位与固定定位之间进行切换 position：sticky 、在top值没有达到所写的值之前是相对定位，当top值等于此元素与可视区上边框的距离时，切换为固定定位

3、相对定位：相对于自身原位置进行定位，属于半脱离文档流 position：relative、元素进行相对定位后，原位置被保留，其他元素不能对空出来的位置进行填充

4、绝对定位：以body为参照物进行定位，当父级进行定位后，以父级为参照物（子绝父相），全脱离文档流，元素性质发生改变，变成行内块元素 position：absolute；

5、固定定位：以浏览器的可视窗口为参照物进行固定定位，全脱离文档流，元素性质会发生改变，为行内块元素 position：fixed；

6、z-index：设置定位元素的堆叠次序，也就是层级，该属性值可以是正数，也可以是负数，默认值为auto；属性值越大，元素层级越高，只对定位元素有效果，

浮动与清除浮动

浮动

float： left/right

特性：

1，让元素水平排列
2，浮动的元素会脱离文档流
3，元素浮动后，元素性质会发生改变，变为行内块元素
4，使用float后，margin“0 auto；会被覆盖掉，不能使用。

清浮动

1、overflow：hidden{

1）、清除浮动

2）、解决margin拖拽父级的bug

3）、溢出隐藏}

2、clear：both{不推荐使用，太强大，使用时应根据情况而定}

3、给浮动元素的父元素加上高度即可（height）

4、隔墙法：给元素添加一个块元素标签，然后给添加的块元素清除浮动（clear：both）

元素的隐藏与显示

display: 实现元素的显示和隐藏，当元素隐藏时，不占据原位置；none：隐藏；block：显示；

visibility：实现元素的显示和隐藏，元素隐藏时依旧占据原来位置。hidden：隐藏；visible：显示；

overflow：显示或隐藏溢出的内容，

hidden：隐藏溢出的内容

scroll：滚动条，无论是否有内容溢出，都会显示滚动条。

auto ：滚动条，只要内容溢出，滚动条显示。