h5学习之10(html中页面内容布局的方法流式布局,浮动布局,定位布局,弹性布局)

本文介绍了网页设计中的四种常见布局方式:流式布局、浮动布局、定位布局和弹性布局。每种布局都有其特点和适用场景,例如弹性布局适用于响应式设计,而定位布局则能够精确控制元素的位置。

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

页面文档布局的4种方式

1.流式布局(又称自然布局)

特点:没有任何修饰的布局,野菊是元素在排版过程中,元素从上到下,从左到右的流式排列,遇到块级标签换行等

2.浮动布局(float)

http://blog.youkuaiyun.com/qq_36423639/article/details/53856500

特点:给元素设置浮动(float)属性后,元素脱离文档流,进行左右浮动,紧贴着父级元素的左右框。此浮动以按时留出来的位置,由后面的非浮动元素进行填充

3.定位布局(position)

特点:定位分为相对定位,绝对定位和固定定位,也就是给元素设置了一个位置属性,我们可以通过left,top,bottom,right四个属性来确定元素的一个排版位置

4.弹性布局(flex)

特点:它是css3提出来的一种新的布局方式,该布局的目的是提供一中更加高效的方式来对容器中的条目进行布局,对齐和分配空间

文本流与非文本流

1.什么是文本流

解释:将窗体自上而下分成一行行,并在每一行中按从左到右的顺序来进行排放元素,这个我们称之为文档流

2.什么是脱离文档流

解释:将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在进行定位

下面有三种使元素脱离文档流的属性方法

1.浮动

2.绝定定位

3.固定定位

(注意:在IE中浮动也存在与文档流中)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值