排队显示-流动模型（一），初识HTML(5)+CSS(3)-升级版教程-慕课网

排队显示-流动模型（一）

先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

任务

观查一下右侧代码编辑器中的代码，感受一下块状元素的特点：“在默认状态下，块状元素的宽度都为100%”。

这一小节没有验证正确性任务，单击“提交”按钮进行下一个小节学习。

?不会了怎么办

问答
评论
笔记
代码

全部精华我要发布

块状元素都会以行的形式占据位置这是啥意思

最新回答 / 慕婉清8107441

一种流动模式，默认会这样

1 回答 430 浏览

2022-04-15

关于<td>标签的疑问

最新回答 / qq_税成_0

块级标签得定义不是独占一行吗？

2 回答 901 浏览

2022-04-28

块状元素的宽度是什么意思？

最赞回答 / weixin_慕粉1151318

不设置块状元素时默认为占据整个界面，我是这样理解的

3 回答 962 浏览

2022-04-28

为什么已经规定了元素的宽和高，加入padding后，宽高会变化呢？

最新回答 / 前端菜鸭

自己写一个html文件打开，按一下f12，看style那个图吧。宽高设置的，是最里面的东西，padding是介于border和【width和height】之间的距离，所以不冲突

2 回答 752 浏览

2020-10-02

浏览器问题

最新回答 / qq_天道愁勤_03706874

ie 火狐 chrome 最好用这几个

1 回答 544 浏览

2020-10-02

为什么我在这一节设置padding和margin没有用？

最新回答 / 慕村1596084

还有人没

4 回答 1129 浏览

2020-11-01

浮动模型跟流动模型到底有啥区别

最赞回答 / _Doogie

流动模型是默认的网页排版方式，从左到右，自上而下，浮动模型会打破这种默认方式，一旦给某个元素设置浮动，会脱离正常文档流，比如说一个块级元素按正常来说是独占一行，从上到下排布，设置浮动后就不占据原有的空间，下面的块级元素就会网上走。

3 回答 1492 浏览

2020-06-13

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布

最新回答 / 肥宅风见啸

仓库中物品的堆放也有方式，流动模型就是从上往下堆，这样理解比较好

2 回答 1125 浏览

2019-04-17

盒子块级最高可以堆叠多少层？

最赞回答 / 慕侠8549552

私密地方打入18层

1 回答 964 浏览

2019-02-15

请问下为什么这里会有这个错误标志，而且我想添加p标签内部子标签div的css格式时候添加不了

最新回答 / qq_慕莱坞9504336

HTML规定p标签里不能放块级元素.

3 回答 1479 浏览

2019-01-11

有关流动模型的问题吧

最新回答 / qq_慕哥9048419

<div></div>盒子中的元素

1 回答 1070 浏览

2018-12-16

margin

最新回答 / 慕移动9181930

同学您好，您哪里有问题，请您说出来，我们这边帮您解答！style.left返回 是字符串  带 PX   

7 回答 1131 浏览

2022-03-25

流动模型动态块怎么做？

最新回答 / 慕妹1433497

<...code...>

1 回答 1377 浏览

2018-09-14

为什么box1盒子的距离跟其他盒子之间的距离怎么不一样

最赞回答 / 柯晴

不同标签默认的padding和margin不同，你可以设置相同的padding和margin，例如#box1,#box2,h1,p{padding:20px;margin:20px;}运行之后就相同了

3 回答 1459 浏览

2018-08-17

第17行是什么意思

最新回答 / 慕UI9385991

＃box2｛……｝定义id＝“box2”内的内容，有唯一性

2 回答 1467 浏览

2018-07-09

全部我要发布

最热最新

只看我的

13-2 排队显示-流动模型（一）