盒子模型总结

什么是盒子模型？

       在我们的HTML中，所有的标签都是矩形的。围绕着整个矩形，我们可以使用一系列的属性来控制它的显示外观。也就是说，我们一张网页，就是一个一个盒子堆起来。 

盒子模型由六大属性构成，可通过下面这六大属性对盒子进行设置(单位;px)。

•  width 盒子内容宽度 
•  height 盒子内容高度
•  padding 盒子的内边距（补白），盒子内容与盒子边框之间的距离，上下左右都有
•  padding margin 盒子的外边距 盒子边框之外的距离，也分上右下左 
•  border 盒子的边框 盒子的边框也是有上边框，右边框，下边框，左边框 
•  background 盒子背景 背景默认情况下会填充内容和padding 

下面将详细的从外到内的介绍盒子模型的六大属性：

1.margan:盒子与盒子之间的距离

• 盒子与盒子之间的距离 分上margin-top，右margin-right，下margin-bottom，左margin-left四个方向的margin，依次按顺时针方向排列。margin的设置方式：
• margin设置一个值时，margin:10px；表示上、右、下、左四个方向的距离都是10px
• margin设置两个值时，margin:10px 20px；表示上、下两个方向的距离是10px，表示左、右两个方向的距离是20px
• margin设置三个值时，margin:10px 20px 30px；表示上距离是10px,左、右距离是20px,下距离是30px
• margin设置四个值时，margin:10px 20px 30px 40px,表示上、右、下、左四个方向的距离分别是10px、20px、30px、40px

margin的应用：

一、设置盒子模型水平居中{margin:50px auto}   版心最新版居中 网站顶部背景100%宽{margin-left:auto}；

对块级标签四个方向上都有效，对行级标签只有水平方向有效；

二、margin外边距分重叠性（前提条件：块级元素，垂直方向），重叠分为以下两种情况：

1、兄弟盒子之间的重叠：两个相邻盒子垂直排列，在设置margin时，上面盒子的下边距（margin-bottom）和下面盒子的上边距（margin-top）会发生重叠，这时候中间的margin大小是去大优先。

解决方法：1）把男的变成不男不女的（display:inline-block;）

                 2)  浮动（浮动的元素不会塌陷）

2、父子盒子之间的重叠（嵌套盒子），他们父元素的上边距（margin-top）和子元素的上边距（margin-top）会发生重叠。

解决方法：1）给父元素设置边框（border-top）,不想有边框线可以使用transparent把边框线便成透明；

                 2）给父元素设置padding-top 

                 3)  给男的变成不男不女的(给块级元素加上：display:inline-block;)

三、bargin可以设置成负值，作用：当没有给子元素设置宽度时，给子元素设置margin-right：-100px,子元素的宽度会增加100px;此时子元素的宽度是：width+margin-right=200px

2.border:设置盒子的边框

•  border:粗细 线型 颜色 border:1px solid red; 
•  border-top border-right border-bottom border-left
•  border-width border-style border-color
•  border-top-width xxx 
•  border在页面是占空间的 
•  border可以实现小三角

下三角的实现方法：{border:5px solid transparent;

                                border-top:5px solid black}

3.padding:盒子的内边距（补白）

•   内边距，补白 内容与border之间的距离 
•  有些标签有默认的padding *{padding:0;} 
•  padding的四个属性值的设置同margin
•  应用：调整内容与border之间的间隙 
•  padding在页面是占空间的

4.content:内容的宽度和高度 

•  width: 内容的宽度
•  height：内容的高度

• 男标签可以设置宽度和高度，女标签不能设置宽度和高度 
• 女标签它的宽度由内容决定，高度由font-size决定 
•  width和height可以设置百分比，是父元素的百分比
• 子元素没设置宽高时，子元素会占据父元素的100%空间

5.background:盒子背景

• background-color:背景颜色
•  background-image: 背景图片
•  默认水平和垂直方向都会平铺
•  如果空间不足，图片也会显示，只是显示不完整 
•  引入图片时，url后面的路径引号可加可不加 
•  背景图片默认会填充border,padding,content 
•  background-repeat: 
•  background-position: 
•  background-attactment:

对于盒子模型的注意点：

 1，对于女标签（行内）来说，width和height设置无效 

 2，width属性默认值为auto，块元素的贪婪性和行内元素的懒惰性

 3，对于行内元素而言，其宽度有内容本身决定，而其高度则有font-size决定

 4，有些标签有默认的padding值，如ul、ol等。用*{padding:0}来去除默认值