CSS基础复习笔记3---盒子模型

1.盒子模型

（1）（最大/小）宽度：（max/min-）width:长度/百分比/auto

（2）（最大/小）高度：（max/min-）height:长度/百分比/auto

注意：max-height/width和min-height/width有兼容性问题，IE浏览器不支持

问：哪些HTML元素可以设置高和宽属性？

答：块级元素（<p>、<div>、<h1>、<ul>等）和替换元素（<img>、<input>、<textarea>等）

（3）边框属性

边框宽度：border(-left/right/top/bottom)-width:thin/medium/thick/长度值

边框颜色：border(-left/right/top/bottom)-color:red/..

边框样式：border(-left/right/top/bottom)-style:none/solid(实线)/double(双线)/dotted(点状边框)/dashed(虚线)

也可一起简写为：border(-left/right/top/bottom):[宽度]/[样式]/[颜色]

（4）内边距属性

上：padding-top:长度值/百分比

右：padding-right:长度值/百分比

下：padding-bottom:长度值/百分比

左：padding-left:长度值/百分比

注意：长度值不能为负值

也可以一起缩写为一下四种情况：

 

padding:值1;                          //4个方向都为值1
padding:值1 值2;                   //上下=值1 ,左右=值2
padding:值1 值2 值3;            //上=1,左右=值2,下=值3
padding:值1 值2 值3 值4;     //上=1,右=值2 ,下=值3,左=值4

（5）外边距属性

上：margin-top:长度值/百分比/auto

右：margin-right:长度值/百分比/auto

下：margin-bottom:长度值/百分比/auto

左：margin-left:长度值/百分比/auto

注意：长度值可以为负值；设置为auto时可以实现水平方向居中显示效果，此时是由浏览器计算外边距；

垂直方向两个相邻元素都设置外边距时，外边距会发生合并，合并后外边距高度=两个合并外边距的高度中最大值

也可以一起缩写，类似与padding的写法

（6）总结

 

盒子在页面中所占的宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
盒子在页面中所占的高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

2.拓展

IE盒子模型

备注：如果没有Doctype文档类型声明，各浏览器按照自己的方式解析，IE浏览器用IE盒子模型，火狐用标准盒子模型。

如果有Doctype文档类型声明，按照标准盒子模型来解析。

3.其他

display:inline（元素将显示为内联元素，前后没有换行符）/block（元素将显示为块级元素，元素前后会有换行符）/none

备注：

（1）相应内联元素及使用display : inline设置成内联元素的元素

      width和height属性无效。

      水平方向margin-eft/margin-right/padding-left/padding-right有效

      垂直方向margin-top/margin-bottom/padding-top/padding-bottom无效

（2）块级元素及使用display : block设置成块级元素的

      元素width/height/margin/padding属性都生效