前言
浮动
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
1.常规流
2.浮动
3.定位
应用场景
1.文字环绕
一、浮动的基本特点是什么?
**修改float属性值为:
-left:元素靠上靠左
-right:元素靠上靠右
默认值为none
1.当元素浮动后,元素必定为块盒(更改display属性为block)
2.浮动元素的包含块,和常规流一样,为父元素的内容盒
**
二、盒子尺寸
1.引入库
1.宽度为auto时,适应内容宽度
2.高度为auto时,与常规流一致,适应内容高度
3.margin为auto,值为0
4.边框、内边距、百分比设置与常规流一样
2.定位
.常规流
2.浮动
3.定位
定位:手动控制元素在包含块中的精准位置
设计的CSS属性:position
position属性
-默认值:static,静态定位(不定位)
-relative:相对定位
-absolute:绝对定位
-fixed:固定定位
一个元素,只要position的取值不是static,认为该元素是一个定位元素
定位元素会脱离文档流(相对定位除外)
一个脱离文档流的元素:
1.文档流中的元素摆放时,会忽略脱离了文档流的元素
2.文档流中元素计算自动高度时,会忽略脱离文档的元素
相对定位relative
不会导致元素脱离文档流,只是让元素在原来位置上进行偏移
可以通过四个CSS属性对设置其位置:left,right,top,bottom
盒子的偏移不会对其他盒子造成任何影响
当左右(上下)发生冲突时,优先左(上)
绝对定位
-absolute
1.宽高为auto,盒子尺寸适应内容
2.包含块变化:找祖先元素中第一个定位元素,该元素的填充盒为其包含块,若找不到,则它的包含块为整个网页(初始化包含块)
固定定位–fixed
其他情况和绝对定位一样,除包含块不同
包含块:固定为视口(浏览器的可视窗口)
定位下的居中
某个方向居中:
1.定宽(高)
2.将左右(上下)距离设置为0
3.将左右(上下)margin设置为auto
绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index,通常情况下,该值越大,越靠近用户
只有定位元素设置z-index有效
z-index可以是负数,如果为负数,则常规流、浮动元素会将其覆盖