CSS 的正常布局流，是什么？
原创CSS 的正常布局流，是什么？
原创
Learn-anything.cn
发布于 2021-12-10 18:01:28
发布于 2021-12-10 18:01:28
一、正常布局流 是什么？
正常布局流 也就是浏览器的默认展现页面的方式，具体步骤是：
- 第一步：把每个元素（Content），都用 padding、border、margin 包裹起来，形成一个盒子；
- 第二步：每个盒子占一行；
- 第三步：自上而下把所有盒子按序展示出来。
二、实例
没有做任何调整的元素，默认排列的样子？
1、代码
- 新建 index.html 文件，复制下面代码到文件并保持，用浏览器打开 index.html 看效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>正常布局流</title>
<style>
body {
width: 500px;
margin: 0 auto;
}
p {
background: rgba(255, 84, 104, 0.3);
border: 2px solid rgb(255, 84, 104);
padding: 10px;
margin: 10px;
}
span {
background: white;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>正常布局流</h1>
<p>第一个单一块级元素</p>
<p>第二个单一块级元素</p>
<p>第三个复杂块级元素： <span>行内元素一</span> 、 <span>行内元素二e</span> </p>
</body>
</html>2、浏览器查看效果
- 下图左是 chrome 打开 index.html 后的样子；
- 下图右是开发者工具，打开方式：（windows快捷键
Control+Shift+J、Mac快捷键Command+Option+J）。 - 右下角 就是元素盒子：蓝色区域是指的元素、外面包裹着 padding、border、margin
normal-layout
三、重要概念
1、块级元素
块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度。HTML 中大多数元素都是块级元素。
- 对应属性：
display:block
2、行内元素
不会占据整行，只会占取本身位置的元素。
- 对应属性：
display:inline
3、盒子模型
HTML 中 body标签下的每个元素都是个盒子，由内到外分别是：元素本身、padding、border、margin。
Content：即元素本身。Padding：即内边距，围绕着内容（比如段落）的空间。Border：即边框，紧接着内边距的线。Margin：即外边距，围绕元素外部的空间。
box-model
四、参考文档
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读