3. 编辑元素
盒模型
本节讲解元素的盒模型，参考资料为w3school。
1. 盒模型概述
（1）盒模型的最内部是内容区（content）。直接包围内容区的是内边距（padding）。内边距的外边缘是边框（border）。边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素。
（2）内边距、边框和外边距都是可选的，默认值是零。
（3）增加内边距、边框和外边距不会影响内容区的尺寸，但是会增加盒模型的总尺寸。
（4）假设盒模型的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个盒模型达到 100 像素，就需要将内容的宽度设置为 70 像素，请看下图：
（5）内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。
2. 进入盒模型
在文档流界面→右键点击元素→样式→盒模型。
3. 属性设置
宽度：元素的宽度，可填写“数值+px”或“数值+%”。
高度：元素的高度，可填写“数值+px”或“数值+%”。
最小宽度：元素的最小宽度，可填写“数值+px”或“数值+%”（通常应用于页面自适应情况）。
最小高度：元素的最小高度，可填写“数值+px”或“数值+%”（通常应用于页面自适应情况）。
最大宽度：元素的最大宽度，可填写“数值+px”或“数值+%”（通常应用于页面自适应情况）。
最大高度：元素的最大高度，可填写“数值+px”或“数值+%”（通常应用于页面自适应情况）。
外边距（margin）：外边距包围边框。可填写“数值+px”或“数值+%”，顺序为上、右、下、左。
内边距（padding）：内边距包围实际内容，内边距的外边缘是边框。可填写“数值+px”或“数值+%”，顺序为上、右、下、左。
转角：边框的圆角半径，可填写“数值+px”或“数值+%”，顺序为左上、右上、右下、左下。
阴影：为盒模型添加阴影，格式为“数值+px”，第一个值为投向右侧的阴影，第二个值为投向下方的阴影。还可以设置阴影的模糊、扩散程度以及阴影的颜色。
边框厚：边框厚度，可填写“数值+px”、medium、thin。
边框风格：边框的形态，可选择直线、点线、点划线、双线等。
边框颜色：设置边框的颜色。
z索引：设置元素的层级，填写数字，无单位。z索引值高的元素会覆盖z索引值低的元素。
显示模式：元素的显示模式，可选择内联、块式、内联块等。
4. 提示
（1）内边距padding
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}（2）内边距的百分比数值
可以为元素的内边距设置百分数值。百分数值是相对于其父元素的宽度计算的，这一点与外边距一样。所以，如果父元素的宽度改变，它们也会改变。
下面这条规则把段落的内边距设置为父元素宽度的 10%：
p {padding: 10%;}例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。
<div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div>（3）外边距 margin
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：
h1 {margin : 10px 0px 15px 5px;}（4）还可以为 margin 设置一个百分比数值：
p {margin : 10%;}（5）还可以只需指定必要的值，而不必全部都应用 4 个值，例如：
h1 {margin: 0.25em 1em 0.5em;} 等价于 0.25em 1em 0.5em 1em
h2 {margin: 0.5em 1em;} 等价于 0.5em 1em 0.5em 1em
p {margin: 1px;} 等价于 1px 1px 1px 1px （6）这种办法有一个小缺点，您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素，下外边距和右外边距设置为 30 像素。在这种情况下，必须写作：
p {margin: 20px 30px 30px 20px;}（7）单边外边距属性(margin)
您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin（需要键入很多 auto），而是可以采用以下方法：
p {margin-left: 20px;}一个规则中可以使用多个这种单边属性，例如：
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }