CSS reset
** 1允耿、placeholder 顏色重置 **
:-moz-placeholder { color:#ccc !important; }
::-moz-placeholder { color:#ccc !important; }
:-ms-input-placeholder { color:#ccc !important; }
:-webkit-input-placeholder { color:#ccc !important; }
2借笙、 input 右測 小叉刪除
input::-ms-clear{ display:none; }
** 3、 按鈕按下后高亮暗色**
html{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
居中布局-水平居中
1较锡、inline-block + text-align
兼容IE6业稼，7 加 *zoom:1;
** 2、table + margin **
** 3蚂蕴、absolute + transform **
transform IE6,7,8 兼容性問題低散，高級瀏覽器也要加私有前綴
** 4、 flex + justify-content**
或者不用justify-content,用margin骡楼。設(shè)置 .child{ margin: 0 auto; }
IE6,7,8 flex兼容問題
居中布局-垂直居中
**1熔号、table-cell + vertical-align **
<div class="parent">
<div class="child">DEMO</div>
</div>
CSS:
.parent{ display: table-cell; vertical-align: middle; }
vertical-align可以作用于inline,inline-block 以及 table-cell元素。
這種做法兼容IE8+
**2鸟整、absolute + transform **
CSS：
.parent{ position：relative; }
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
兼容性
**3引镊、flex + align-items **
.parent{
display:flex;
align-items: center;
}
居中布局-水平、垂直同時居中
**1篮条、inline-block + text-align + table-cell + vertical-align **
兼容IE8+
**2弟头、absolute + transform **
**3、flex + justify-content + align-items **
多列布局
**1涉茧、float + margin **
.left { float:left; width: 100px; }
.right { margin-left: 120px; }
- 優(yōu)點： 容易理解
- 缺點：IE6 不兼容赴恨，3像素； right是沒有浮動的降瞳，如果right內(nèi)容中有清楚浮動就會產(chǎn)生 bug
修改版：float + margin + (fix)
- 優(yōu)點： 兼容性好
- 缺點：層級多
.left 里面設(shè)置position： relative嘱支； 是為了提高left div的層級。
**2挣饥、float + overflow **
.left{
float: left;
width: 100px;
margin-right: 20px;
}
.right{ overflow: hidden; //觸發(fā)BFC }
缺點：IE6不支持
3除师、table
.parent{
display:table;
width: 100%;
table-layout:fixed; //好處加速table的渲染，實現(xiàn)布局優(yōu)先
}
.left, .right {
display: table-cell;
}
.left{ width:100px; padding-right:20px; }
**4扔枫、flex **
flex:<'flex-grow'>||<'flex-shirink'> || <'flex-basis'>
.parent{
display: flex ;
}
.left {
width: 100px;
margin-right: 20px;
}
.right{ flex: 1 ; } //等價于=flex:1 1 0; 增長因子和收縮因子都為1汛聚，基礎(chǔ)寬度為0,那么剩余寬度都分配給right
缺點： CSS3 兼容性。根據(jù)內(nèi)容判斷短荐，性能會有問題倚舀，做小范圍布局叹哭，不適合大范圍布局。
布局 - 不定寬 + 自適應(yīng)
**1痕貌、float + overflow **
.left{
float: left;
width: 200px;
margin-right: 20px;
}
.right{ overflow: hidden; //觸發(fā)BFC }
**2风罩、table **
.parent{
display:table;
width: 100%;
}
.left, .right {
display: table-cell;
}
.left{
width:0.1%; //寫的夠小就行，不寫1px的原因是IE8會有問題
padding-right:20px;
}
.left p{ width : 200px;} //用內(nèi)部元素撐開舵稠，寬度可以不定
兼容性：IE8+
3超升、flex 同上，強大哺徊，主要問題是兼容性問題
繼續(xù)延生：
三列不定寬 + 自適應(yīng) 與兩列的做法一樣
等分布局
1室琢、float
.parent{ margin-left ：-20px; //為父元素增加20px寬度 }
.column{
float : left;
width: 25%;
padding-left : 20px;
box-sizing : border-box;
}
缺點：結(jié)構(gòu)和樣式稍微有點耦合性
2、table
.parent-fix{ margin-left ：-20px; //為父元素增加20px寬度 }
.parent{
display : table;
width : 100%;
table-layout : fixed;
}
.column{
float : left;
width: 25%;
padding-left : 20px;
box-sizing : border-box;
}
3落追、fix
.parent{
display : flex;
}
.column{
flex: 1;
}
.column+.column{ margin-left: 20px; } //選擇2盈滴，3，4
等高需求
1轿钠、table
2巢钓、flex
如上面自適應(yīng)的例子，flex 天然等高
3疗垛、float
.parent{ overflow : hidden; }
.left, .right{
padding-bottom : 9999px;
margin-bottom : -9999px;
}
優(yōu)點是兼容性比較好
缺點是偽等高 不是正真意義上的登高
全屏布局
實現(xiàn)方案
- position
- flex
1竿报、 position
<style>
html,body,.parent{
height: 100%;
overflow: hidden;
}
.top, .left, .right, .bottom{
position: absolute;
border: 1px solid red;
}
.top{
top: 0; left: 0; right: 0;
height: 100px;
}
.left{
top: 100px; left: 0; bottom: 50px;
width: 200px;
}
.right{
overflow: auto;
top: 100px; left: 200px; bottom: 50px; right: 0;
}
.bottom{
bottom: 0; left: 0; right: 0;
height: 50px;
}
.right .inner{ min-height: 1000px; }
</style>
HTML:
<div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right">right
<!-- 讓右側(cè)滾動起來 -->
<div class="inner"></div>
</div>
<div class="bottom">bottom</div>
</div>
2、 flex
<style>
html,body,.parent{
height: 100%;
overflow: hidden;
}
div{ border: 1px solid blue;}
.parent{display: flex; flex-direction:column;}
.top{ height: 100px;}
.bottom{height: 50px;}
.middle{flex:1; display: flex;}
.middle .left{ width: 200px;}
.middle .right{ flex: 1; overflow: auto; }
.middle .right .inner{ min-height: 1000px; }
</style>
HTML:
<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right">right
<!-- 讓右側(cè)滾動起來 -->
<div class="inner"></div>
</div>
</div>
<div class="bottom">bottom</div>
</div>
flex IE9以下不支持
***Conclusion 總結(jié) ***
響應(yīng)式布局
**1继谚、viewport **
<meta name="viewport" content="width=device-width
, initial-scale=1.0 //縮放比
, user-scalable=no "/> //防止用戶手動縮放
**2烈菌、@media 媒體查詢 **
@media screen and (max-width:320px){
// 視窗寬度 <= 320px
.className{.....}
}
@media screen and (min-width:769px){
// 視窗寬度 >= 769px
.className{.....}
}
@media screen and (min-width:769px) and (max-width:1000px) {
// 769px <= 視窗寬度 <= 1000px
.className{.....}
}
頁面優(yōu)化
1、為什么要優(yōu)化花履？
- 提升網(wǎng)頁響應(yīng)速度
- 對搜索引擎芽世、屏幕閱讀器友好
- 提高可讀性，可維護性
2诡壁、如何優(yōu)化济瓢？
- 減少請求
- 減少文件大小
- 頁面性能
- 可讀性，可維護性
3妹卿、減少請求
圖片合并
-
CSS文件合并
- 多個CSS文件合并為一個
- 少量css樣式內(nèi)聯(lián)
- 避免使用import的方式引入css 文件
4旺矾、減少文件大小
-
減少圖片大小
- 選擇合適的圖片格式
-png
-jpg - 壓縮圖片
-ImageOptim
-ImageAlpha
-JPEGmini
-...
- 選擇合適的圖片格式
CSS 值縮寫
-margin
-padding
-border
-border-radius
-font
-background省略值為0的單位及小數(shù)點前面的0
顏色值最短表示
-red
-rgb(255,0,0)
-rgba(0,0,0,.5)
-#333-
CSS選擇器合并
.a,.b{ background:red ;}
-
文件壓縮
- YUI Compressor
- cssmin
- ....
減少標簽的數(shù)量
-
選擇器的長度
<div class="m-nav"> <ul> <li><a href="">導(dǎo)航一</a></li> <li><a href="">導(dǎo)航二</a></li> ... </ul> <div>...</div></div>
.m-nav ul li a:hover{ color : red; } 應(yīng)該修改為：.m-nav a:hover{ color : red; } -
避免秏性能的屬性
-
expression
.class{ width: expression(this.width>100? '100px' : 'auto'); } -
filter
.class{ filter: alpha(opacity=50); } border-radius
box-shadow
gradients
-
-
給圖片設(shè)置寬高, 盡量不要縮放
<img src="xx.jpg" alt="alt" width="400px" height = "300px" >
頁面渲染時，圖片沒有下載完成夺克，如果不設(shè)置寬高或有縮放箕宙，當圖片下載完成，頁面就會有回流重繪铺纽，損耗時間柬帕。
- 所有表現(xiàn)用css實現(xiàn)
-
可讀性，可維護性
- 規(guī)范
- 語義化
- 盡量避免Hack
- 模塊化頁面
- 注釋
規(guī)范與模塊
1、文件規(guī)范
-
文件分類
- 通用類
- 業(yè)務(wù)類
-
文件的引入
- 行內(nèi)樣式 不推薦并不表示不能用（表現(xiàn)與結(jié)構(gòu)分離）
- 外聯(lián)引入
- 內(nèi)聯(lián)引入
- 避免在CSS中使用@import
-
文件本身
- 文件本身 如： 由 小寫字母陷寝、數(shù)字锅很、中劃線 組成
- 編碼 UTF-8
2、注釋規(guī)范
- 塊狀注釋
- 單行注釋
- 行內(nèi)注釋
3凤跑、命名規(guī)范
- 分類命名
例如：
布局樣式用 g-
模塊樣式用 m-
命名格式
-大小寫 建議：小寫
-長度 權(quán)衡長度和可-
語義化命名
- 以內(nèi)容語義命名
建議用內(nèi)容語義命名
4爆安、書寫規(guī)范
- 單行與多行
二選一 遵守之
-
空格與分號
- 縮進 2or4個
- 規(guī)則內(nèi)空格
-
分號
- 保留最后一個屬性值的分號（建議保留，避免后面樣式添加帶來的問題）
-
Hack方式
-
同意各瀏覽器的Hack方式
IE6 ： _property : value
IE6/7 ： *property : value/* IE7顯示#888仔引，IE6顯示#fff鹏控，其他瀏覽器顯示#000 */
.m-list{ color:#000; *color:#888; _color:#fff; } //注意書寫順序 不要濫用Hack
-
-
值格式
- color
- url()
5、其他規(guī)范
- 文檔聲明
- 閉合
- 屬性
- 層級
- 注釋
- 大小寫
模塊化
** 1肤寝、什么是模塊化 **
- 一系列相關(guān)聯(lián)的結(jié)構(gòu)組成的整體
- 帶有一定語義而非表現(xiàn)
** 2、怎么做抖僵？ **
- 為模塊分類命名（如 .m-, .md-）
- 以一個主選擇器開頭 （ 模塊根節(jié)點 ）
- 使用以主選擇器開頭的后代選擇器（ 模塊子節(jié)點 ）
/* 模塊1樣式 */
模塊1{....}
模塊1 子元素1{....}
模塊1 子元素2{....}
/* 模塊2樣式 */
模塊2{....}
模塊2 子元素2{....}
模塊2 子元素2{....}
** 3鲤看、怎么做？- case **
<!-- NAV MODULE -->
<div class="m-nav">
<ul>
<li class="z-crt"><a href="">index</a></li>
<li><a href="#">link1</a></li>
...
</ul>
</div>
<!-- /NAV MODULE -->
// 樣式
/* 導(dǎo)航模塊 */
.m-nav{} /* 模塊容器 */
.m-nav li, .m-nav a{}
.m-nav li{}
.m-nav a{}
.m-nav .z-crt a{} /* 交互狀態(tài)變化 */
模塊的擴展：
<!-- NAV-1 MODULE -->
<div class="m-nav m-nav-1">
<ul>
<li class="z-crt"><a href="">index</a></li>
<li><a href="#">link1</a></li>
...
</ul>
</div>
<!-- /NAV-1 MODULE -->
** 4耍群、為什么要模塊化义桂？ **
- 利于多人協(xié)同開發(fā)
- 便于擴展和重用
- 可讀性、可維護性好
