学习CSS4(浮动、定位)
程序员文章站
2024-01-27 22:25:04
...
浮动
修改float属性值为:
- left:左浮动,元素靠上靠左排列
- right:右浮动,元素靠上靠右排列
默认值为none
特点:
- 当一个元素浮动后,元素必定为块盒。(会自动更改display属性为block)
- 浮动元素包含块和常规流一样,为父元素的内容盒
浮动盒子的尺寸
- 宽度、 高度为auto时,适应内容宽高度(与常规流一样)
- margin为auto时,为0
- 边框、内边距、百分比设置与常规流一样
浮动盒子排列
- 浮动盒子在包含块中排列时会避开常规流块盒子
- 常规流块盒在排列时无视浮动盒子
- 行盒在排列时会避开浮动盒子
高度坍塌问题
根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子,(只会考虑常规流盒子)。
清除浮动的方法:
- 通过after伪类设置为块级元素清除两边浮动解决父元素高度坍塌。
<div class="clearfix"></div>
.clearfix::after{
content:"";
display:block;
clear: both;
}
- 创建BFC元素,它的自动高度会计算浮动元素
比如设置为绝对定位、浮动,但是一般不使用这两种方法,因为会影响到其他的布局,所以一般会使用副作用最小的方式:overflow:auto、hidden(最常用)……
可以写成
<style>
.clearfix{
overflow: hidden;
}
</style>
两种方法一般还是用第一种,副作用会小一点。
定位
定位:手动控制元素在包含块中的精准位置
涉及的CSS属性:position
position
- 默认值:static,静态定位(不定位)
- relative:相对定位
- absolute:绝对定位
- fixd:固定定位
定位元素会脱离文档流(相对定位除外)
一个脱离了文档流的元素:
- 文档流中的元素摆放时会忽略脱离了文档流的元素。
- 文档流中元素计算自动高度时,会忽略脱离了文档流的元素。
相对定位
不会导致元素脱离文档流,只是让元素在原来位置上进行偏离。
可以通过四个css属性设置其位置:
- left
- right
- top
- bottom
盒子的偏移不会对其他的盒子造成影响。
相对定位一般是为绝对定位提供一个包含块。
绝对定位
- 宽高为auto,适应内容
- 包含块变化:找祖先元素中第一个定位元素,该元素的填充盒为其包含块。若找不到,则它的包含块为真个网页(初始化包含块)
固定定位
其他情况和绝对定位完全一样。
包含块不同:固定为视口(浏览器的可视窗口(滚动的时候位置不随网页移动))
常见的固定定位:
页面的弹出层,比如广告,或者是哪种登录的界面
定位下的居中
某个方向居中:
- 定宽(水平)或者定高(垂直方向)
- 将左右上下距离设置为0
- 将左右上下margin设置为auto
绝对定位和固定定位时,margin为auto时,会自动吸收剩余空间。
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动(当同时设置了float=left 和position=absolute的时候,float会强制转为none)
- 没有外边距合并
上一篇: CSS 浮动(float)
下一篇: 架构师成长之路工具篇之Docker