css規(guī)范：?css書(shū)寫(xiě)規(guī)范 - 追求極致 - 博客園
（1）Class 和 ID?
使用語(yǔ)義化、通用的命名方式收恢；
使用連字符 - 作為 ID武学、Class 名稱(chēng)界定符祭往，不要駝峰命名法和? " _ "? ；
id采用駝峰式命名(不要亂用id)scss中的變量火窒、函數(shù)硼补、混合、placeholder采用駝峰式命名 熏矿；
避免選擇器嵌套層級(jí)過(guò)多已骇，盡量少于 3 級(jí)；
避免選擇器和 Class票编、ID 疊加使用褪储；
（2）媒體查詢(xún)（Media query）的位置
將媒體查詢(xún)放在盡可能相關(guān)規(guī)則的附近。不要將他們打包放在一個(gè)單一樣式文件中或者放在文檔底部慧域。如果你把他們分開(kāi)了鲤竹，將來(lái)只會(huì)被大家遺忘。
（3）去掉小數(shù)點(diǎn)前面的0： 0.9rem => .9rem
1.css3新增屬性
（1）過(guò)渡 transition
（2）animation 動(dòng)畫(huà)
（3）transform ：scale昔榴、rotate辛藻、translate、skew
（4）選擇器 [attribute^=value]? first-of-type? nth:child? :last-child
（5）漸變
（6）filter 濾鏡
（7）彈性布局 flex
（8）柵格布局 grid
（9）盒模型 box-sizing
（10）媒體查詢(xún) @media
（11）陰影 box-shadow:h-shadow??v-shadow??blur??spread??color??inset;
（12）border-image? border-radius
（13）background-clip? borderground-origin? ?background-size
（14）換行? word-break:normal? /? ?break-all? ?/? ?keep-all
? ?超出顯示省略號(hào)
(單行)： over-flow:hidden;text-overflow:ellipsis;white-space:nowrap;
(多行)： over-flow:hidden;text-overflow:ellipsis;
? ? ? ? ? ? ? display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;?
????????????? --- 防止第三行文字顯示：padding:0 10px;line-height:30px;height:30px;
? ? ? ? ? ? ? --- 連續(xù)字母或數(shù)字的強(qiáng)制換行：white-space:normal; word-break:break-all;
（15）文字陰影 text-shadow
（16）顏色 rgba hsla
2.雙飛翼布局 -- 左右固定互订，中間自適應(yīng)
（1）flex 布局：
<div class="content">
????<div class="sub"></div>
????<div class="main"></div>
????<div class="extra"></div>
</div>?.content { display: flex; }
?.sub { width: 200px; height: 500px; background: blue; }
?.main { flex: 1; height: 500px; background: red; }
?.extra { width: 180px; height: 500px; background: green; }
（2）<!-- 圣杯布局(float + 負(fù)margin + padding + position) -->
<div class="content">
????<div class="main"></div>
????<div class="sub"></div>
????<div class="extra"></div>
</div>
.main{ float: left; width: 100%; height: 500px; background:red; }
.sub{ position: relative; float: left; left: -200px; width: 200px; height: 500px; margin-left: -100%; background:blue; }
.extra{ position: relative; float: left; right: -180px; width: 180px; height: 500px; margin-left: -180px; background:green; }
.content{ padding: 0 180px 0 200px; position:?absolute; }
（3）<!-- 雙飛翼布局(float + 負(fù)margin + margin) -->
<div class="content">
????<div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>?.content{ float: left; width: 100%; height: 500px; background:red; }
?.sub{ float: left; width: 200px; height: 500px; margin-left: -100%; background:blue; }
?.extra{ float: left; width: 180px; height: 500px; margin-left: -180px; background:green; }
?.main{ margin: 0 180px 0 200px; }
3.左右布局
（1）table
<table class="sTable">
????<tr>
????????<td class="col-4 c1">1</td>
????????<td class="col-4 c2">2</td>
????????<td class="col-4 c3">3</td>
????????<td class="col-4 c4">4</td>
????</tr>
????<tr>
?????????<td class="col-4 c5" colspan="2">5</td>
? ? ? ? ?<td class="col-4 c6" colspan="2">6</td>
????</tr>
</table >
（2）inline-block? （另：它不支持ie6吱肌、7瀏覽器，請(qǐng)注意仰禽，但是可以使用inline進(jìn)行hack處理） 氮墨、float 、position:absolute左右布局?原理一樣
? ? ? <div class="wrap">
? ? ? ????? <div class="col-4 c1">1</div>
? ? ? ????? <div class="col-4 c2">2</div>?
? ? ? </div>?
.col-4 { display: inline-block; *display: inline; *zoom: 1; //ie6坟瓢、7hack width: 50%; height: 30px; border: 1px solid #999; font-size: 14px; }
?.wrap { margin: 10px auto; font-size: 0px; }
3.左邊固定右邊自適應(yīng)布局
<div class="outer">
????<div class="sidebar">固定寬度區(qū)(sideBar)</div>
????<div class="content">自適應(yīng)區(qū)(content)</div>
</div>
（1） 將左側(cè)div浮動(dòng)勇边，右側(cè)div設(shè)置margin-left
.sidebar{float: left;width:200px;height: 150px; background: #BCE8F1;}
.content{margin-left:200px;height:100px;background: #F0AD4E;}
（2）固定區(qū)采用絕對(duì)定位，自適應(yīng)區(qū)設(shè)置margin
（3）tabel （父元素高度會(huì)隨著子元素最高的一邊變化）
.outer3{display: table;width:100%; border: 1px solid red;}
.sidebar3{display:table-cell;width:200px; background: #BCE8F1;}
.content3{display:table-cell; background: #F0AD4E;}
（4）雙float + calc()計(jì)算屬性?
.outer4{overflow: hidden; border: 1px solid red;}
.sidebar4{float:left;width:200px;background: #BCE8F1;}
.content4{float:left;width:calc(100% - 200px);background: #F0AD4E;}
（5）flex
.outer7{display: flex; border: 1px solid red;}
.sidebar7{flex:0 0 200px;height:150px;background: #BCE8F1;}
.content7{flex: 1;height:100px;background: #F0AD4E;}
4.父子元素高度都不確定折联，實(shí)現(xiàn)垂直居中
（1）?position
.parentElement{position:relative;}?
.childElement{ position: absolute; top: 50%; transform: translateY(-50%);? }
（2）flex --- 設(shè)置 align-items:center
