**一．元素尺寸** 设置一个元素的尺寸大小。 |**属性** |**值**|**说明**|**CSS 版本**| | --- | --- | --- | --- | | width | auto、长度值或百分比 | 设置元素的宽度 | 1 | | height | auto、长度值或百分比 | 设置元素的高度 | 1 | | min-width | auto、长度值或百分比 | 设置元素最小宽度 | 2 | | min-height | auto、长度值或百分比 | 设置元素最小高度 | 2 | | max-width | auto、长度值或百分比 | 设置元素最大宽度 | 2 | | max-height | auto、长度值或百分比 | 设置元素最大高度 | 2 | >[danger]《css权威指南指出》height width百分数是相对于包含块『父block级别的』的 ，如果没有显示声明包含块的width和height，当前子类的百分数高度会重置为auto (**牢记：就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效**。） 所有html，body，div都要设置height为100%。**虽然html默认的width和height一样，但是由于body设置的是100%，如果没有显式设置html，body还是相当于没设置。** height:100%和height:auto的区别 ~~~css height:100%;overflow:hidden; ，在有些浏览器出现莫名的奇妙的问题，但换成height:auto就好了 height:auto，是指根据块内内容自动调节高度。 height:100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。 ~~~ html和body的关系： html具有默认的元素是overflow:auto,这将导致在需要的时候会出现滚动条 bdoy:具有的默认元素：position:static;这意味着它的定位子元素相对于元素的坐标系定位 几乎所有的浏览器，默认的偏移margin是在body元素上，而不是html的padding.（通过做实验确实如此）有些还是body的padding，**所有重置页边距用body{margin:0;padding:0}缺一不可**。 **二．元素内边距（填充）** CSS 盒模型中可以设置元素内部边缘填充空白的大小，我们成为内边距。样式表如下： |**属性**|**值**|**说明**|**CSS 版本**| | --- | --- | --- | --- | | padding-top | 长度值或百分比 | 设置顶部内边距 | 1 | | padding-bottom | 长度值或百分比 | 设置底部内边距 | 1 | | padding-left | 长度值或百分比 | 设置左边内边距 | 1 | | padding-right | 长度值或百分比 | 设置右边内边距 | 1 | | padding | 1 ~ 4 个长度值或百分比 | 简写属性 | 1 | **三．元素外边距** CSS 盒模型中可以设置元素外部边缘填充空白的大小，我们成为外边距。样式表如下： |**属性**|**值**|**说明**|**CSS 版本**| | --- | --- | --- | --- | | margin-top | 长度值或百分比 | 设置顶部内边距 | 1 | | margin-bottom | 长度值或百分比 | 设置底部内边距 | 1 | | margin-left | 长度值或百分比 | 设置左边内边距 | 1 | | margin-right | 长度值或百分比 | 设置右边内边距 | 1 | | margin | 1 ~ 4 长度值或百分比 | 简写属性 | 1 | >[danger]padding显示背景色，margin没有  margin和padding都是间隔 如果加入了内边距 padding 和边框 border 后，它的总长度会增加。那么如果这个元素用于非常精确的布局时，我们就需要进行计算增减。这其实是比较烦人的操作，尤其是动态设置页面布局的时候.属性 box-sizing可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题 | **属性** | **说明** | | --- | --- | | content-box | 默认值，border 和 padding 设置后用于元素的总长度。 | | border-box | border 和 padding 设置后不用于元素的总长度。 | box-sizing 是 CSS3 推出的，各个厂商在实现时设置了私有前缀。 | | Opera | Firefox | Chrome | Safari | IE | | --- | --- | --- | --- | --- | --- | | 支持需带前缀 | 无 | 2 ~ 28 | 4 ~ 9 | 3.1 ~ 5 | 8.0+ | | 支持不带前缀 | 10.1+ | 29+ | 10+ | 6+ | 9.0+ | //完整形式 ~~~ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; ~~~ **用Margin还是用Padding** 何时应当使用margin： 1、需要在border外侧添加空白时。 2、空白处不需要背景（色）时。 3、上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。 何时应当时用padding： 1、需要在border内测添加空白时。 2、空白处需要背景（色）时。 3、上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。 个人认为：**margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。**