浮动
元素浮动后的特点
- 🤢脱离文档流。
- 😊不管浮动前是什么元素,浮动后:默认宽与高都是被内容撑开(尽可能小),而且可以设置宽高。
- 😊不会独占一行,可以与其他元素共用一行。
- 😊不会
margin
合并,也不会margin
塌陷,能够完美的设置四个方向的margin
和padding
。 - 😊不会像行内块一样被当做文本处理(没有行内块的空白问题)。
浮动产生的影响及解决方案
产生影响
对兄弟元素的影响: 后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟
无影响。
对父元素的影响: 不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元
素。
解决方案
-
方案一: 给父元素指定高度。
-
方案二: 给父元素也设置浮动,带来其他影响。
-
方案三: 给父元素设置
overflow: hidden
。 -
方案四: 在所有浮动元素的最后面,添加一个块级元素,并给该块级元素设置
clear: both
。 -
方案五: 给浮动元素的父元素,设置伪元素,通过伪元素清除浮动,原理与方案四相同。===> 推荐使用
.parent::after { content: ""; display: block; clear:both; }
布局中的一个原则:设置浮动的时候,兄弟元素要么全都浮动,要么全都不浮动。
浮动相关属性
CSS 属性 | 功能 | 属性值 |
---|---|---|
float |
设置浮动 | left : 设置左浮动right : 设置右浮动none :不浮动,默认值 |
clear |
清除浮动 清除前面兄弟元素浮动元素的响应 |
left :清除前面左浮动的影响right :清除前面右浮动的影响both :清除前面左右浮动的影响 |
定位
相对定位
如何设置相对定位
- 给元素设置
position: relative
即可实现相对定位。 - 可以使用
left
、right
、top
、bottom
四个属性调整位置。
相对定位的参考点
- 相对自己原来的位置
相对定位元素的特点
- 不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。
- 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
- 默认规则是:
- 定位的元素会盖在普通元素之上。
- 都发生定位的两个元素,后写的元素会盖在先写的元素之上。
left
不能和right
一起设置,top
和bottom
不能一起设置(通常情况下)。- 相对定位的元素,也能继续浮动,但不推荐这样做。
- 相对行为的元素,也能通过
margin
调整位置,但不推荐这样做。
注意:绝大多数情况下,相对定位,会与绝对定位配合使用。
绝对定位
如何设置绝对定位
- 给元素设置
position: absolute
即可实现绝对定位。 - 可以使用
left
、right
、top
、bottom
四个属性调整位置。
绝对定位的参考点
-
参考它的包含块。
什么是包含块?
- 对于没有脱离文档流的元素:包含块就是父元素;
- 对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位,那包含块就是整个页面)。
绝对定位元素的特点
-
脱离文档流,会对后面的兄弟元素、父元素有影响。
-
left
不能和right
一起设置,top
和bottom
不能一起设置(通常情况下)。 -
绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
-
绝对定位的元素,也能通过
margin
调整位置,但不推荐这样做。 -
无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素。
何为定位元素? —— 默认宽、高都被内容所撑开,且能自由设置宽高。
固定定位
如何设置固定定位
- 给元素设置
position: fixed
即可实现固定定位。 - 可以使用
left
、right
、top
、bottom
四个属性调整位置。
固定定位的参考点
-
参考它的视口
什么是视口?—— 对于 PC 浏览器来说,视口就是我们看网页的那扇“窗户”。
固定定位元素的特点
- 脱离文档流,会对后面的兄弟元素、父元素有影响。
left
不能和right
一起设置,top
和bottom
不能一起设置。- 固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
- 固定定位的元素,也能通过
margin
调整位置,但不推荐这样做。 - 无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。
粘性定位
如何设置粘性定位
- 给元素设置
position: sticky
即可实现粘性定位。 - 可以使用
left
、right
、top
、bottom
四个属性调整位置,不过最常用的是top
值。
粘性定位的参考点
- 离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先。
粘性定位元素的特点
- 不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式。
- 最常用的值是
top
值。 - 粘性定位和浮动可以同时设置,但不推荐这样做。
- 粘性定位的元素,也能通过
margin
调整位置,但不推荐这样做。
粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。
定位层级
- 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
- 如果位置发生重叠,默认情况是:后面的元素,会显示在前面元素之上。
- 可以通过 CSS 属性
z-index
调整元素的显示层级。 - z-index 的属性值是数字,没有单位,值越大显示层级越高。
- 只有定位的元素设置
z-index
才有效。 - 如果
z-index
值大的元素,依然没有覆盖掉z-index
值小的元素,那么请检查其包含块的层级。
定位的特殊应用
注意:
- 发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设置宽高。
- 发生相对定位后,元素依然是之前的显示模式。
- 以下所说的特殊应用,只针对 绝对定位 和 固定定位 的元素,不包括相对定位的元素。
让定位元素的宽充满包含块
- 块宽想与包含块一致,可以给定位元素同时设置
left
和right
为0
。 - 高度想与包含块一致,
top
和bottom
设置为0
。
让定位元素在包含块中居中
-
方案一
left:0; right:0; top:0; bottom:0; margin:auto;
-
方案二(不推荐,因为不太方便之后的计算)
left: 50%; top: 50%; margin-left: 负的宽度一半; margin-top: 负的高度一半;
注意:该定位的元素必须设置宽高!