CSS盒模型简介

一，什么是CSS盒模型？

CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
形象的来说，一张网页就像一个衣柜那样，由一个又一个“方框盒子”组成：

衣柜 网页

而这中间的每一个盒子都是盒模型，它们组成一个大的盒模型（网页），而降到盒模型就不能不提块级元素和行内元素。

二，块级元素和行内元素

• 什么是块级元素和行内元素
  1.块级元素：块级元素全称block level element，它是指在网页中内容文本无论多少都能单独占领一行的元素，如下图：

块级元素

2.行内元素：行内元素全称inline element，它是指在网中内容文本如果不能占据超过整个父容器宽度则不会完全占据一行的元素，如下图：

行内元素

• 块级元素和行内元素有哪些？
  1.块级元素：<div>，<h1~h6>，<p>，<form>，<ul>，<ol>，<dl>，<dt>，<dd>，<li>，<table>，<tr>，<td>，<th>，<pre>等；
  2.行内元素：<span>，<strong>，<em>，<a>，<img>，<br>，<button>，<input>，<label>，<select>，<textarea>，<code>，<script>等；
• 块级元素和行内元素的区别
  1.块级元素可以包含文本，块级，行内元素，而行内元素只能包含文本和行内元素；
  2.块级元素单独占据一整行，行内元素占据的位置只有自身文本宽度的空间；
  3.块级元素可以设置宽高，行内元素设置宽高无效；
  4.块级元素的padding，margin值设置有效，行内元素padding，margin上下的值设置无效，但左右有效；

三，一个盒子的组成

在盒模型中，一个盒子由content，padding，border和margin组成的，它们的直观是这样的：

盒模型成分

其中，最外层是margin，它是盒子的外边距，有四个值，分别是上右下左，里面一层是border，它是盒子的边框，也是上右下左四个值，往下面的是padding，它是盒子的内边距，也有上右下左四个值，最里面一层是content区域，也就是文本内容展示的区域。

• margin：盒子外边距，margin属性有四个值，分别对应盒子的上右下左外边距，可以写成下面这样：

margin的值

我们也可以采用缩写的方式，如下：

缩写1 缩写2

• border：
  1.盒子的边框，有四个值，分别对应盒子的上右下左border，写法如下：

boder的值
它的缩写和margin一样。
2.border的其它常用属性有：border-style边框样式，border-width边框粗度，border-color边框颜色，
通常我们会缩写为： 多个样式缩写

3.border-radius：边框半径，border-radius 属性是一个简写属性，它有四个值，分别对应边框的四个角，
顺序是左上，右上，右下，左下，如下图：

border-radius将边框角变圆

• padding：盒子内边距，padding属性有四个值，分别对应盒子的上右下左内边距，可以写成下面这样：

padd写法

padding缩写和margin一样。

• content：文本内容区域，可以用width和height设置该区域的大小；

四，展示一个完整的盒子结构

• content

蓝色文本区域为content区

• padding，border

绿色是padding区域，红色区域是border

• margin

黄色是margin区域

五，W3C盒模型与IE盒模型的区别(参考知识点-IE 盒模型 vs 标准盒模型)

• IE盒模型
  IE盒模型是指在ie678怪异模式（不添加 doctype）下使用 ie 盒模型，宽度=边框+padding+内容宽度

• w3c盒模型（标准盒模型）
  chrome， ie9+, ie678(添加 doctype) 使用标准盒模型

• 他们的区别
  首先来看一张图

w3c盒模型与ie盒模型
PS：两种盒模型的宽度计算是不一样的；
1.IE盒模型的宽度计算：宽度=边框+padding+内容宽度；
2.w3c盒模型的宽度计算：宽度= 内容宽度；