11.CSS盒模型、弹性布局与调试工具全解析（含代码示例）
目录
一、盒模型
二、边框（border）
基础属性
三、box-sizing 属性（修改盒模型行为）
四、内边距（padding）
（一）基础写法示例
编辑
（二）复合写法
（三）注意
五、外边距（margin）
（一）基础写法示例
（二）复合写法
六、块级元素水平居中
示例 1（居中盒子，非文字）
示例 2（文字居中 + 盒子居中）
注意
七、去除浏览器默认样式
示例（带默认样式清除）
八、弹性布局（flex）
1. 常用属性：justify-content（水平方向）
示例 1（justify-content: start）
示例 2（justify-content: center）
示例 3（justify-content: end）
示例 4（justify-content: space-between）
注意
2.常用属性：align-items（垂直方向）
九、Chrome 调试工具 -- 查看 CSS 属性
1. 打开浏览器
2. 标签页含义
一、盒模型
每一个 HTML 元素就相当于是一个矩形的 “盒子”，这个盒子由以下几个部分构成：
边框
border内容
content内边距
padding外边距
margin
二、边框（border）
基础属性
粗细：
border-width样式：
border-style（默认没边框；solid实线边框；dashed虚线边框；dotted点线边框）颜色：
border-color
示例代码：
<style> div { width: 500px; height: 250px; border-width: 10px; border-style: solid; border-color: green; } </style> <body> <div></div> </body>另一个代码示例：
<style> div { width: 200px; height: 100px; border-color: black; border-style: solid; border-width: 10px; /* 也可以简写，三个元素属性的顺序没有特定要求 */ /* border: black solid 10px; */ box-sizing: border-box; } </style> <body> <div></div> </body>注意：
CSS注释
/* 注释内容 */
<style>标签内或外部 CSS 文件
/* 这是一行 CSS 注释 */HTML注释
<!-- 注释内容 -->HTML 文件中（CSS 代码块外）
<!-- 这是一行 HTML 注释 -->JavaScript注释
// 单行或/* 多行 */
<script>标签内或外部 JS 文件
// 单行注释
三、box-sizing 属性（修改盒模型行为）
通过box-sizing属性可以修改浏览器的行为，使边框不再撑大盒子。
*为通配符选择器。
示例：
* { box-sizing: border-box; }四、内边距（padding）
padding设置内容和边框之间的距离。默认内容是顶着边框放置的，用padding来控制这个距离，可以给四个方向都加上边距：
padding-toppadding-bottompadding-leftpadding-right
（一）基础写法示例
<style> div { width: 200px; height: 100px; padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; } </style> <body> <div>这是一个div</div> </body>（二）复合写法
可以把多个方向的padding合并到一起（四种情况都要记住，都很常见）：
padding: 5px;：表示四个方向都是 5pxpadding: 5px 10px;：表示上下内边距 5px，左右内边距为 10pxpadding: 5px 10px 20px;：表示上边距 5px，左右内边距为 10px，下内边距为 20pxpadding: 5px 10px 20px 30px;：表示上 5px，右 10px，下 20px，左 30px（顺时针）
（三）注意
使用
box-sizing: border-box;属性也可以使内边距不再撑大盒子（和上面border类似）。
五、外边距（margin）
控制盒子和盒子之间的距离，可以给四个方向都加上边距：
margin-topmargin-bottommargin-leftmargin-right
（一）基础写法示例
<style> div { border: solid green 5px; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; } </style> <body> <div></div> <div></div> <div></div> </body>（二）复合写法
规则同padding：
margin: 10px;：四个方向都设置margin: 10px 20px;：上下为 10，左右 20margin: 10px 20px 30px;：上 10，左右 20，下 30margin: 10px 20px 30px 40px;：上 10，右 20，下 30，左 40
六、块级元素水平居中
前提：
指定宽度（如果不指定宽度，默认和父元素一致）
把水平
margin设为auto
三种写法均可：
margin-left: auto; margin-right: auto; margin: auto; margin: 0 auto;示例 1（居中盒子，非文字）
<style> div { border: solid green 5px; width: 200px; height: 100px; margin: auto; } </style> <body> <div>这是一个div</div> <div>这是一个div</div> <div>这是一个div</div> </body>示例 2（文字居中 + 盒子居中）
<style> div { border: solid green 5px; width: 200px; height: 100px; /* margin: auto; */ text-align: center; margin-left: auto; margin-right: auto; } </style> <body> <div>这是一个div</div> <div>这是一个div</div> <div>这是一个div</div> </body>注意
这个水平居中的方式和
text-align不一样：margin: auto是给行内元素或者行内块元素居中的。text-align: center是让行内元素或者行内块元素居中的。
另外，对于垂直居中，不能使用 “上下
margin为auto” 的方式。
七、去除浏览器默认样式
浏览器会给元素加上一些默认的样式，尤其是内外边距，不同浏览器的默认样式存在差别。为了保证代码在不同的浏览器上都能按照统一的样式显示，往往我们会去除浏览器默认样式。使用通配符选择器即可完成这件事情：
* { margin: 0; padding: 0; }示例（带默认样式清除）
<style> div { border: solid green 5px; width: 200px; height: 100px; /* margin: auto; */ text-align: center; margin: 0px; padding: 0px; } </style> <body> <div>这是一个div</div> <div>这是一个div</div> <div>这是一个div</div> </body>八、弹性布局（flex）
1. 常用属性：justify-content（水平方向）
设置主轴上的子元素排列方式。使用之前一定要确定好主轴是哪个方向。
示例 1（justify-content: start）
<body> <div> <span>1</span> <span>2</span> <span>3</span> </div> <style> div { height: 700px; width: 700px; background-color: green; display: flex; justify-content: start; } div span { height: 100px; width: 100px; background-color: red; } </style> </body>示例 2（justify-content: center）
<body> <div> <span>1</span> <span>2</span> <span>3</span> </div> <style> div { height: 700px; width: 700px; background-color: green; display: flex; justify-content: center; } div span { height: 100px; width: 100px; background-color: red; } </style> </body>示例 3（justify-content: end）
<body> <div> <span>1</span> <span>2</span> <span>3</span> </div> <style> div { height: 700px; width: 700px; background-color: green; display: flex; justify-content: end; } div span { height: 100px; width: 100px; background-color: red; } </style> </body>示例 4（justify-content: space-between）
<body> <div> <span>1</span> <span>2</span> <span>3</span> </div> <style> div { height: 700px; width: 700px; background-color: green; display: flex; justify-content: space-between; } div span { height: 100px; width: 100px; background-color: red; } </style> </body>注意
弹性布局一定要加在父级元素上！！！！！！！！！！！！！！
2.常用属性：align-items（垂直方向）
<body> <div> <span>1</span> <span>2</span> <span>3</span> </div> <style> div { height: 700px; width: 700px; background-color: green; display: flex; justify-content: space-between; /* 垂直方向上的三种弹性布局 */ /* align-items: start; */ /* align-items: center; */ align-items: end; } div span { height: 100px; width: 100px; background-color: red; } </style> </body>九、Chrome 调试工具 -- 查看 CSS 属性
1. 打开浏览器
有两种方式可以打开 Chrome 调试工具：
直接按 F12 键
鼠标右键页面 => 检查元素
2. 标签页含义
elements：查看标签结构console：查看控制台source：查看源码 + 断点调试network：查看前后端交互过程application：查看浏览器提供的一些扩展功能（本地存储等）