4.9.1 盒子模型和内联模型

HTML元素分为盒子元素和内联元素。从外观来看，盒子元素就是那些默认占满一行的元素，例如div，而内联元素一般都用在文本，默认是不会换行的，例如span、a
<div>
    默认占满一行
</div>
<span>可以和别的元素同一行</span>
<a href="#">链接也是内联元素</a>
盒子元素除了自动换行外，还有什么特点呢，如下图：


这张图展示了盒子元素
1.最里面黄色是元素的高度和宽度，width是宽度，height是高度
2.绿色部分是填充：padding
3.黑色是边框：border
4.最外面的蓝色是间距：margin
内联元素（如a、span）设置这些样式，有些是无效的。

常用的盒子元素：div、p、h1到h6
常见的内联元素：span、a、li
所有元素都可以改变为盒子元素或者内联元素，display就是专门用来改变元素的：
display:block    变为盒子元素
display:inline    变为内联元素
display:inline-block  内联盒子元素，可以设置盒子元素的属性，同时不会独占一行。
display:none 元素不显示

下面的例子是把一个span变成一个盒子元素：
<span style="width:200px;background:orange">我是内联元素，宽度200没有生效</span>
<span style="width:200px;background:red">我是别的内联元素</span>
<span style="display:block;width:200px;background:orange">我是内联元素,现在变成了盒子元素，宽度200生效不能与别的元素同一行</span>
<span style="width:200px;background:red">我是别的元素</span>

高度height和宽度width
盒子可以设置高度和宽度，也可以只设置其中一个：
<div style="width:200px;height:200px;background:#FFF">
    长和宽都是200像素
</div>
<div style="width:200px;background:orange">
    只设置宽度200像素
</div>
如果内容超过设定的高度和宽度，内容就会溢出去：
<div style="width:200px;height:50px;background:orange">
    只设置宽度100像素，高度50像素,如果内容放不下，那就溢出了
</div>