CSS盒子模型

CSS盒子模型是在网页设计中经常用到的CSS技术所使用的一种思维模型。理解盒子模型能对网页排版提供很大的帮助。

---

先了解: 标签元素的分类

在学习盒子模型前，需要先了解HTML中标签元素可以分成三类：块状元素、内联元素(又叫行内元素)和内联块状元素。

块状元素

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

特点：
1. 在网页显示中，从新的一行开始，并且其后的元素也另起一行。
2. 元素的高度、宽度、行高以及顶和底边距都可设置。
3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度;
4. 设置display:block将元素显示为块级元素。

内联元素

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

特点：
1. 和其他元素都在一行上；
2. 元素的高度、宽度及顶部和底部边距不可设置；
3. 元素的宽度就是它包含的文字或图片的宽度，不可改变；
4. 设置display:inline将元素显示为内联元素。

内联块状元素

<img>、<input>

特点：
1. 和其他元素都在一行上；
2. 元素的高度、宽度、行高以及顶和底边距都可设置；
3. 设置display:inline-block将元素显示为内联块状元素。

---

盒子模型

CSS盒子模型，又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：

边框-border

有三个属性：粗细(border-width)、样式(border-style)和颜色(border-color)。

border-style：
dashed（虚线）| dotted（点线）| solid（实线）。

示例：

div{
    border:2px  solid  red;
}

css 样式中允许只为一个方向的边框设置样式：

div{
    border-bottom:1px solid red;
}

内边距-padding

设置元素内容与边框之间的距离。默认顺序为上、右、下、左(顺时针)。

如下代码：

div{padding:20px 10px 15px 30px;}

亦可分开设置：

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

外边距-margin

设置元素与其它元素之间的距离。

如下代码：

div{margin:20px 10px 15px 30px;}

也可以分开写：

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}