CSS盒模型的介绍

CSS盒模型的介绍

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。

盒模型的特点

每个盒子都有：边距（margin），边框（border），填充（padding），和实际内容（content）。
每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置。

盒子的内容

常用属性

overflow:visible（可见不裁剪）/hidden（隐藏）/scroll（滚动：滚动条占据盒子内容的宽高）/auto（如果内容需被裁剪，则浏览器以滚动条显示其余内容）;
text-overflow:clip(裁剪)/ellipsis（省略）;

单行文本溢出省略：

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

多行文本溢出省略：

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;

-webkit-line-clamp:显示的行数；
-webkit-box-orient:vertical;

padding
四个值：上右下左
三个值：上（左右）下
两个值：(上下）(左右)
一个值：（上下左右）
注释：不允许使用负值。

border值的个数排序同padding
常用属性

• border-style:solid(实线)/dashed（虚线）/dotted（点线）/double（双线）/none（无线型）;
• border-width
• border-color
• border-top/border-right/border-bottom/border-left
• border:1px solid red;(简写属性：border-width;border-style； border-color；）

margin值的个数排序同padding
注释：允许使用负值。
块级元素的垂直相邻外边距会合并（谁大取谁值），而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。

标准盒模型

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

盒子的实际占位宽度=(margin-left)+(border-left)+(padding-left)+content+(padding-right)+(border-right)+(margin-right);

盒子的实际宽度=(border-left)+(padding-left)+content+(padding-right)+(border-right);

怪异盒模型

IE盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding
盒子的实际占位宽度=(margin-left)+content+(margin-right);
盒子的实际宽度=contentWidth;

为了解决浏览器的兼容性
一般都会选择标准盒模型，前提是在网页的顶部加上 DOCTYPE 声明。