html盒模型之入门篇

html盒模型之入门篇

了解盒模型

首先我们先要了解什么是盒子，就是能装下别的东西的盒子。而在我们网页中盒模型就是把HTML页面中的元素看作一个能装内容的矩形的容器。而这个矩形的容器都是由内容、内边距（padding）、边框（border）和外边距（margin）组成。入下图的盒模型简图。

如上图，看过上图我们是能够更加直观的了解到盒模型的组成部分了。

疑问

看到这里我想有人会说盒子的宽（width）和高（height）是什么了？

有人会像上面一样回答。但这不是非常完美的答案。我为什么会这样说请看下图


看上面的这个盒子，width：500px；height：200px; 但是在网页中真是显示的宽高是602*302。这位是因为还要加上padding、和border的值。所以盒子宽高和盒子在页面中的显示宽高是不一样的。上面的那个等式因该加上一句“盒子在页面中显示打大小“。

盒子的属性

盒子的作用是用来放内容的。而我们都是有审美感的，所以为了让盒子在页面中更好的布局，和自由的控制盒子在页面中的样式。我们可以通过一下的属性进行单一属性设置。

外边距（margin）：	内边距（padding）	边框（border）
margin-top 顶部外边距	padding-top 顶部内边距	border-top 上边框
margin-bottom 底部外边距	padding-bottom 底部内边距	border-bottom 底边框
margin-left 左部外边距	padding-left 左部内边距	border-left：左边框
margin-right 右部外边距	padding-right 右部内边距	border-right 右边框

上面的代码和网页界面显示告诉我们：
margin是相邻div（盒子）之间的间距，影响的是同级元素之间的位置间距关系；
padding是盒子内边框（border）到盒子内容的间距，需要注意的是在使用padding的过程中会将盒子模型“撑大“，撑大的方向需要我们将宽或高减去撑大的数值。如下图

边框属性

边框以下属性：边框样式（border-style）、边框颜色（border-color）、边框宽的（border-width）和其他属性如圆角边框。
盒子边框：border:border-width(边框款的）border-style(边框样式）border-color(边框颜色);
边框宽度（border-width）、边框颜色（border-color）这两个属性是根据实际情况来确定属性值的，他们两和我下面要讲的边框样式有相同之处。

边框样式（border-style）
 solid：边框为单实线
 dashed：边框为虚线
 dotted：边框为点线
 double：边框为双实线


当border-style的属性值为不同个数是，
border-style：上边 右边 下边 左边；
border-style：上边 左右两边 下边；
border-style：上下两边 左右两边；
border-style：四条边；