盒子模型的概念
盒子模型用来"放"网页中的各种元素
网页设计中内容，如文字、图片等元素，都可是盒子(div嵌套)
[图形]
宽度属性
宽度
width:长度值|百分比|auto
最大高度
max-width:长度值|百分比|auto
最小高度
min-width:长度值|百分比|auto
高度属性
高度
width:长度值|百分比|auto
最大高度
max-height:长度值|百分比|auto
最小高度
min-height:长度值|百分比|auto
哪些HTML元素可设置宽和高属性
块级元素
<p>、<div>、<h1>～<h6>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>等
替换元素
<img>、<input>、<textarea>等
html标签分类
块级标签：占据一行，换行。
<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>～<h6>、<form>、<hr>......
行内标签：在一行，不换行。
非替换元素：<b>、<em>、<a>、<span>.....
替换元素：<img>、<input>、<textarea>.....
盒子模型
边框属性
边框宽度(border-width)
边框颜色(border-color)
边框样式(border-style)
4个方向来表示（上、下、左、右）
设置元素边框宽度
border-width:thin|medium|thick|长度值
设置元素边框颜色
border-color:颜色|transparent
设置元素边框样式
border-style:值|none|hidden
值 属性
none 定义无边框，默认值
hidden 与"none"相同，除非在表格元素中解决边框冲突时
dotted 定义点状边框，在大多数浏览器中呈现为实线
dashed 定义虚线，在大多数浏览器中呈现为实线
solid 定义实线
double 定义虚线
groove 定义3D凹槽边框
ridge 定义3D龚状边框
inset 定义3D inset 边框
outset 定义3D outset 边框
inherit 规定应该从父元素继承边框样式
不同方向表示:
border-[left|right|top|bottom]-width
border-[left|right|top|bottom]-color
border-[left|right|top|bottom]-style
边框缩写:
border:[宽度]|[样式]|[颜色]
不同方向:
border-top:[宽度]|[样式]|[颜色]
border-right:[宽度]|[样式]|[颜色]
border-left:[宽度]|[样式]|[颜色]
border-bottom:[宽度]|[样式]|[颜色]
内边距属性
设置元素的内容与边框之间的距离(内边距或填充)，分4个方向(上、右、下、左)
padding:值1; //4个方向都为值1
padding:值1 值2; //上下=值1，左右=值2
padding:值1 值2 值3; //上=值1，左右=值2，下=值3
padding:值1 值2 值3 值4; //上=值1，右=值2，下=值3，左=值4
外边距属性
设置元素与元素之间的距离(外边距)，4个方向(上、右、下、左)
- margin-top:长度值|百分比|auto
- margin-right:长度值|百分比|auto
- margin-bottom:长度值|百分比|auto
- margin-left:长度值|百分比|auto
外边距缩写
设置元素与元素之间的距离(外边距)，4个方向(上，右，下，左)
margin:值1; //4个方向的值都为1
margin:值1 值2; //上下=值1，左右=值2
margin:值1 值2 值3; //上=值1，左右=值2,下=值3
margin:值1 值2 值3 值4; //上=值1，右=值2，下=值3，左=值4
默认情况下，相应HTML块级元素存在外边距
body、h1～h6、p......
声明margin属性，覆盖默认样式
body,h1,h2,h3,h4,h5,h6,p{margin:0;}
margin值为auto,实现水平方向居中显示效果
由浏览器计算外边距
垂直方向，两个相邻元素都设置外边距，外边距会发生合并
合并后外边距高度=两个发生合并外边距的高度中最大值
盒子模型计算
在css中，width和height指的是内容区域的宽度和高度
增加内边距、边框和外边距不会影响内容区域的尺寸
但会增加元素框的总尺寸
盒子在页面中所占的宽度
是由左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
盒子在页面中所占的高度
是由上边距+上边框+上填充+内容高度+下填充+下边框+下边距
display属性
inline 元素将显示为内联元素，元素前后没有换行符
block 元素将显示为块级元素，元素前后有换行符
inline-block 行内块级元素，元素呈现为inline，具有block相应特性
none 此元素不会被显示
