css:网页中的盒子模型

网页中的盒子模型：元素、高度、宽度、内边距(padding)、外边距(margin)、边框(border)

重点掌握盒子的计算

宽度属性
百分值是对父标签的进行对比
宽度：width：长度值/百分比/auto
最大宽度：max-width：长度值/百分比/auto
最小宽度：min-width：长度值/百分比/auto

高度属性设置同宽度属性设置

哪些元素可以设置高和宽的属性
1.块级元素
2.替换元素：浏览器根据其标签的元素与属性来判断显示的具体内容，如、、

边框属性

border-width:取值为10px等
border-color：边框的颜色
border-style：边框的样式

边框样式的值值主要有

none 无边框，默认值
hidden 隐藏边框
dotted 点状边框，在大多浏览器中显示为实线
dashed 定义虚线，大多显示为实线
solid 定义实线
double 定义双线
~~~
边框有四边，top、bottom、left、right

/*在实际的设置过程中*/
.one{border:10px red solid;}
.two{
	border-top:
	border-bottom:
	border-left:
	border-right:
}

padding：内边距；填充，分为上下左右

/*顺时针*/
.one{padding:上 右 下左；}

margin：外边距；和padding一样分上右下左，margin浏览器有其默认的值16px，故在编辑时先清除默认的样式

最主要的区别在于，margin值为auto，实现水平方向居中显示，由浏览器计算外边距，在实际的应用中对于需要居中显示的用的比较多

盒子模型的计算