1.display
display總結(jié)：https://developer.mozilla.org/en-US/docs/Web/CSS/display
block： div,p,form,html5中的新元素：header,footer,section
inline：span,a
none：script
display:none;//javascript中在不刪除元素的情況下隱藏或顯示元素
display:none;不保留元素的本來空間
visibility:hidden;會保留
list-item
table
inline-block
flex
制作水平菜單：li元素改成inline
2.margin:auto;
水平居中：
給塊級元素設(shè)置width鞠抑，再設(shè)置左右外邊距為auto，可水平居中
缺點(diǎn)：當(dāng)瀏覽器窗口比元素的寬度窄時(shí)驶社，瀏覽器會顯示一個(gè)水平滾動條來容納頁面
改進(jìn)方法：
用max-width代替width
（所有主流瀏覽器包括IE7+在內(nèi)均支持max-width）
3.盒模型
.little{
width:500px;
margin:20px auto;
}
.big{
width:500px;
margin:20px auto;
padding:50px;
border-width:10px;
}
改進(jìn)方法：
CSS屬性：box-sizing
加了box-sizing:border-box;后奔脐，此時(shí)內(nèi)邊距和邊框不再增加它的寬度
（box-sizing是新屬性，要注意加前綴星澳，課啟用特定瀏覽器實(shí)驗(yàn)中的特性）
改進(jìn)后：
.little {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.big {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*{
/*支持IE8+*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
4.position
position的值：
static：默認(rèn)值疚顷，任意 position: static;的元素不會被特殊的定位。
relative：和static表現(xiàn)一樣禁偎，除非加了額外的屬性腿堤；在一個(gè)相對定位（position屬性的值為relative）的元素上設(shè)置 top、right如暖、bottom和left
屬性會使其偏離其正常位置笆檀。其他的元素則不會調(diào)整位置來彌補(bǔ)它偏離后剩下的空隙。
fixed：相對于視窗定位盒至，即使頁面滾動误债，它還會在相同的位置
固定定位的元素不會保留它原本在頁面應(yīng)有的空隙浸船。
移動瀏覽器對fixed支持很差
解決方案：http://bradfrostweb.com/blog/mobile/fixed-position/
absolute：與fixed類似，區(qū)別是相對于最近的positioned祖先元素寝蹈。如果絕對定位的元素沒有positioned的祖先元素李命，則是相對于文檔的body，且會隨著頁面的滾動而移動
positioned值指的是除了static的值以外的值
5.position例子
.container {
position: relative;
}
nav {
position: absolute;
left: 0px;
width: 200px;
}
section {
/* position is static by default */
margin-left: 200px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 70px;
background-color: white;
width: 100%;
}
body {
margin-bottom: 120px;
}
這個(gè)例子在容器比nav元素高時(shí)可以正常工作箫老，
比nav高度低的時(shí)候封字，nav會溢出到容器外邊
6.float
float，可用于實(shí)現(xiàn)文字環(huán)繞圖片
img {
float: right;
margin: 0 0 1em 1em;
}
7.clear
clear屬性用于控制浮動
具體表現(xiàn)參考：http://zh.learnlayout.com/clear.html
8.清除浮動（clearfix hack）
（現(xiàn)代瀏覽器：chrome耍鬓，火狐4阔籽，Opera，Safari牲蜀，）
當(dāng)浮動內(nèi)容比非浮動內(nèi)容高時(shí)笆制，需要加清除浮動
.clearfix{
overflow: auto;
}
參考鏈接：http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
.clearfix{
/*專門為ie6的*/
overflow: auto;
zoom: 1;
}
某些瀏覽器需要特殊解決方式，下面的鏈接中的基本可解決所有主要的瀏覽器的問題
9.百分比寬度
百分比是相對于包含塊的計(jì)量單位
10.媒體查詢
響應(yīng)式設(shè)計(jì)（Responsive Design）讓網(wǎng)站針對不同的瀏覽器和設(shè)備響應(yīng)不同的顯示效果的策略涣达。
媒體查詢?yōu)轫憫?yīng)式設(shè)計(jì)的工具
@media screen and (min-width:600px) {
nav {
float: left; width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
參考鏈接：
- http://mediaqueri.es/
- https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries（需翻墻）
- https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/
移動端自適應(yīng)：
<meta name="viewport" content="width=device-width,initial-scale=1"/>
移動端的代碼一般都把寬度寫成百分比在辆，圖片寬度寫成百分比會根據(jù)屏幕自動縮放，寫一個(gè)最大值即可度苔。
11.網(wǎng)格鋪滿瀏覽器
- 使用浮動（較困難）
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
- inline-block（較容易）
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}
使IE6和IE7支持inline-block：
inline-block會觸發(fā)hasLayout
https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
12.inline-block布局
- vertical-align屬性會影響到inline-block元素匆篓，要設(shè)置成top
- 需設(shè)置每一列的寬度
- 若html源代碼中元素之間有空格，則列和列之間會產(chǎn)生空隙
13.column
實(shí)現(xiàn)文字的多列布局：
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
注意：CSS columns是新標(biāo)準(zhǔn)寇窑，需要使用前綴鸦概，IE9和Opera Mini不支持
14.flexbox
暫時(shí)還沒有接觸過，mark一下甩骏，下邊是非常牛的布局
.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
垂直居中布局
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
15.框架
blueprint
Bootstrap
