盒模型（Boxmodel）
盒模型
-
知识点
-
理解W3C标准盒模型
-
理解并掌握盒模型相关属性的使用方法
-
了解CSS盒模型的浏览器兼容性
-
掌握浮动布局的设计与使用方法
-
掌握各种页面元素的定位方法
-
掌握CSS3新增的相关属性的使用方法及兼容性
-
一、W3C标准盒模型
1、什么是盒模型
盒模型是使用css对网页元素进行控制时的一个概念，浏览器把网页中的每一个元素都看作一个盒模型，每个盒模型都由以下几个属性决定：
display、position、float、width、height、margin、padding、border等。
不同类型的盒模型会产生不同的布局。
CSS中，所有的页面元素都包含在一个矩形框内，这个矩形框就称为盒模型 。
盒模型描述了元素及其属性在页面布局中所占的空间大小，因此盒模型可以影响其他元素的位置及大小。一般来说，这些被占据的空间大小比内容大。
盒模型是由margin（边界）、border（边框）、padding（填充）和content（内容）几个部分组成，另外还具有width（宽度）、height（高度）两个辅助属性。
margin属性：称为边界或者外边距，用来设置内容与内容之间的距离。
border属性：称为边框、内容边框线，可以设置边框的粗细、颜色或者样式等。
padding属性：称为填充或内边距，用来设置内容与边框的距离。
content属性：称为内容，是盒模型的必备部分，可以放置文字、图像等内容。
2、CSS盒模型的要点
- 边框默认的样式（border-style）可设置为不显示（none）。
- 填充值（padding）不能为负。
- 边界（margin）可以为负。
- 内联元素，定义上下边界对行高没有影响。（如）
- 对于块级元素，未浮动的垂直相邻元素的上下边界会被压缩。
如果现有上下两个元素，上元素的下边界（margin-bottom）为10px，下元素的上边界（margin-top）为5px，则实际上两个元素的间距为10px（两个边界中值较大的），这就是盒模型的垂直空白边叠加的问题。 - 浮动元素（无论是左浮动还是右浮动）边界（margin）不压缩。并且如果浮动元素不声明宽度，其宽度趋向于0，即压缩到其内容能承受的最小宽度。
- 如果盒中没有内容，即使定义了宽度和高度为100%，实际上只占了0%，因此也不会显示。在使用div+css布局时，需特别注意。
3、CSS盒模型属性说明
-
margin属性
margin属性用于设置页面中元素和元素之间的距离，即定义元素周围的空间范围。
margin：auto|length;auto表示根据内容自动调整，length表示由浮点数字和单位标识符组成的长度值或百分数，百分数是基于父对象的尺寸大小。对于内联元素来说，左右外延边距可以是负值。
margin属性由4个子属性
margin-top：上边距
margin-right：右边距
margin-bottom：下边距
margin-left：左边距margin设置值的时候：
margin：5px；
只有一个参数值，将作用于四条边。
margin:5px 10px;
两个参数值，第一个（5px）作用于上下两边，第二个（10px）作用于左右两边。
margin:5px 15px 20px;
三个参数值，第一个（5px）作用于上边，第二个（15px）作用于左右两边，第三（20px）个作用于下边。
margin:5px 15px 20px 25px;
四个参数值，按顺时针作用于上、右、下、左四条边。 -
border属性
border属性是内边距和外边距的分界线，可以分离不同的html元素，border的外边是元素的最外围。在网页设计中，计算元素的宽和高时需要把border属性计算在内。
border:border-style|border-color|border-width;边框属性详见边框笔记
-
padding属性
padding属性定义了内容和边框的距离，即内边框，也称为内填充。
padding:length;padding的值可以是具体值，也可以是相对父元素的百分数，不能使用负值。
padding属性的也有4个子属性
padding-top：上填充
padding-right：右填充
padding-left：左填充
padding-bottom：下填充
4、浏览器兼容性
以上均为W3C盒模型
W3C的标准盒模型
外盒尺寸计算（元素空间尺寸）
element 空间高度 = 内容高度 （height）+ 上下内距（padding） + 上下边框（border） + 上下外距（margin）
element 空间宽度 = 内容宽度 （width）+ 左右内距（padding） + 左右边框（border） + 左右外距（margin）
内盒尺寸计算（元素大小）
高度=内容高度（height）+上下内距（padding）+上下边框（border）
宽度=内容宽度（width）+左右内距（padding）+左右边框（border）
IE6以下版本IE浏览器的传统盒模型
外盒尺寸计算（元素空间尺寸）
element 空间高度 = 内容高度 （height） + 上下外距（margin）（height包含了元素内容高度、上下边框和上下内距）
element 空间宽度 = 内容宽度 （width） + 左右外距（margin）（width包含了元素内容宽度、左右边框和左右内距）
内盒尺寸计算（元素大小）
高度 =内容高度 （height包含了元素内容高度、上下边距、上下内距）
宽度 =内容宽度 （width包含了元素内容宽度、左右边距、左右内距）
现在用IE6以下版本的用户基本没有了，所以我们现在可以放心大胆使用W3C标准的盒模型。
二、关于浮动（float）
默认情况下，块级元素（block）在页面中占据一整行的空间，依次向下排列。如果希望块级元素能够在一行显示，则可以通过元素设置浮动的方式来实现。
1、float属性
浮动只能在水平方向上定位，而不能在垂直方向上定位。浮动的框可以左右移动，直到它外边缘碰到包含框或另一个浮动框的边缘。
float:none|left|right|inherit;
none:表示元素不浮动
left：表示元素向左浮动
right：表示元素向右浮动
inherit：表示继承父元素的float属性设置。IE不支持该属性，不推荐使用。
2、清除浮动（clear）
clear:left|right|both;
left：表示该元素的左侧不允许出现浮动元素
right：表示该元素的右侧不允许出现浮动元素
both：表示该元素的两侧都不允许出现浮动元素
三、CSS定位
1、position属性
position:static|absolute|fixed|relative;
static：表示无特殊定位，元素定位的默认值，对象遵循HTML元素定位规则，不能通过z-index属性进行层次分级
absolute：表示绝对定位，相对于父级元素进行定位，元素的位置可以通过top、bottom、left、right等属性进行设置。可以通过z-index属性进行层次分级
fixed：表示悬浮，使元素固定在屏幕的某个位置，其包含块是可视区域本身，因此元素不随滚动条的滚动而滚动。元素的位置可以通过top、bottom、right、left等属性进行设置。IE6以下不支持。
relative：表示相对定位，对象不可以重叠，可以通过top、left、right、bottom等属性设置在页面的偏移位置，并可以通过z-index属性进行层次分级
其它属性
2、相对定位（relative）
position:relative;
在使用相对定位时，无论是否进行移动，元素仍占据原来的空间。
3、绝对定位（absolute）
position:absolute;
绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过z-index属性来控制这些元素的堆放次序。z-index属性的值越大，框在堆中的位置就越高。
4、固定定位（fixed）
position:fixed;
绝对定位的一种特殊形式，固定定位的容器不会随着浏览器的滚动条的拖动而变化位置。
多用于导航。
四、CSS3盒模型
1、css3盒模型属性
css3对盒模型进行来改善，新增了box-sizing属性，通过该属性可按盒模型尺寸进行计算。
box-sizing:content-box|border-box|inherit;
content-box:默认值，让元素维持W3C的标准盒模型。即元素的宽度或高度=border+padding+内容宽度或者内容高度
border-box：该属性值会重新定义css2中盒模型组成的模式，让元素维持IE6以下版本IE的传统盒模型，元素的宽度或高度等于元素内容的宽度或高度
inherit：表示继承父元素的盒模型模式
box-sizing属性主要控制元素的盒模型的解析模式，其主要目的是控制元素的总宽度。
（在firefox浏览器中，box-sizing还可以设置一个padding-box属性值，用来指定元素的宽度或高度包括内容的宽度或高度和内距，但不包括边框宽度）
box-sizing
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
2、浏览器支持
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
五、CSS3内容溢出属性
在css中每个元素都是一个容器，通常会指定容器的大小，当内容超过容器时，就可以使用overflow属性来指定如何显示容器中容纳不下的内容。
1、基础属性
-
visible 默认值。内容不会被修剪，会呈现在元素框之外。
-
hidden 内容会被修剪，并且其余内容是不可见的。
-
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
-
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
-
inherit 规定应该从父元素继承 overflow 属性的值。
2、css3中添加了overflow-x和overflow-y属性
overflow-x：主要用来设置水平方向对溢出内容的处理方法；
overflow-y：主要用来设置垂直方向对溢出内容的处理方法。
- visible 不裁剪内容，可能会显示在内容框之外。
- hidden 裁剪内容 - 不提供滚动机制。
- scroll 裁剪内容 - 提供滚动机制。
- auto 如果溢出框，则应该提供滚动机制。
- no-display 当盒子溢出时，不显示元素，该属性是新增的
- no-content 当盒子溢出时，不显示内容，该属性是新增的
CSS3自由缩放属性（resize）
resize属性
指定一个元素是否是由用户调整大小的。
注意：resize属性适用于计算其他元素的溢出值是不是"visible"。
语法
resize: none|both|horizontal|vertical:
- none：用户无法调整元素的尺寸。
- both：用户可调整元素的高度和宽度。
- horizontal：用户可调整元素的宽度。
- vertical ：用户可调整元素的高度。
resize属性需要和溢出处理属性overflow-x和overflow-y一起使用，才能把元素定义成可以调整尺寸大小的效果，且溢出属性值不能为visible。
浏览器兼容
六、CSS3外轮廓属性
外轮廓属于动态样式，只有元素获取到焦点或者被激活时才呈现。
1、语法
outline:[outline-color] | [outline-style] | [outline-width] | inherit;
2、属性
outline-color:设置轮廓的颜色
outline-color: | invert | inherit;
< color> color-name | hex-number | rgb-number
outline-style:设置轮廓的样式
outline-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit;
- none：默认。定义无轮廓。
- dotted：定义点状的轮廓。
- dashed：定义虚线轮廓。
- solid ：定义实线轮廓。
- double：定义双线轮廓。双线的宽度等同于 outline-width 的值
- groove：定义 3D 凹槽轮廓。此效果取决于
- outline-color 值。
- ridge：定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
- inset：定义 3D凹边轮廓。此效果取决于 outline-color 值。
- outset：定义 3D 凸边轮廓。此效果取决于 outline-color值。
- inherit：规定应该从父元素继承轮廓样式的设置。
outline-width:设置元素轮廓的宽度
outline:thin|medium|thick||inherit;
- thin：规定细轮廓。
- medium：默认。规定中等的轮廓。
- thick ：规定粗的轮廓。
- length：允许您规定轮廓粗细的值。
- inherit：规定应该从父元素继承轮廓宽度的设置。
outline-offset属性：设置元素外轮廓的偏移值。
outline-offset:|inherit;
当属性值为正数的时候，表示轮廓线向外偏离多少个像素；
当该属性值取值为负数时，表示轮廓线向内偏移多少个像素。
注：在复合的outline属性语法中没有包含outline-offset子属性，因为这样会造成外轮廓边框宽度值指定不明确，无法正确解析。
3、outline和border属性比较
outline属性所创建的外轮廓线与border属性所实现的边框效果极其相似，但实际上有明显的不同，主要表现在以下几个方面：
- border属于盒模型的一部分，直接影响元素盒子的大小，而outline创建的外轮廓线是表现在元素“上面”，不会影响该盒子或其他元素的大小。因此outline创建的轮廓线不会影响文档流，也不会破坏网页布局。
- outline属性创建的外轮廓线在元素思边的表现效果相同，而border属性可以为四边单边设置属性。outline属性创建的外轮廓线始终是闭合的。
- border属性所设置的边框只能向外扩展，而outline创建的轮廓线可以通过outline-offset设置。