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属性有四个值，分别对应盒子的上右下左外边距，能够写成下面这样：

咱们也能够采用缩写的方式，以下：

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

它的缩写和margin同样。 2.border的其它经常使用属性有： border-style边框样式， border-width边框粗度， border-color边框颜色， 一般咱们会缩写为：

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

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

padding缩写和margin同样。

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

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

• content

• padding，border

• margin

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

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

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

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

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