盒模型（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>

163436982.png

span默认为inline模型，因此设置高度、宽度对它是不起作用的！

当然了，CSS为display属性提供了block、inline两个属性值，用于改变HTML组件默认的盒模型。因此在<style>元素中添加如下代码：

/* 将div元素改为inline盒模型 */
    body>div{
        display: inline;
    }
    /* 将span元素改为block盒模型 */
    body>span{
        display: block;
    }

163720780.png

   CSS还提供了一种综合inline模型和block模型的综合体模型——inline-block盒模型，通过为display属性设置inline-block即可实现这种盒模型，inline-block盒模型的元素既不会占据一行，同时也支持通过width、height指定宽度及高度。通过使用inline-block盒模型可以非常方便地实现多个div元素的并列显示。

注意：在默认情况下，多个inline-block盒模型的组件将会采用底端对齐的方式，也就是它们的底部将会位于同一条水平线上。当然如果想要底端对齐的效果，可以通过增加vertical-align:top。