CSS盒模型
所有的HTML元素都可以被认为是盒子。CSS盒模型代表网站的设计和布局。 它由外边距(margin)，边框(border)，内边距（填充）(padding)和实际内容组成。
属性以相同的顺序工作：顶部(top)，右侧(right)，底部(bottom)和左侧(left)。
属性工作顺序为
顺时针，以上右下左的顺序。
下图展示了盒模型：
不同部分的说明：
-
Margin(外边距) - 清除边框外的区域，外边距是透明的。 -
Border(边框)- 围绕在内边距和内容外的边框。 -
Padding(内边距) - 清除内容周围的区域，内边距是透明的。 -
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的
宽度和高度，你需要知道的盒模型是如何工作的。
了解元素的总宽度
网页的每个元素都是一个盒子。
CSS通过盒模型来确定一个元素的大小以及如何放置它们。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
使用盒模型时，了解元素的总宽度是如何计算的非常重要。
当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
例如，带有填充(padding)的盒的总宽度将是宽度加上填充左侧(padding-left)和填充右侧(padding-right)的总和。
这是另一个有边距(margin)，边框(border)和填充(padding)的盒。
总宽度是左右边距，左右边框，左右填充以及内容的实际宽度的总和。
当您使用CSS设置元素的宽度和高度属性时，可以设置内容区域的宽度和高度。
在盒模型中
设置背景颜色时，将覆盖内容区域以及填充区域(padding)。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度
元素的总高度的计算方式与宽度相同。
下面的例子与上一课有关填充(padding)，边框(border)和边距(margin)的计算方式相同。
总而言之，
总元素高度 = 高度(height) + 顶部填充(padding-top) + 底部填充(padding-bottom) + 顶部边框(border-top) + 底部边框(border-bottom) + 顶部边距(margin-top) + 底部边距(margin-bottom)
知识点普及：遇到内容div想居中与外部div中，可以使用 **margin : 0 auto ** 这样会根据内部div宽度自动填充左右两侧的margin值以达到居中效果
border属性
盒子边框（border）
语法：border: border-width | border-style | border-color\
CSS的border属性允许您自定义HTML元素的边框。
为了向元素添加边框，您需要指定边框的大小，样式和颜色。
下面的示例显示了如何向段落添加宽度为5px的纯绿色实线边框。
HTML代码：
<p>我听见雨滴在青青草地</p>
CSS代码：
p {
padding: 10px;
border: 5px solid green;
}
执行结果：
border-style属性
border-style的默认值是none，它没有定义边界。
边框样式属性支持各种样式：点状(dotted)，虚线(dashed)，双线(double)，solid(实线)。下面的例子说明了它们之间的区别。
HTML代码：
<body>
<p class="none">none 我可真好看</p>
<p class="solid">solid 我可真好看</p>
<p class="dotted">dotted 我可真好看</p>
<p class="dashed">dashed 我可真好看</p>
<p class="double">double 我可真好看</p>
<p class="groove">groove 我可真好看</p>
<p class="ridge">ridge 我可真好看</p>
<p class="inset">inset 我可真好看</p>
<p class="outset">outset 我可真好看</p>
<p class="hidden">hidden 我可真好看</p>
</body>
CSS代码：
p.none {border-style: none;}
p.solid {border-style: solid;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
执行结果：
border-width属性
border宽度
border的属性可以单独设置。 border-width属性指定边框的宽度。
HTML代码：
<p class="first">
冷宫
</p>
<p class="second">
冷宫
</p>
CSS代码：
p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 5px;
}
执行结果：
border 颜色
可以使用颜色名称关键字，RGB或十六进制值定义元素的边框颜色。
HTML代码：
<p class="first">
<strong>冷宫</strong> 欢迎您
</p>
<p class="second">
<strong>冷宫</strong> 欢迎您
</p>
<p class="third">
<strong>冷宫</strong> 欢迎您
</p>
CSS代码：
p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: blue;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: #FF6600;
}
p.third {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: rgb(0, 153, 0);
}
执行结果：
CSS 宽度和高度
将一个<div>元素的总宽度和高度设置为100px：
这里注意不要和
盒模型的总宽度和高度弄混了哦~
HTML代码：
<div>我的宽和高都是100px哦~</div>
CSS代码：
div {
border: 5px solid green;
width: 90px;
height: 90px;
}
执行结果：
注意： div的总宽度和高度将是90px + 5px（border）+ 5px（border）= 100px;
宽度和高度的度量单位
元素的宽度和高度也可以使用百分比来分配。
在下面的例子中，元素的宽度以百分比分配，高度以像素为单位。
HTML代码：
<div>
该元素的总宽度是 <strong>100%</strong> 而总高度是
<strong>100px</strong> .
</div>
CSS代码：
div {
border: 5px solid green;
width: 100%;
height: 90px;
}
执行结果：
最小和最大尺寸
要设置元素的最小和最大高度或者宽度，可以使用以下属性：
-
min-width - 元素的最小宽度\ -
min-height- 元素的最小高度\ -
max-width- 元素的最大宽度\ -
max-height - 元素的最大高度\
在下面的例子中，我们将不同段落的最小高度和最大宽度设置为100px。
HTML代码：
<p class ="first">本段的<strong>最小高度</strong>设置为100px。</p>
<p class ="second">本段的<strong>最大宽度</strong>设置为100像素。</p>
CSS代码：
p.first {
border: 5px solid green;
min-height: 100px;
}
p.second {
border: 5px solid green;
max-width: 100px;
}
执行结果：
