盒模型(box model)与display属性
HTML组件中呈现一片空白区域的组件都可当成盒模型(box model),比如div元素,span、section等元素。CSS用display来控制盒模型的外观。
盒模型有两种:
Block模型:这盒模型的组件默认占据一行,允许通过CSS设置宽度、高度。列如<div>、<p>元素。
Inline模型:这种模型的组件不会占据一行(默认允许在一行放置多个组件),即使通过CSS设置宽度、高度也不会起作用。如span、a元素。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 基础盒模型 </title> <style type="text/css"> div,span{ width: 300px; height: 40px; border: 1px solid black; } </style> </head> <body> <div>div元素1</div> <div>div元素2</div> <span>span元素1</span> <span>span元素2</span> </body> </html>
span默认为inline模型,因此设置高度、宽度对它是不起作用的!
当然了,CSS为display属性提供了block、inline两个属性值,用于改变HTML组件默认的盒模型。因此在<style>元素中添加如下代码:
/* 将div元素改为inline盒模型 */ body>div{ display: inline; } /* 将span元素改为block盒模型 */ body>span{ display: block; }
CSS还提供了一种综合inline模型和block模型的综合体模型——inline-block盒模型,通过为display属性设置inline-block即可实现这种盒模型,inline-block盒模型的元素既不会占据一行,同时也支持通过width、height指定宽度及高度。通过使用inline-block盒模型可以非常方便地实现多个div元素的并列显示。
注意:在默认情况下,多个inline-block盒模型的组件将会采用底端对齐的方式,也就是它们的底部将会位于同一条水平线上。当然如果想要底端对齐的效果,可以通过增加vertical-align:top。