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）位于最后一層。
各個層疊加之后也就形成了我們看到的盒子模型的平面結構圖。
盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。
區別：
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頁面聲明 <!DOCTYPE html>，瀏覽器就會選擇標準 w3c 盒子模型來呈現內容了。
兼容方案:
使用css3新樣式box-sizing，box-sizing有兩個值:
- content-box：w3c標準盒模型
- border-box：“IE盒模型”
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;">
</div>
4.自動居中一列布局
需要掌握三個技能：
- 標準文檔流
- 塊級元素
- margin屬性：上下外邊距根據需要設置，左右外邊距為auto
自動居中一列布局需要設置 margin 左右值設置為 auto，而且一
般要為包裹層（父層）設置width為一個定值，子層設置width為100%（以父包含塊寬度為準自適應）。
aotu 會根據瀏覽器的寬度自動的設置兩邊的外邊距。
原理：（瀏覽器寬度-外包層寬度）／2 = 外邊距
如果想讓頁面自動居中，當設置margin屬性為auto的時候，不能再設置浮動或絕對定位屬性 。
5.浮動布局
CSS中規定的第二種定位機制，使用浮動布局能夠實現塊級元素的橫向排版，即橫向多列布局。
浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣
碰到包含框或者另一個浮動元素的框的邊緣。
浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣。
當元素沒有設置寬度值，而設置了浮動屬性，元素的寬度會隨內容的變化而變化（若沒有內容，則寬度為0）。
當元素設置浮動屬性后，會對相鄰的元素產生影響，相鄰元素特指緊鄰它后面的元素，對它前面的元素沒影響。
demo 1：
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; ">
</div>
<div style="height: 100px; width: 100px; background-color: Green;float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow;">
</div>
</div>
浮動元素覆蓋了緊鄰它后面的元素，而不會覆蓋前面的。
6.清除浮動的常用方法
1.為受到浮動影響的元素設置clear屬性 - clear：both；
2.為受到浮動影響的元素同時設置width：100%（或固定寬度）+overflow：hidden；
3、給包裹層（父層）設置：
.clearfix：after{
content:'';
display:block;
clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.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;
}
</style>
</head>
<body>
<div class="outer clearfix">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="footer"></div>
</body>
</html>
7.橫向兩列布局
主要應用技能：
- float 屬性 - 使縱向排列的塊級元素，橫向排列
- margin屬性 - 設置兩列之間的間距
<style type="text/css">
* {
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%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">頭部</div>
<div id="mainbody" class='clearfix'>
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">版權部分</div>
</div>
</body>
8.一切皆為框
div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。
你可以使用 display 屬性、改變生成的框的類型。這意味著，通過將 display 屬性設置為 block，可以讓行內元素（比如<a>元素）表現得像塊級元素一樣。還可以通過把 display 設置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不占用文檔中的空間。
但是在一種情況下，即使沒有進行顯式定義，也會創建塊級元素。這種情況發生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當作段落對待：
<div>
some text
<p>Some more text.</p>
</div>
9.CSS定位機制
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
10.絕對定位布局
絕對定位布局就是使用position屬性實現的網頁布局，是CSS中規定的第三種定位機制。它除了能實現橫向多列布局以外，還可以實現許多復雜的定位，例如：
- 帶有遮罩層效果的提示框
2.固定層效果
- 全屏廣告
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.無已定位的祖先元素:它會以根節點（<html>）為偏移參照基準
B.有已定位的祖先元素:它會以距其最近的已定位祖先元素為偏移參照基準 (通過為元素賦予position:relative、position:absolute或者position:fixed對其進行定位，已定位的祖先元素意思就是通過這三種方式已經定位完成了)絕對定位不在文檔流中（不會占位置，寬度及長度顯示隨內容增減而增減
- fixed（固定定位）:
元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。
相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
absolute（絕對定位）和fixed（固定定位）都屬于絕對定位形式
使用絕對定位ablolute實現橫向兩列布局 — 常用于一列固定寬度，另一列寬度自適應的情況
主要應用技能：
- relative—父元素相對定位
- absolute—自適應寬度的元素絕對定位
注意：固定寬度列的高度>自適應寬度的列（因為絕對定位的元素會導致父元素高度塌陷，所以一定要保證固定寬度列的高度>自適應寬度的列，才能讓絕對定位元素放進父容器里）
