一、display属性值总结。
1、display：block
block元素会独占一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
<dl><dt><dd><blockquote><p><div><ul><li><ol><h1><section><header><footer><aside> <address><pre>(pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格 和换行符)<form><fieldset><legend>(fieldset 元素可将表单内的相关元素分组,legend 元素为 fieldset 元素定义标题。)<option>
2、display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，其宽度随元素的内容而变 化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin- right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不 会产生边距效果。
<time><span><a><em><b>(粗体bold)<quote><strong><q>(短引用)<code>(表示源码)
3、display:inline-block
inline-block元素不会独占一行，可以设置width、height、margin、padding属性。
既具有block的 宽度高度特性又具有inline的同行特性。
<input>(大多数浏览器可以设置input元素的宽高)<select><textarea><img><object>(向 HTML 代 码添加一个对象)
4、display:table、table-row、table-cell。
在浏览器中，可以看到<table><tr><td>元素的display值分别是table、table-row、table-cell
<table>元素
<tbody>元素
<td><th>元素
5、display:list-item
此元素会作为列表项（li）显示。
6、display:run-in
此元素会根据上下文作为块级元素或内联元素显示。
二、盒子模型
1、W3C标准盒子模型
W3C盒模型
标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
2、IE盒子模型
IE盒模型
ie 盒子模型的 content 部分包含了 border 和 padding。
注意区分元素宽高(元素内容宽高)、元素占据的大小和元素大小（元素实际大小）。
W3C标准盒模型下：
元素宽度是指width，高度指height。
占据的大小是需要计算的。占据的宽度即：margin-left+margin-right+padding-left+padding- right+border-left+border-right+width，占据的高度同理。
而实际大小指的是浏览器呈现时显示的宽度和高度。具体请看下图（Chrome中也有）。可以看 出实际的宽度为padding-left+padding-right+border-left+border-right+width。
Firefox下的盒子模型
IE盒模型：
元素内容宽度不是指width。width包括了内容宽度和padding、border。
占据的宽度，即margin-left+margin-right+width，占据的高度同理。
盒子的实际大小：就是width和height值。
现在IE浏览器也开始采用W3C标准盒模型了。如果在老的IE浏览器中，不加 doctype 声明，IE浏览器会采用 IE盒子模型去呈现盒子，而其他浏览器会采用W3C盒子模型呈现。如果加上了 doctype 声明，那么所有浏览器都会采用标准W3C 盒子模型呈现盒子，网页就能在各个浏览器中显示一致了。
所以在网页的顶部加上 doctype 声明，就是选择了W3C标准盒模型。
注意一下，设置border时如果只设置border的宽度，是无效的。应该加上border的样式和颜色，一定要有样式。只设置border的颜色和宽度是没用的，只设置border的样式和宽度就可以显示border。若只设置了样式，则显示border默认的宽度和默认的颜色（黑色）。即一定要设置border的样式。
3、CSS3 box-sizing属性
CSS3中的box-sizing属性可以改变盒模型在浏览器中呈现的大小。
属性值有content-box(default)、border-box、inherit（规定应从父元素继承 box-sizing 属性的值）。根据实践发现，并没有padding-box和margin-box。
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )。此属性表现为标准模式下的盒模型。
border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度（而是会改变内容content的宽度），即 ( Element width = width )。此属性表现为IE盒子模型。
content-box属性
W3C标准盒子模型
border-box属性
IE盒子模型
网友评论