5.css-盒子模型

1.内边距padding

注意1：给一个标签加上内边距，该标签的宽度和高度会发生变化。

注意2：给一个标签加上内边距和背景颜色，该标签的内边距也会被填充颜色。

2.外边距margin

注意1：给一个标签加上外边距和背景颜色，该标签的外边框不会被填充颜色

注意2：给两个左右相邻的标签设置左右外边距，左右外边距会叠加；给两个上下相邻的标签设置上下外边距，上下外边距不会叠加，会合并，谁大听谁的。

3.盒子

html的所有标签都是盒子，只要设置了其显示模式为inlineblock或block，就都可以为其设置宽高、内边距、边框、外边距。其中需要注意的是所谓的宽高==所放内容。这个盒子和我们现实生活中的盒子一样，比如说手机盒，所以所谓的css盒子模型，只不过是一个形象的比喻而已。

盒子模型分为W3C盒子模型（标准盒模型）和IE盒子模型（怪异盒模型），标准盒模型中设置的宽高为盒子content的宽高（即box-sizing:content-box），而怪异盒模型中设置的宽高为盒子的content+padding+border值(即box-sizing:border-box)。换句话说就是标准的盒子宽高等于设置的宽高+padding+border+margin；怪异的盒子跨高等于设置的宽高+margin。

4.宽度和高度

所谓的宽度和高度，主要分为以下三种：

1.内容的宽度和高度：内容的宽度和高度就是标签通过css的width和height设置的宽度和高度

2.元素的宽度和高度：元素的宽度和高度是指内容+内边距+边框

3.元素所占空间的宽度和高度：元素所占空间的宽度和高度是指内容+内边距+边框+外边距

注意：增加了padding值后，元素的宽高也会增加，要想使元素的宽高不变，需要改变内容的宽高。border同样如此。

5.盒子box-sizing属性

在开发中，经常会遇见这样的问题：布局好的页面，对某个标签加上padding值或者border值，布局可能会混乱。其根本原因是元素的宽度和高度发生了变化。

CSS3引出了box-sizing:content-box/border-box属性，若该属性取值为content-box时，即默认值，元素宽高=内容+边框+内边距；若该属性取值为border-box时，元素的宽高==width，即在css中写的width，这个时候再加padding和border，内容的宽高会减小。

练习：写两个嵌套div，实现子div在父div里居中。方法有二，一设置父div的padding，二设置子div的margin，但需要注意的是在设置子div的margin-top时，并不会达到想要的效果，父div也会被顶下来，想要避免这种情况需要给父div设置一个border。那么在开发中就要注意了，在遇见父子关系的时候，用padding，在遇见兄弟关系的时候，用margin。

技巧：在父子关系的盒子中，我们可以使用margin:0 auto;来让里面的盒子在外面的盒子内水平居中，但注意了，这个只能控制水平方向，不能控制垂直方向，想要垂直方向居中，只能通过像素。

6.盒子居中和内容居中，margin:0,auto;和text-align:center;的区别

text-align:center是让盒子里面的文字和图片居中，注意，只要文字和图片，其他盒子比如div就不行。而margin:0 auto;是让盒子本身去居中

7.清空默认边距

浏览器会默认给一些标签一些边距，为了开发者能够更好地管理自己的网页，需要把系统默认的边距给清空。而                          *{margin:0;padding:0;}是最简单粗暴的方法，但企业中并不用这种方法，因为*是通配符，它会遍历html中所有的标签，而有的标签系统是没有给他默认边距的，故影响了效率，而一般会使用别人写好的代码只需复制到自己的html中即可。

8.行高

行高即lineheight，文字在行高中默认是垂直居中的，那么要使盒子里文字垂直居中，就可以通过调文字的lineheight和盒子的height一样高就行了，注意：若有多行文字，并且让多行文字在盒子中垂直居中，那么此方法是行不通的，必须通过设置盒子的padding来实现。

在企业开发中，如果一个盒子存储的是文字，那么我们一般会以盒子的左内边距为基准，不会以盒子右内边距为准，因为盒子右内边距有误差，误差从何而来？因为右边如果放不下一个文字，那么文字就会换行显示，那么文字和内边距就有了误差显示。顶部内边距的距离并不是盒子边框到文字顶部的距离，而是盒子边框到行高顶部的距离。