1、CSS的三种定位机制
CSS 规定的定位机制有三种，分别是：
标准文档流(Normal flow)：
特点：从上到下，从左到右，输出文档内容。由块级元素(块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行)和行级元素(块级元素特点： 在同一行内显示，不会改变HTML文档结构 )组成。
浮动(Floats)
绝对定位(Absolute positioning)
言下之意就是网页布局和元素的定位都离不开这三种机制。
2、什么是W3C标准
W3C标准，是由万维网联盟制定的一系列标准，主要包括以下三个方面内容：
结构化标准语言(HTML和XML)
表现标准语言(CSS)
行为标准语言(DOM和ECMAScript)
W3C倡导的是结构、样式、行为分离
3.盒模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距(margin)、边框(border)、内边距(padding)、盒子中的内容(content).
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
元素的宽度和高度：
重要: 当你指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充(padding)，边框(border)和边距。.
在三维空间中，盒子模型由上到下分为五层：
边框(border)位于第一层；
内边距(padding)和盒子中的内容(content)位于第二层；
背景图像(background-image)位于第三层；
背景颜色(background-color)位于第四层；
外边距(margin)位于最后一层。
Paste_Image.png
各个层叠加之后也就形成了我们看到的盒子模型的平面结构图。
盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。
Paste_Image.png
Paste_Image.png
区别：
W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width、height包括content尺寸＋padding＋border。
举个例子：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px。
假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：
宽： 20❄2+1❄2+10❄2+200=262px
高： 20❄2+1❄2+10❄2+50=112px
盒子的实际大小为:
宽: 1❄2+10❄2+200=222px
高: 1❄2+10❄2+50=72px
假如用ie 盒子模型，那么这个盒子需要占据的位置为：
宽: 20❄2+200=240px
高: 20❄2+50=70px
盒子的实际大小为：宽 200px、高 50px。
并不是所有的IE都使用IE盒模型：
早期IE6、IE7使用“IE盒模型”，后来更新了一次，更新后的IE6、IE7使用标准盒模型IE8及以上版本使用标准盒模型.
没有DOCTYPE的情况下使用怪异模式，IE也使用“IE盒模型”。在HTML页面声明 ，浏览器就会选择标准 w3c 盒子模型来呈现内容了。
兼容方案:
使用css3新样式box-sizing，box-sizing有两个值:
content-box：w3c标准盒模型
border-box：“IE盒模型”
4.自动居中一列布局
需要掌握三个技能：
标准文档流
块级元素
margin属性：上下外边距根据需要设置，左右外边距为auto
自动居中一列布局需要设置 margin 左右值设置为 auto，而且一
般要为包裹层(父层)设置width为一个定值，子层设置width为100%(以父包含块宽度为准自适应)。
aotu 会根据浏览器的宽度自动的设置两边的外边距。
原理：(浏览器宽度-外包层宽度)／2 = 外边距
如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或绝对定位属性 。
5.浮动布局
CSS中规定的第二种定位机制，使用浮动布局能够实现块级元素的横向排版，即横向多列布局。
浮动的框可以左右移动(根据float属性值而定)，直到它的外边缘
碰到包含框或者另一个浮动元素的框的边缘。
浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。
当元素没有设置宽度值，而设置了浮动属性，元素的宽度会随内容的变化而变化(若没有内容，则宽度为0)。
当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻它后面的元素，对它前面的元素没影响。
demo 1：
Paste_Image.png
浮动元素覆盖了紧邻它后面的元素，而不会覆盖前面的。
6.清除浮动的常用方法
1.为受到浮动影响的元素设置clear属性 - clear：both；
2.为受到浮动影响的元素同时设置width：100%(或固定宽度)+overflow：hidden；
3、给包裹层(父层)设置：
.clearfix：after{
content:'';
display:block;
clear:both;
}
.outer{
border: 1px solid black;
width: 300px;
}
.inner{
width: 50px;
height: 50px;
background-color: #ff4400;
margin-right: 20px;
float: left;
}
.footer{
background-color: #005FC3;
width: 200px;
height: 100px;
}
.clearfix:after{ /*最简方式*/
content: '';
display: block;
clear: both;
}
/* 新浪使用方式
.clearfix:after{
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
*/
.clearfix{ /*兼容 IE*/
zoom: 1;
}
7.横向两列布局
主要应用技能：
float 属性 - 使纵向排列的块级元素，横向排列
margin属性 - 设置两列之间的间距
* {
margin:0;
padding:0;
}
#wrap {
background:#00C;
margin:0 auto;
width:960px;
}
#header {
background:#FF3300;
width:100%;
}
#mainbody {
background:#FC0;
}
.clearfix:after{
content:'';
display:block;
clear:both;
}
.left {
width:800px;
height:200px;
background:#000;
float:left;
}
.right {
width:140px;
height:500px;
background:#690;
float:right;
}
#footer {
background:#639;
width:100%;
}
8.一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
你可以使用 display 属性、改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素(比如元素)表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：
some text
Some more text.
Paste_Image.png
9.CSS定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box)，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
10.绝对定位布局
绝对定位布局就是使用position属性实现的网页布局，是CSS中规定的第三种定位机制。它除了能实现横向多列布局以外，还可以实现许多复杂的定位，例如：
带有遮罩层效果的提示框
Paste_Image.png
2.固定层效果
Paste_Image.png
全屏广告
Paste_Image.png
position属性拥有三种定位形式：
静态定位
相对定位
绝对定位
要使元素进行绝对定位可以使用position属性来设置，它可以设置四个属性值，即四种定位，分别是：
static(静态定位)：
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative(相对定位):
特点：
1.相对于自身原有位置进行偏移。
2.元素仍处于文档流中，这也就意味着它会占据标准文档流的空间。
3.一旦设置相对定位，元素随即拥有偏移属性和z-index属性(设置偏移属性之后可能会产生空间的层堆叠，对后面的元素形成遮盖，如下图所示。这时可以通过设置 [z-index 属性]来控制这些框的堆放次序)。
Paste_Image.png
absolute(绝对定位):
特点：
1.建立了以包含块为基准的定位。
2.完全脱离了标准文档流，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。
3.当元素设置为绝对定位后，元素也会 多出两类属性：偏移量属性 和 Z-index属性，与相对定位不同的是：
该元素已经脱离了标准文档流(不占位)
建立的定位基准不是该元素的原来位置，而是分两种情况:
2.1：没有设置偏移量，特点：无论是否存在已定位的祖先元素，都保持在元素初始位置；脱离文档流；宽度塌陷(随内容变化而变化)
2.2：设置了偏移量：又分两种情况(A.无已定位的祖先元素 B.有已定位的祖先元素)
A.无已定位的祖先元素:它会以根节点()为偏移参照基准
B.有已定位的祖先元素:它会以距其最近的已定位祖先元素为偏移参照基准 (通过为元素赋予position:relative、position:absolute或者position:fixed对其进行定位，已定位的祖先元素意思就是通过这三种方式已经定位完成了)
绝对定位不在文档流中(不会占位置，宽度及长度显示随内容增减而增减
fixed(固定定位):
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
absolute(绝对定位)和fixed(固定定位)都属于绝对定位形式
使用绝对定位ablolute实现横向两列布局 — 常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能：
relative—父元素相对定位
absolute—自适应宽度的元素绝对定位
注意：固定宽度列的高度>自适应宽度的列(因为绝对定位的元素会导致父元素高度塌陷，所以一定要保证固定宽度列的高度>自适应宽度的列，才能让绝对定位元素放进父容器里)
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
