title: CSS布局
date: 2016-09-14 22:55
tags: CSS
0x00 display 屬性
display屬性可以對元素的屬性進行轉換，使塊級元素具有行級元素的特征，使行級元素具有塊元素的特征。
屬性值|描述
:---:|:---:|:---
none|隱藏元素
inline|轉換行級元素
block|轉換塊級元素
inline-block|行內塊級元素
關于
inline常見的例子是：把 li 元素修改成 inline，制作成水平菜單。
去掉
img標簽產生的下邊距的方法是將img設置:display:block.或者設置:
inline-block
簡單的講設置了 inline-block 屬性的元素既擁有了 block 元素可以設置 width 和 height 的特性，又保持了inline元素不換行的特性。
inline-block 空白符
其實有 inline-block 空白符并不是怪 inline-block ，而是 inline ，因為默認情況下 inline 就是存在空白符的。
我們編寫代碼時寫的空格，換行都會產生空白符。在瀏覽器中，空白符是不會被瀏覽器忽略的，多個連續的空白符瀏覽器會自動將其合并成一個。
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a><a href="">5</a><a href="">6</a>
如上:1,2,3,4之間在瀏覽器中顯示時將存在空隙，4,5,6,之間將不存在空隙。
要去除空白符產生的間隙，可以通過設置 font-size 屬性控制各個元素間產生的間隙的大小。
.advertisement {
font-size: 0px;
}
.advertisement a{
font-size: 14px;
margin:0;
padding: 0;
}
inline-block 應用
網頁頭部菜單
一個應用場景是，除了使用 float 對 li 進行橫向導航布局外，還可以使用 inline-block 進行 li 導航設計。當然他們各有優劣，float屬性會造成高度塌陷，需要清除浮動等問題。而 inline-block 則會帶來 空白符 的問題。
內聯塊元素
除了菜單之外，一切需要行內排列并且可設置大小的需求就可以用inline-block來實現。
例如使用a標簽做按鈕時，需要設置按鈕的大小，我們就可以使用inline-block來實現。
inline-block 布局
一個簡單的三欄布局:
.news, .showProduct , .contact{
display: inline-block;
width: 30%;
height: 95%;
margin: 1em;
}
<div class="contentContainer">
<div class="content">
<div class="news">news</div>
<div class="showProduct">showProduct</div>
<div class="contact">contact</div>
</div>
</div>
vertical-align屬性會影響到inline-block元素，你可能會把它的值設置為 top 。
0x01 margin-auto 與 max-width
位塊級元素設置 width 可以阻止其從左到右撐滿容器，然后使用 margin-auto 屬性來使其水平居中。
#main{
width:200px
margin-auto;
}
唯一的問題是，當瀏覽器窗口比元素的寬度還要窄時，瀏覽器會顯示一個水平滾動條來容納頁面。在這種情況下使用 max-width 替代 width可以使瀏覽器更好地處理小窗口的情況。這點在移動設備上顯得尤為重要，
#main{
maxwidth:200px
margin-auto;
}
0x02 box-sizing [CSS3]
為了解決布局中的煩人的數學問題，box-sizing 應運而生。
box-sizing 有兩個屬性值:content-box , border-box
content-box
content-box :表示元素的寬度與高度不包括填充padding與邊框border的寬度與高度。對其寬度和高度的設定是對其內容的高度和寬的設定。當padding與border改變時將使其向外擴張。此時內容的高度和寬度不變。
border-box
border-box :表示元素的寬度與高度包括填充padding與邊框border的寬度與高度。對其寬度和高度的設定是對其本身實際高度和寬的設定。當padding與border改變時將使其向內容空間塌陷。此時內容的高度和寬度將隨之改變。
想要頁面上所有的元素都有如此表現，那么可以：
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
0x3 position 屬性
position 屬性一共有四個值: static , relative , absolute , fixed
static
默認值，元素將按照正常文檔流規則排列
relative
相對定位，元素元素仍然處于正常文檔流當中，元素原來的位置將會保留，此后以此元素原來的靜態位置作為參考點。
absolute
絕對定位,元素脫離正常文檔流，不在占據原來的位置，參考已定位 的父元素位置進行偏移。（如果父元素沒有設置定位屬性值(這個值要是非 static)會一層層向上找尋定位參考元素，可以一直追溯到 body 然后根據它的位置偏移）
fixed
固定定位，元素脫離正常文檔流，不再占用原來的位置，此后以瀏覽器的可視區域的四角作為參考點。
如果它一個元素是
position: static，那么它的絕對定位子元素會跳過它直接相對于body元素定位。
!Note 何為文檔流?
將窗體自上而下分成一行行，并在每一行中按從左到右的順序排放元素，即為文檔流。
有三種情況將使得元素脫離文檔流，分別是浮動(float left or right)、絕對定位(position:absolute)、固定定位(position:fixed)。
CSS 三種定位機制: 文檔流，浮動(float),定位(position)
使用浮動和定位能夠使元素脫離文檔流
0x04 float 浮動屬性
float 屬性可以控制元素浮動的方式為： left, right , none ,inherit 。
在 CSS 中，任何元素都可以浮動。浮動元素會生成一個
塊級框，而不論它本身是何種元素。
向右浮動，浮動元素將會逆序顯示，向左，則相反。
假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
使用浮動(float)的一個比較疑惑的事情是他們怎么影響包含他們的父元素的。如果父元素只包含浮動元素，那么它的高度就會塌縮為零。
值得注意的是，在同一個父元素中，浮動元素對非浮動元素的影響是，浮動元素將會覆蓋非浮動元素的空間，進而擠壓非浮動元素的內容。
圖片溢出處理
使用 float 一個最簡單的場景就是文字對圖片的環繞,但是這里也存在一個問題，就是當圖片的大小超過了包含該圖片的容器，而且圖片本身是浮動的，那么此時，圖片將會溢出到容器外面。
解決思路是:
- 對容器使用
overflow:auto屬性，那么容器將會自動調整大小區包裹圖片
.img { float:right;}
.containerImg{overflow:auto;}
- 對圖片本身進行控制。
.container img{
float:right;
width:50%;
}
甚至還能同時使用 min-width 和 max-width 來限制圖片的最大或最小寬度。
清除浮動
clear屬性
為了讓 float 元素不影響其他的元素，可以使用 clear 屬性清除浮動屬性，但是 clear 屬性不是作用于 浮動 元素而是作用于下一元素的。
將浮動元包裹在一起
另外一種是的浮動元素不影響其它元素的方法，就是不清楚浮動而是將所有浮動的元素放在一個父元素中。
使用空 div
我們還可以在浮動元素與非浮動元素之間放置一個空的 div,并為其設置 clear 屬性。
<style type="text/css">
.clear{clear:both}
</style>
<div>
<div class="float1"></div>
<div class="float2"></div>
<div class="clear"></div>
<p></p>
</div>
0x05 visibility 屬性
| 屬性值 | 描述 |
|---|---|
| visible | 顯示元素 |
| hidden | 隱藏元素 |
| collapse | 當在表格元素中使用時，可以隱藏一行或者一列，但被行列占據的空間會留給其他內容使用，該值應用于其它元素，會被呈現為 hidden |
visibility:hidden 和 display:none
使用CSS display:none 屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”,原有空間回收;而使用 visibility:hidden 屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在。
0x06 overflow 屬性
| 屬性值 | 描述 |
|---|---|
| visible | 溢出內容出現在元素框之外；(默認) |
| hidden | 隱藏溢出內容 |
| auto | 自適應索要顯示的內容，需要時產生滾動條 |
| scroll | 溢出內容被修剪且始終顯示滾動條 |
此外， 使用 overflow-x 可以橫向顯示樣式， overflow-y 將縱向顯示樣式。
0x07 flexbox
新的 flexbox 布局模式被用來重新定義CSS中的布局方式。
0x08 所有瀏覽器下的CSS透明度
下面這種方式可以實現所有瀏覽器下的透明度設置：
.transparent {
zoom:1;
filter:alpha(opacity=50);
opacity:0.5;
}
Zoom 屬性是IE瀏覽器的專有屬性，Firefox等瀏覽器不支持。
