CSS盒子模型概述 盒子模型的计算规则 盒子的宽度和高度设置
在设计网页时，能否控制好各个模块在网页中位置十分关键！盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好的空值网页中各个元素所呈现的效果。
CSS盒模型概述
所谓的盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。它定义了页面元素如何显示，以及相邻元素之间如何相互影响。在页面中，每个元素都是以矩形空间存在的，这个矩形空间区域（content）、内边距（padding）、边框区域（border）和边界区域（margin外边距）。
- 盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）
元素和对象都是由内容（content）、内边距（padding）、边框（border）、外边距（margin）等基本结构组成，并呈现出矩形的盒子效果。在浏览器看来，网页就是由多个盒子嵌套的结果。
外边距（margin）是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。
并不是每个元素都要求定义内边距、边框、外边距、宽和高<div>标记
<div>标记是一个块容器标记。可以将网页分割为独立的部分，以实现网页的规划和布局。<div>标记相当于一个盒子，可以设置内外边距、宽和高。大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多次<div>。可以替代大多数的块级文本标记。
<style type="text/css">
.one{
width: 400px; /*设置宽度*/
height: 40px; /*设置高度*/
line-height: 30px; /*设置行高*/
background: #FFC; /*设置背景颜色*/
font-size: 18px; /*设置字体大小*/
font-weight: bold; /*字体加粗*/
text-align: center; /*设置文本水平居中对齐*/
}
.two{
width: 400px; /*设置宽度*/
height: 40px; /*设置高度*/
background: #0F0; /*设置背景颜色*/
font-size: 28px; /*设置字体大小*/
text-indent: 2em; /*设置首行文本缩进*/
}
</style>
<div class="one">
用<a href="https://www.mubanjun.cn/tag/div%e6%a0%87%e8%ae%b0" title="更多关于 div标记 的文章" target="_blank">div标记</a>设置的标签文本
</div>
<div class="two">
<p>div标记中嵌套p标签的文本</p>
</div><div>标记最大的意义在于和浮动属性float配合实现网页的布局。盒子的宽和高
网页是有多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值和相对于父元素的百分比，在实际工作中最常用的是像素值（px）。
<style type="text/css">
.three{
width: 400px; /*设置宽度*/
height: 40px; /*设置高度*/
line-height: 30px; /*设置行高*/
background: #FFC; /*设置背景颜色*/
border: 8px solid #00f; /*设置段落的边框*/
text-indent: 2em; /*设置文本的首行缩进*/
}
</style>
<p class="three">盒子模型的宽度和高度</p>CSS规范中，元素的width和height属性仅指块级元素内容的宽度和高度，其周围的内边距、边框和外边距是另外计算的。大多数浏览器都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度，计算原则是：
- 盒子的总宽度=width+左右内边距之和+左右框宽度之和+左右外边距之和
- 盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和
宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img>标记和<input>标记除外）
