CSS基础：block、inline和inline-block

css的display属性是前端开发中非常常用的属性。本文简单介绍一下比较常用的属性值，即block、inline和inline-block。HTML组件中呈现空白区域的组件可以作为盒模型，CSS提供了display属性来控制盒模型的外观。1.块型（block）这种盒模型的组件默认占一行，允许通过CSS设置宽高。例如：,,,to

,等显示:block块元素会占一行，多个块元素各占一行。默认情况下，块元素的宽度会自动填充其父元素的宽度。块元素可以设置宽度和高度属性。块级元素及时设置了宽度，仍然占据一行。块元素可以设置边距和填充属性。2.内联类型（inline）这种盒模型的组件不会占一行，不能调整宽高。例如：,,,,,,<文本区域../>,,。CSS为display属性提供了block和inline两个属性值，可以改变HTML组件默认的盒子模型。display:inline行内元素不会占一行，多个相邻的行内元素会排在同一行，直到排不下一行，才会换行，其宽度会随着元素的内容而变化。内联元素的宽度和高度是无效的。内联元素的margin和padding属性，padding-left、padding-right、margin-left、margin-right在水平方向上都会产生margin效果，但是padding-top、padding-bottom、margin-top和padding-bottom在垂直方向上margin-bottom不产生边距效果。3.inline-blocktypeCSS也提供了inline-blockboxmodel，它是inlinemodel和blockmodel的结合：inline-blockboxmodel的元素不占一行，也支持width和height指定指定的带宽和高度。并允许其他内容出现在其左右两侧。display:inline-block简单来说就是将对象呈现为内联对象，但是对象的内容呈现为块对象。后续的内联元素会排在同一行。例如，可以赋予一个链接（元素）inline-block属性，使其既具有块的宽高特性又具有内联兼容性。在许多应用程序中，我们必须并排显示一些块元素。一般我们会想到浮动，但是当块元素浮动并设置margin时，在IE下会出现双重bug，所以很多时候我们不得不将这个块元素包裹在一个内联元素中，然后给这个内联元素浮动和margin。通过设置:display:inline-block，对象被渲染为内联对象，但对象的内容被渲染为块对象。内联对象的旁边将在同一行上呈现，允许有空格。说明：块元素可以包含块元素和行内元素，但行内元素只能包含行内元素。需要注意的是，这是一个笼统的说法，每个具体元素可以包含的元素也是具体的，所以这个规则不适用于个别元素。例如，p元素只能包含行内元素，不能包含块元素。一般来说，一个元素的布局层级可以通过display:inline和display:block的设置来改变。兼容性问题：IE6、IE7不支持inline-block，所以在IE中对inline元素使用display：inline-block理论上IE不识别，但在IE下会触发layout，让inline元素有display:的表示内联块属性。IE6、IE7兼容的解决方法：先设置inline-block触发块元素，具有布局的特点，然后设置display:inline，使块元素显示为行内元素。这时候layout的特性不会消失。直接设置display:inline，使用zoom:1触发布局。兼容所有浏览器的方法是：.selector{display:inline-block;*显示：inine；*缩放：1；}本文只列举了display的三个常用属性。有：inline-table、与table相关的boxmodel、list-item、run-in等。