CSS盒子模型

CSS盒子模型

盒子模型（或框模型），英文名叫做Box Model。盒子模型是由内容（element content）、内边距（padding）、边框（border） 和 外边距（margin）几个属性组合形成的。盒子模型中规定了元素框处理元素内容（element content）、内边距（padding）、边框（border）和 外边距（margin） 的方式。在我们编写的网页中，每个元素都有自己的盒子模型，所有说在Web世界里，在我们编写网页布局时，盒子模型都一直存在于我们身边。

 

 

每个盒子都有：边界、边框、填充、内容四个属性；

每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

Content（内容）

内容（CONTENT）就是盒子里装的东西，也就是你所编写的页面内容；

Padding（内边距）

Padding（内边距）属性定义元素边框与元素内容之间的空间。

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与

其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

padding 简写属性在一个声明中设置所有内边距属性。设置所有当前或者指定元素内边距属性。该属性可以有1到4个值。

例如：

padding:1px四边统一内边距1个像素

padding:1px 2px；上下1个像素,左右2个像素内边距

padding:1px 2px 3px；上1个像素,左右2个像素,下3个像素内边距

padding:1px 2px 3px 4px；上1个像素,右2个像素,下3个像素,左4个像素内边距

         padding还可以单独设置一个方向的值：

         padding-top:10px；上内边距 10个像素

padding-right:20px；右内边距20个像素

padding-bottom:30px；下内边距30个像素

padding-left:40px；左内边距40个像素

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变

所有浏览器都支持padding属性。

Margin（外边距）

Margin是该元素与其相邻同级元素的外边距。

margin 简写属性在一个声明中设置所有当前或者指定元素外边距属性。该属性可以有 1 到 4 个值。跟padding一样，也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中，我们往往使用的是margin的这种高效简洁写法来编程。

例如：

margin:1px；四边统一外边距1个像素 。

margin:1px 2px；上下1个像素,左右2个像素外边距 。

margin:1px 2px 3px；上1个像素,左右2个像素,下3个像素外边距 。

margin:1px 2px 3px 4px；上1个像素,右2个像素,下3个像素,左4个像素外边距。

margin -top:10px；上外边距 10个像素。

margin -right:20px；右外边距20个像素。

margin -bottom:30px；下外边距30个像素。

margin -left:40px；左外边距40个像素。

还可以用margin将内容钙元素在其父元素内居中。

例如：

Margin：10px auto上下外边距为10个像素，左右居中；

所有浏览器都支持margin属性。

Margin和Padding的区别

很多人都容易把margin和padding弄混淆，其实并不是那么难以区分。Margin是模块与模块之间的间距（空隙），而padding是边框（border）和内容（content）之间的间距（空隙）。

Border（边框）

边框(border)就是盒子本身了；至于边界(margin)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（div嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

border自身还包含了很多属性：颜色（border-color）宽度（border-width）风格样式（border-style）；

例如：

border-color:red;边框颜色设置为红色。

border-width:10px;边框宽度设置为10个像素。

边框的样式有很多种（点状、实线、虚线、双线）可以同时设置4条边框，也可以设置1条边框。

例如：

border-style：dotted  ；四条边框都为点状。

border-style：dotted solid ；上下两条边框为点状，左右两条边框为实线。

border-style：dotted solid double ；上边框为点状，左右边框为实线，下边框为双线。

border-style：dotted solid double dashed；上边框为点状，右边框为实线，下边框为双线，左边框为虚线。

除此之为，还可以同时设置边框宽度、边框样式风格和边框颜色。

例如：

border：1px solid red； 将四条边框的宽度设置为1个像素，样式为实线，边框颜色为红色。

border跟margin和padding一样，也有简洁写法。我们同样可以使用border属性来设置四个方向的边框。在实际编程中，我们往往使用的是border的这种高效简洁写法来编程。

例如：

border:1px；四边统一边框宽度1个像素 。

border:1px 2px；上下边框1个像素,左右边框2个像素宽度 。

border:1px 2px 3px；上边框1个像素,左右边框2个像素,下3个像素宽度。

border:1px 2px 3px 4px；上边框1个像素,右边框2个像素,下边框3个像素,左边框4个像素外边距宽度。

border-top:10px dotted red；上外边框为10宽度个像素，边框形状为点状，边框颜色为红色。

border-right:20px solid blue；右外边框为20宽度个像素，边框形状为实线，边框颜色为蓝色。

border-bottom:30px double yellow；下外边框宽度为30个像素，边框形状为双线，边框颜色为黄色。

border-left:40px dashed green；左外边框宽度为40个像素，边框形状为虚线，边框颜色为绿色。

盒子模型虽然是很简单的基础知识，但是也很重要的，就像盖房子一样，地基打扎实了，才能建更高的房子，盒子模型学的很扎实，才能写出更好，更酷炫的页面。