1、盒模型
上面是一个盒子模型图，一个盒子包括了content（实际内容）、border（边框）、padding（内边距）和margin（外边距）。
盒子的内容，显示文本和图像。我们给元素设置的width和height其实是content的宽高，如果content指定高度大于显示内容所需高度，多余的高度会产生类似内边距一样的效果；如果指定高度小于显示内容所需高度，会出现滚动条。如果元素内容的高度大于元素框的高度，浏览器的具体行为取决于overflow属性。
元素的边框是围绕元素内容的内边距的一条或多条线。边框由粗细、样式和颜色三部分组成。
清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的Background属性影响，padding是有背景的。
在元素外创建额外的空白，空白通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景（padding所带的是本身的背景而非父元素）。margin经常取负值实现定位的作用。
外边距有一个合并问题，经常使人们混淆，简单来说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
其实盒模型有两种，分别是ie盒子模型（IE6以下版本浏览器)和标准w3c盒子模型，区别在于前者content的宽度和高度包括了border和padding。
margin（外边界）虽不可见，但是它确实在文档中占据了空间，我们要区分两个概念即：盒子所占空间（计入margin ）和盒子实际的大小（不计入margin） 。
下面举个例子来区分两种盒模型：一个盒子的margin 为 20px，border 为 2px，padding 为 10px，content 的宽为 200px、高为 50px。
盒子所占空间：width=20ｘ2+200=240 height=20ｘ2+50=90
盒子实际大小：width=200 height=50
盒子所占空间：width=20ｘ2+2ｘ2+10ｘ2+200=264 height=20ｘ2+２ｘ2+10ｘ2 +50=114
盒子实际大小：width=200 +2ｘ2+10ｘ2 =224 height=50+2ｘ2+10ｘ2=74
解释到这里，有的人可能会想起CSS3里面有个叫做box-sizing的属性，咦？两个盒模型不就是它不同取值下的效果吗？那我恭喜你，你说对了～
box-sizing有三个取值：
1、content-box:使元素遵循标准 w3c 盒子模型（默认值）。
2、border-box:使元素遵循ie 盒子模型。
3、inherit： 规定应从父元素继承 box-sizing 属性的值。
那么我可以用box-sizing的不同取值让大家直观地理解两个盒子的区别，也顺带理解这个属性，下面是需要用到的html代码，方便大家看得清楚，我给盒子外面添加一个宽高各500px的灰色背景
<div class='box'></div>
</div>
.box{
background-color: #91D4DA;
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid #5B5B5B;
box-sizing: content-box; /*默认值，可以不写*/
}
下面改变padding和border的值
.box{
background-color: #91D4DA;
width: 300px;
height: 300px;
padding: 50px;
border: 20px solid #5B5B5B;
box-sizing: content-box; /*默认值，可以不写*/
}
大家可以发现，元素盒子的实际宽度是随padding和border改变的。
.box{
background-color: #91D4DA;
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid #5B5B5B;
box-sizing: border-box;
}
下面改变padding和border的值
.box{
background-color: #91D4DA;
width: 300px;
height: 300px;
padding: 50px;
border: 20px solid #5B5B5B;
box-sizing: border-box;
}
发现区别了吧，当你遵循ie盒子模型时，不管你如何设置padding和border（小于width/2），它只在盒子里面伸缩，不影响整体的宽高，这个border-box是不是在某些时候非常好用？但也不能盲目地用，因为它会影响content，如果padding和border太大，会把内容挤掉的。
现在还在用IE6以下的浏览器的用户已经很少了，所以目前浏览器大部分元素都是基于W3C标准盒子模型 上。所以我们平常说的盒子模型一般就是标准
w3c盒子模型 （但对于input、button元素默认border-box ，还是基于传统的ie 盒子模型）。一定有人会问，那我们怎样让我们的元素都遵循W3C标准盒子模型呢？哈哈，看看你html的文件头部是不是有一个<!DOCTYPE html>，有这个，就说明你已经遵循W3C标准盒子模型了。
[if !supportLists]2、[endif]基线
2-1.基线、底线、顶线、中线
基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿
2-2.内容区
内容区是指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字体进行变化。
2-3.行高
行高（line-height）：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高。一般情况下，也可以认为是相邻文本行基线间的距离(张鑫旭css世界)。
2-4. 行内框inline box
行内框是一个浏览器渲染模式中的一个概念，无法显示出来，但是它又确实存在，它的高度就是行高指定的高度。
2-5. 行框line box
行框（line box），同行内框类似的概念，行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。
2-6.Vertical-align:垂直居中
上一节我们讲解了行高与单行纯文字的垂直居中（line-height），而如果行内含有图片和文字，在浏览器渲染出来后，读者可以发现文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐。这是因为，元素默认的垂直对齐方式为基线对齐（vertical-align: baseline）。
CSS语法：vertical-align
语法：
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
说明：
设置元素内容的垂直对齐方式。
参数：
baseline： 基线对齐；
sub： 下标显示；
super： 上标显示；
top： 顶端对齐；
text-top： 文本的顶端对齐；
middle： 中部对齐； //没有研究透的属性
bottom： 底端对齐；
text-bottom： 文本的底端对齐；
百分比和长度：CSS2，可为负数。
初始值：baseline
继承性：不继承
此处需要特别注意的是：垂直对齐属性只对文本有效（是指包含了#Text节点的元素节点才能正确地处理vertical-align属性）。同时，该属性不能继承。
属性值详解
在上面一节中，介绍了文本的基线、顶线、中线和底线，还有内容区、行内框和行框，而本节的垂直对齐和这几个概念密切相关。
1. 基线对齐（vertical-align : baseline）
基线对齐（vertical-align : baseline）使元素的基线同基准元素（取行高最高的作为基准）的基线对齐
2. 顶端对齐（vertical-align : top）
顶端对齐（vertical-align : top）是将元素的行内框的顶端与行框的顶端对齐
3. 文本顶端对齐（vertical-align : text-top）
文本顶端对齐（vertical-align : text-top）是将元素行内框的顶端同文本行的顶线对齐
4. 底端对齐（vertical-align : bottom）
底端对齐（vertical-align : bottom）与顶端对齐（vertical-align : top）相反
5. 文本底端对齐（vertical-align : text-bottom）
中间对齐（vertical-align : middle）
中间对齐（vertical-align : middle）通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐。
中线的定义为：中线位于基线的上方，与基线的距离为小写字母x高度的一半（即0.5ex），而ex同font-size相关，大部分浏览器认为1ex = 0.5em（em同样也是相对单位，不是绝对单位），因此会将基线以上四分之一em处作为中线来对齐。
7. 上标和下标
上标（vertical-align:super）使元素的基线相对于基准元素的基线升高，下标（vertical-align:sub）使元素的基线降低，移动的幅度CSS规范中没有规定，由浏览器来决定。
上下标不会改变元素文字的尺寸大小。
3、文档流
3-1. 标准文档流
文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
3-2. 标准流的微观现象：
[if !supportLists]· [endif]空白折叠现象。（见代码）
[if !supportLists]· [endif]高矮不齐，底边对齐
[if !supportLists]· [endif]自动换行，一行写不完时，换行
3-3.标准文档流等级
分为两种等级：块级元素和行内元素
内联元素文档流
内联元素的文档流是从左往右流动的，当一行满了之后会另起一行从新开始
1).与其他元素并排2).不能设置宽、高。默认的宽度就是文字的宽度
块级元素文档流
块级元素文档流是从上往下依次流动的，每个块级元素占满一行
1).霸占一行，不能与其他任何元素并列2).能接受宽、高3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽
3-4.脱离文档流
float使用
浮动元素是如何定位的
当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移到碰到了所处的容器的边框，或者碰到了另外一个浮动的元素。
浮动属性
[if !supportLists]1. [endif]只有横向浮动，并没有纵向浮动。2.当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。3.会将元素的display属性变更为block
[if !supportLists]4. [endif]浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会遮盖后一个元素。5.浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）
文字环绕效果（见代码）
按我的理解，div2向左浮动了，div3就跑到div2的下面了，同时div3中的内容应该也就看不到了，但真实效果却不是这样的，div3的内容被挤出来了，这个是怎么回事呢？
寻找原因
经过查询资料后，让我了解到了float的历史背景：
早些时候，W3C规定出来的浮动实际并不是为了布局所用，当时是为了做文字环绕才使用了浮动，只是后来人发现用它做布局也挺不错的，故至此float就担任了CSS中布局的任务，但我们还是不要忘了，float起初就是为了做文字环绕的。
可能浮动并不是像我想象的那样，元素完全的脱离了文档流，其实浮动还是比较特殊的，虽然脱离的文档流，但最终还是能影响到布局。
下面让我们比对一下绝对定位和浮动的区别，感受一下真正的脱离文档流是什么样子的。
浮动与绝对定位对比（见代码）
绝对定位是将元素彻底的从文档流中删除，并相对于某个父元素进行定位，元素原先在文档流中所占的空间会关闭，就好像该元素原来不存在一样，该元素再也不会影响其他元素的布局了。
浮动使元素脱离了文档流，但依然影响了布局。在CSS中，浮动元素几乎“自成一派”，比较特殊。这种影响来源于一个事实：一个元素浮动时，其他内容会“环绕”该元素。
从上图可以看出，div2的确占据了div1的位置，绿色的部分和灰色的部分有重合，所以可以说，浮动的元素脱离了文档流。但div2的文字内容并没有被div1给覆盖，而是环绕在div1的周围，所以可以说，浮动影响了布局。其实环绕是浮动最初的目的。
总结
绝对定位是使元素完全的脱离文档流，也是我们大部分人理解的浮动，影响了自身的位置，但并没有影响到其它元素的内部布局。
float可以理解是一种特殊的“浮动”，元素虽然脱离的文档流，但依然会影响到其他元素的内部布局。float有两个功能：
1、脱离文档流
2、文字环绕
position:fixed 元素在一定的容器内固定定位
position:fixed;默认是相对浏览器窗口定位的，如果想要让一个元素相对一个div容器内固定定位，html部分如下：
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试案例</title>
<style type="text/css">
span {
display: block;
width: 120px;
height: 30px;
background: red;
}
div {
display: inline;
width: 120px;
height: 200px;
background: green;
}
i {
display: inline-block;
width: 120px;
height: 30px;
background: lightblue;
}
</style>
</head>
<body>
<span>行内转块状</span>
<div>块状转行内 </div>
<i>行内转行内块状</i>
</body>
</html>
3-4-1.行内元素
行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体和标签，还有和这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。
行内元素特征：(1)设置宽高无效
[if !supportLists](2) [endif]对margin仅设置左右方向有效，上下无效；padding 设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
3-4-2.块级元素
块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
块状元素特征：(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
3-4-3.行内块状元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
行内块状元素特征：(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
来源公司技术分享--金鑫
网友评论