css盒子模型

内容区（content）

内容区是整个盒子模型的中心，其中存放了盒子的主要内容，这些内容可以是文本、图像等资源。内容区有 width、height、overflow 三个属性，其中 width 和 height 属性用来指定盒子内容区域的宽度和高度，当内容信息过多，超出内容区所设置的范围时，则可以使用 overflow 属性设置溢出内容的处理方式，overflow 属性有四个可选值：

• hidden：表示隐藏溢出的部分；
• visible：表示显示溢出的部分（溢出的部分将显示在盒子外部）；
• scroll：表示为内容区添加一个滚动条，通过滑动这个滚动条来查看内容区的全部内容；
• auto：表示由浏览器决定如何处理溢出部分。

内边距（padding）

内边距是内容区和边框之间的空间，在为盒子模型设置背景属性时，背景属性可以覆盖到内边距区域。
内边距（padding）是指元素内容区与边框之间的区域，与外边距不同，内边距会受到背景属性的影响

• padding-top：设置元素内容区上方的内边距；
• padding-right：设置元素内容区右侧的内边距；
• padding-bottom：设置元素内容区下方的内边距；
• padding-left：设置元素内容区左侧的内边距；
• padding：可以同时设置上下左右四个方向上的内边距。（一个参数：上下左右都一样；两个参数：上下  左右；三个参数：上  左右  下；四个参数：上  右  下  左）

边框（border）

边框是环绕内容区和内边距的边界，可以使用 border-style、border-width 和 border-color 以及它们的简写属性 border 来设置边框的样式。其中 border-style 属性为边框中最主要的属性，如果没有设置该属性的话，其它的边框属性也会被忽略。

外边距（margin）

外边距位于盒子模型的最外围，是边框之外的空间，通过外边距可以使盒子与盒子之间不会紧凑的连接在一起，是 CSS 布局中的一种重要手段。可以使用 margin-top、margin-bottom、margin-left、margin-right 以及它们的简写属性 margin 来设置各个方向上外边距的宽度。

对于两个相邻的（水平或垂直方向 ）且都设置有外边距的盒子，它们之间的距离并不是两者外边距相加的和，而是它们之中较大的那个值。另外，也可以将外边距的值设置为负值，当外边距的值为负时整个盒子将向反方向移动，当到达一定程度时盒子之间会产生重叠效果。

• margin-top：设置元素上方的外边距；
• margin-bottom：设置元素下方的外边距；
• margin-right：设置元素右侧的外边距；
• margin-left：设置元素左侧的外边距；
• margin：可以同时设置元素四个方向的外边距。（一个参数：上下左右都一样；两个参数：上下  左右；三个参数：上  左右  下；四个参数：上  右  下  左）

宽度和高度

• 总宽度：width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
• 总高度：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

1. width

通过 width 属性可以设置元素内容区的宽度，属性的可选值如下：

值	描述
auto	默认值，浏览器自动计算元素的实际宽度
length	使用具体数值配合 px、cm 等单位来定义宽度
%	定义基于父元素宽度百分比的宽度
inherit	从父元素继承 width 属性的值

2. height

height 属性用来定义元素内容区的高度，属性的可选值如下：

值	描述
auto	默认值，浏览器自动计算元素的实际高度
length	使用具体数值配合 px、cm 等单位来定义高度
%	定义基于父元素高度百分比的高度
inherit	从父元素继承 width 属性的值

3. max-width 和 max-height

max-width 和 max-height 属性分别用来设置元素内容区的最大宽度和最大高度。当定义了 max-width 和 max-height 属性时，不论 width 或 height 属性的实际值是多少，width 和 height 属性的实际值都会小于等于 max-width 和 max-height 属性的值。max-width 和 max-height 属性的可选值如下：

值	描述
none	默认值，表示对元素的最大宽度或高度没有限制
length	使用具体数值配合 px、cm 等单位来定义元素的最大宽度或高度
%	定义基于父元素宽度和高度百分比的最大宽度或高度
inherit	从父元素继承 max-width 或 max-height 属性的值

以 max-width 属性为例：（max-height 属性的特性与之相似）

• 当 max-width 属性的值小于 width 属性时，width 属性的值会被重新定义为与 max-width 属性相同的值；
• 当 max-width 属性的值大于 width 时，max-width 属性将会被忽略；
• 当 max-width 属性的值小于 min-width 时，max-width 属性将会被忽略。

改变盒子模型box-sizing

默认情况下，网页中元素的实际宽度或高度取决于元素内容区的宽度或高度、内边距以及边框属性的大小，因此在为元素布局时还需要考虑元素的内边距和边框属性所占的页面空间，正是由于上述原因，当为页面元素设置宽度和高度时，元素的实际大小往往比设置的要大。为此 CSS3 中添加了 box-sizing 属性来改变默认的盒子模型，通过 box-sizing 属性可以将元素的内边距和外边距在元素内容区内绘制，以使元素呈现的宽度和高度与设置的宽度和高度相同。

box-sizing 属性的可选值如下：

值	描述
content-box	默认值，元素的实际宽度或高度等于元素内容区的宽度或高度、内边距和边框的和
border-box	在元素的内容区内绘制内边距或边框，内边距或边框不会影响元素的实际宽度或高度
inherit	从父元素继承 box-sizing 属性的值。

浮动float

浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。另外，在浮动元素之后定义的文本或者行内元素都将环绕在浮动元素的一侧，从而可以实现文字环绕的效果。

float 属性有三个可选值，如下表所示：

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动
inherit	从父元素继承 float 属性的值

另外，在使用 float 属性时还需要注意以下几点：

• 如果设置了 float 属性且属性的值不为 none 时，若 display 属性的值为 inline-table，那么 display 实际会被设置为 table，若 display 的属性值为 inline、inline-block、run-in、table-* 等值，那么 display 实际会被设置为 block，其它情况则没有变化；
• 当元素设置了绝对定位或者 display 属性的值为 none 时，float 属性无效；
• 相邻的浮动元素，如果空间足够它们会紧挨在一起，排列成一行。

清除浮动clear

元素浮动之后，会对周围的元素造成一定的影响，为了消除这种影响您可以使用 clear 属性来清除浮动，属性如下:

值	描述
left	左侧不允许浮动元素
right	右侧不允许浮动元素
both	左右两侧均不允许浮动元素
none	默认值，允许浮动元素出现在左右两侧
inherit	从父元素继承 clear 属性的值