css規(guī)范：?css書寫規(guī)范 - 追求極致 - 博客園

（1）Class 和 ID?

使用語義化、通用的命名方式；
使用連字符 - 作為 ID、Class 名稱界定符，不要駝峰命名法和? " _ "? ；
id采用駝峰式命名(不要亂用id)scss中的變量、函數(shù)、混合、placeholder采用駝峰式命名 ；
避免選擇器嵌套層級(jí)過多，盡量少于 3 級(jí)；
避免選擇器和 Class、ID 疊加使用；

（2）媒體查詢（Media query）的位置

將媒體查詢放在盡可能相關(guān)規(guī)則的附近。不要將他們打包放在一個(gè)單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會(huì)被大家遺忘。

（3）去掉小數(shù)點(diǎn)前面的0： 0.9rem => .9rem

1.css3新增屬性

（1）過渡 transition
（2）animation 動(dòng)畫
（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）媒體查詢 @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