（1）display確定元素的顯示型別：
（2）positon確定元素的位置：
relative、absolute、fixed這三個屬性，可以結合 z-index 來設定層級。
1、table **布局：早期使用的布局，如今用得很少。
3、inline-block 布局：對外的表現是行內元素（不會獨佔一行），對內的表現是塊級元素（可以設定寬高）。
唯一的缺點是相容性問題：
上圖中可以看到， flex 布局不支援 ie9 及以下的版本。如果你的頁面不需要處理 ie瀏覽器的相容性問題，則可以放心大膽地使用 flex 布局。
flex 是一種現代的布局方式，是 w3c 第一次提供真正用於布局的 css 規範。
5、響應式布局。
是 css 中一種比較麻煩的屬性，涉及到 bfc 和清除浮動（面試的重點）。
**舉例：
下面這兩個並列的div1和div2，預設是在標準流中的：
在此基礎之上，如果給div1增加float: left屬性後，效果如下：
上圖中，可以看到，div1設定為浮動後，會脫離文件流，不會對div2的布局造成影響；但是div1不會脫離文字流，它會影響div2中文字的排列。
其實，這正是 float 屬性的作用。float 本身是用來做**混排、文字環繞的效果。
1、對自身的影響：
下面這兩個並列的div1和div2，設定為浮動之後的效果：（都是盡量靠左顯示的）
在上方**的基礎之上，增加div2的寬度之後，會發現，div2掉下來了：
2、對兄弟元素的影響：
3、對父級元素的影響：
對外的表現是行內元素（不會獨佔一行），對內的表現是塊級元素（可以設定寬高）。
思路：像文字一樣去排列 block 元素，沒有清除浮動等問題。
存在的問題：需要處理間隙。**舉例如下：
lang="en">
>
charset="utf-8">
name="viewport" content="width=device-width, initial-scale=1.0">
>document>
>
>.container
.div1
.div2
.div3
>
>
class="container">
class="div1">div1的inline-block 屬
class="div2">div2的inline-block 屬
class="div3">
琴棋書畫不會，洗衣做飯嫌累。
上面的**，存在兩個問題。
問題一：如果設定div2的寬度為 200px 之後，div2掉下來。
問題二：div1和div2設定為 inline-block之後，這兩個盒子之間存在了間隙。這是因為，此時的div1和div2已經被當成文字了。文字和文字之間，本身就會存在間隙。
為了去掉這個間隙，可以有幾種解決辦法：
辦法1：設定父元素container的字型大小為0，即font-size: 0，然後設定子元素div1、div2的字型font-size: 12px。
辦法2：在寫法上，去掉div1和div2之間的換行。改為：
class="div1">div1的inline-block 屬class="div2">div2的inline-block 屬
移動端用得較多，本文暫時先不講。 02 css背景與邊框 css揭秘
背景與邊框 一 半透明邊框 rgba hsla顏色 1.難題 假設我們想給乙個容器設定一層白色背景和一道半透明白色邊框，body 的背景會從它的半透明邊框透上來。我們最開始的嘗試可能是這樣的 border 但實際上看不到邊框，邊框去哪兒了？2.解決方案 儘管看起來並不像那麼回事，但我們的邊框其實是存...
集腋成裘 02 css基礎 01
css 層疊樣式表 cascading style sheets 級聯樣式表 1 選擇器 1.1 寫法 選擇器是乙個選擇標籤的過程.選擇器 1.2 基礎選擇器 標籤選擇器 類選擇器 id選擇器 萬用字元選擇器 en class g g class o o o o g g class l l clas...
02 css的選擇器
css的選擇器 1.基本選擇器 2.高階選擇器 基本選擇器包含 1.標籤選擇器 標籤選擇器可以選中所有的標籤元素，比如div，ul，li p等等，不管標籤藏的多深，都能選中，選中的是所有的，而不是某乙個，所以說 共性 而不是 特性 body 標籤選擇器 p span 2.id選擇器 選中id 同乙個...