css布局规则,浮动,定位

视觉格式化模型

常规流

所有元素默认情况下都属于常规流(文档流,普通文档流,常规文档流)布局
总体规则:块盒独占一行,行盒水平依次排列。

包含块

每个盒子都有它的包含块,包含块决定了盒子的排列区域
绝大部分情况下,盒子的包含块为其父元素的内容盒

块盒

1.每个块盒的总宽度必须刚好等于包含块的宽度,宽度的默认值为auto

margin的默认值为0,取值也可以是auto(将剩余空间吸收)
width的吸收能力强于margin
若宽度,边框,内边距,外边距计算后仍有剩余空间,该剩余空间被margin-right全部 吸收
在常规流中,想让块盒在其包含块中居中,可以定宽,然后左右margin设置为auto。
也就是margin:0 auto;

2.每个块盒垂直方向上的auto值

height的值为auto表示适应内容的高度
margin的值为auto表示0

3.百分比取值

padding,width,margin取值为百分比时,是相对于包含块的宽度
height的百分比:
(1)包含块的高度取决于子元素的高度时,设置百分比无效
(2)包含块的高度不取决于子元素的高度,百分比相对于父元素高度

4.上下外边距的合并

两个常规流块盒,上下外边距相邻会进行合并(取最大值),包括相邻和父子两种情况

浮动

浮动常用于文字环绕和横向排列

浮动的基本特点

float的值为left时,左浮动,元素靠上靠左
float的值为right时,右浮动,元素靠上靠右
默认值为none
1.当一个元素浮动后,元素必定为块盒(display属性的值为block)
2.浮动元素的包含块和常规流一样,为父元素的内容盒

盒子排列

1.左浮动的盒子靠上靠左
2.右浮动的盒子靠上靠右
3.浮动盒子在包含块中排列时,会避开常规流块盒
4.常规流块盒在排列时,无视浮动盒子
5.行盒在排列时,会避开浮动盒子
6.不会发生外边距合并
(如果文字不在行盒中,浏览器会自动生成一个行盒包裹文字,这叫做匿名行盒)

高度坍塌

常规流盒子的自动高度在计算时不会考虑浮动盒子,这是高度坍塌的根源
解决方法:清除浮动:clear属性
clear的默认值为none,
left:清除左浮动,该元素必须出现在所有左浮动盒子的下方
right:清除右浮动,该元素必须出现在所有右浮动盒子的下方
both:清除左右浮动,该元素必须出现在所有浮动盒子的下方

定位

手动控制元素在包含块中的精准位置

position属性

默认值为static:静态定位(不定位)
relative:相对定位
absolute:绝对定位
fixed:固定定位

一个元素的position属性的取值不是static,则该元素是一个定位元素
定位元素会脱离文档流(相对定位除外)
脱离文档流的元素:
1.文档流中的元素摆放时,会忽略脱离了文档流的元素
2.文档流中的元素计算自动高度时,会忽略脱离了文档流的元素

相对定位

不会导致元素脱离文档流,只是让元素在原来位置上进行偏移
而且盒子的偏移不会对其他盒子造成任何英雄
通过四个css属性对其设置位置
-left
-right
-top
-bottom

绝对定位

1.宽高为auto,适应内容
2.包含块变化:找父级及以上的第一个定位元素,该元素的填充盒为其包含块。如果没有则它的包含块为整个网页(初始包含块)

固定定位

除了包含块不同,其他情况和绝对定位完全一样
固定定位的包含块固定为视口(浏览器的可视窗口,即不随浏览器窗口移动而移动)

定位下的居中

某个方向居中:
1.定宽(高)
2.将左右(上下)的距离设置为0
3.将左右(上下)的margin设置为auto

绝对定位和固定定位的margin为auto时,会自动吸收剩余空间

多个定位元素重叠

堆叠上下文,设置z-index,通常情况下,该值越大,越靠近用户(只有定位元素设置有效)
z-index可以时负数,如果值为负数,遇到常规流和浮动元素会被其覆盖。

补充

绝对定位,固定定位元素一定是块盒,一定不是浮动,它们不会发生外边距合并

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值