css布局 笔记

文章详细阐述了网页布局中的常规流规则,包括块盒和行盒的排列方式,以及块盒的尺寸和位置计算。同时,讨论了浮动布局的应用场景和特性,如左浮动和右浮动的影响,以及高度坍塌和清除浮动的方法。此外,提到了定位在页面布局中的作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

常规流

盒模型:规定单个盒子的规则

视觉格式化模型(布局规则):页面中的多个盒子排列规则

视觉格式化模型,大体上将页面中盒子的排列分为三种方式:

1、常规流

2、浮动

3、定位

常规流布局

常规流、文档流、普通文档流、常规文档流

所有元素,默认情况下,都属于常规流布局

总体规则:块盒独占一行,行盒水平依次排列

包含快(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域

绝大部分情况下:盒子的包含块,为其父元素的内容盒

块盒

1.每个块盒的总宽度,必须刚好等于包含块的宽度

宽度的默认值是auto

margin的取值也可以是auto,默认值0

auto:将剩余空间吸收掉

width吸收能力强于margin

若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收

在常规流中,块盒在其包含块中居中,可以定宽、然后左右margin设置为auto

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

height:auto,适应内容的高度

margin:auto,等于0

3.百分比取值

padding、宽、margin可以取值为百分比

以上的所有百分比相对于包含块的高度。

高度的百分比:

1)包含块的高度是否取决于子元素的高度,设置百分比无效

2)包含块的高度不取决于子元素的高度,百分比相对于父元素高度

4.上下外边距的合并

两个常规流块盒,上下外边距相邻,会进行合并

两个外边距取最大值

浮动

应用场景

文字环绕、横向排列

浮动的基本特点

修改float属性值为:

—— left:左浮动,元素靠上靠左

—— right:右浮动,元素靠上靠右

默认值为none

1.当一个元素浮动后,元素必定为块盒(更改display属性为block)

2.浮动元素的包含块,和常规流一样,为父元素的内容盒

盒子尺寸

1.宽度为auto时,适应内容宽度

2.高度为auto时,与常规流一致,适应内容高度

3.margin为auto时,为0

4.边框、内边距、百分比设置与常规流一致

盒子位置

1.左浮动的盒子靠上靠左排列

2.右浮动的盒子靠上靠右排列

3.浮动盒子在包含块中排列时,会避开常规流盒子

4.常规流块盒在排列时,无视浮动盒子

高度坍塌

根源:常规流盒子的自动高度,在计算时不会考虑浮动盒子

清除浮动,涉及css属性:clear

—— 默认值:none

—— left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方

—— right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方

解决方法:

1.在浮动盒子的父元素下的最后添加一个常规流盒子,使用clear:both 样式清除浮动,让该常规流盒子识别上述浮动盒子位置

2.给父元素添加伪元素 

        .parentDiv:after{

                content:"";

                clear:both;

                display:block;

        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值