CSS盒模型

一、简介

• 一个盒子包括：外边距margin，内边距padding，边框border，内容content。
• 盒子模型分为IE盒模型和标准W3C盒模型：W3C盒子的content=height*width，而IE盒子的content还要算上padding和border。
• 写html的时候最好加上doctype声明，令浏览器统一使用标准盒模型。

box-model.jpg

二、内容

设置盒模型

box-sizing: content-box | border-box | inherit;

• 默认值为content-box，即采用W3C盒模型；此时元素实际占据的空间为：

  高 = margin*2 + padding*2 + border*2 + height;
  宽 = margin*2 + padding*2 + border*2 + width;
  

• IE6-的默认值为border-box，即采用IE盒模型；此时元素实际占据的空间：

  高 = margin-top + margin-bottom + height;
  宽 = margin-left + margin-right + width;
  

• IE7-不支持；常用于自适应或响应式布局。

宽度

width: <len-%> | auto | inherit;
/* <len-%> = <length> | <%> */

• 默认值为auto：块级元素默认为父元素的宽度，inline元素默认为内容的宽度且不可设置。
• 非定位元素的<%>值以父元素为参照。
• 另有max-width和min-width属性，可设置最大宽度和最小宽度。

高度

height: <len-%> | auto | inherit;
/* <len-%> = <length> | <%> */

• 默认值为auto：默认为内容的高度；inline不可设置。
• 非定位元素的<%>值以父元素为参照。
• 另有max-height和min-height属性，可设置最大高度和最小高度。

三、边距

内边距/填充

padding: <len-%>{1,4} | auto | inherit;

• 默认值为0；auto表示由浏览器自动计算。
• 按照顺时针方向（上→右→下→左）设置，省略其中一边会自动应用对边的属性值：

  padding: <all-sides>; /* <上下左右> */
  padding: <top&bottom> <left&right>; /* <上下> <左右> */
  padding: <top> <left&right> <bottom>; /* <上> <左右> <下> */
  padding: <top> <right> <bottom> <left>; /* <上> <右> <下> <左> */
  

• 可以拆开写：

  padding-top: <len-%>{1,4} | auto | inherit;    /* 上填充 */
  padding-right: <len-%>{1,4} | auto | inherit;  /* 右填充 */
  padding-bottom: <len-%>{1,4} | auto | inherit; /* 下填充 */
  padding-left: <len-%>{1,4} | auto | inherit;   /* 左填充 */
  

• inline元素padding-top和padding-bottom设置无效，但会撑大盒子。

外边距/间距

margin: <len-%>{1,4} | auto | inherit;

• 属性值和拆解参考padding。
• 块级元素水平居中：margin:0 auto。
• 垂直margin合并（仅限普通文档流中的块级元素）：
  • 当两个垂直margin相遇时，它们会合并成一个。
  • 相邻兄弟元素：上元素的margin-bottom会与下元素的margin-top合并。
  • 父子元素：父元素没有border、padding和内容时，其margin-top会与第一个子元素的margin-top合并，其margin-bottom会与最后一个子元素的margin-bottom合并。
  • 空元素：元素没有border、padding和内容时，自身的margin-top和margin-bottom会合并。
  • 合并后的margin值：若元素的margin值皆为正数或皆为负数，则取其中较大者；若一个为负数另一个为正数，则取最大正margin值和最小负margin值的和。
  • 不合并的情况：根元素，或者元素设置了float属性、clear属性、position:absolute、display:inline-block或overflow值不是visible。

四、边框

边框宽度

border-width: [ <length> | thin | medium | thick ]{1,4} | inherit;

• 默认值为medium；常用<length>表示。
• 可拆解为上右下左四边：

  border-top-width: <length> | thin | medium | thick | inherit;
  border-right-width: <length> | thin | medium | thick | inherit;
  border-bottom-width: <length> | thin | medium | thick | inherit;
  border-left-width: <length> | thin | medium | thick | inherit;
  

边框风格

border-style: [ none | hidden | solid | dashed | dotted | ... ]{1,4} | inherit;

• none和hidden的区别：都表示无边框，前者会将border-width的值重置为0，后者在表中仅用于解决边框冲突。
• 拆解参考border-width。

边框颜色

border-color: [ <color> | transparent ]{1,4} ] | inherit;

• 默认为字体颜色。
• transparent表示边框为透明，但不表示无边框。
• 拆解参考border-width。

圆角

border-radius: <x>{1,4} [/ <y>{1,4}]?;

• <x>表示水平圆角半径，<y>表示垂直圆角半径，值为<len-%>；默认为0。
• 按照顺时针方向（左上→右上→右下→左下）设置，省略其中一角会自动应用对角的属性值。
• 拆解：

  border-top-left-radius: <x> [/ <y>]?; /* <左上角> */
  border-top-right-radius: <x> [/ <y>]?; /* <右上角> */
  border-bottom-right-radius: <x> [/ <y>]?; /* <右下角> */
  border-bottom-left-radius: <x> [/ <y>]?; /* <左下角> */
  

• 元素显示为正圆：令元素的width==height，设置border-radius:50% 50%。
• CSS3属性，IE8-不支持。

属性简写

border: [ <border-width> || <border-style> || <border-color> ] | inherit;

• 拆解参考padding。
• border:none和border:0的区别：
  • border:0相当于border-width:0，虽然看不见，但浏览器既然对边框做了渲染；
  • border:none对IE7-的input和button元素无效，可以添加背景色来兼容；
  • 推荐使用border:0，性能上的损耗可以通过页面优化来解决。

五、其他

轮廓/外框线

• 轮廓宽度outline-width、轮廓风格outline-style以及简写属性outline的属性值和拆解，请参考边框。
• 轮廓颜色outline-color: <color> | invert | inderit;，默认值为invert。
• 轮廓描绘在边框外围，不占据空间，会盖住隔壁元素。

盒子内容溢出

overflow: visible | hidden | scroll | auto;

• 默认值为visible。
• scroll和auto的区别：scroll始终显示滚动条，auto只在溢出的时候显示滚动条。
• 可拆解为overflow-x和overflow-y，分别处理水平方向的溢出和垂直方向的溢出。

阴影

box-shadow: none | <shadow>#;
/* <shadow> = inset? && [ <h> <v> <blur>? <size>? ] && <color>? */

• 默认值为none。
• <shadow>要设置水平偏移<h>和垂直偏移<v>，默认为outset和文本颜色。
• CSS3属性，IE8-不支持。

盒子兼容性查询：caniuse