css规范： css书写规范 - 追求极致 - 博客园
（1）Class 和 ID
使用语义化、通用的命名方式；
使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和 " _ " ；
id采用驼峰式命名(不要乱用id)scss中的变量、函数、混合、placeholder采用驼峰式命名 ；
避免选择器嵌套层级过多，尽量少于 3 级；
避免选择器和 Class、ID 叠加使用；
（2）媒体查询（Media query）的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。
（3）去掉小数点前面的0： 0.9rem => .9rem
1.css3新增属性
（1）过渡 transition
（2）animation 动画
（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
超出显示省略号
(单行)： 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;
--- 连续字母或数字的强制换行：white-space:normal; word-break:break-all;
（15）文字阴影 text-shadow
（16）颜色 rgba hsla
2.双飞翼布局 -- 左右固定，中间自适应
（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 + 负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 + 负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浏览器，请注意，但是可以使用inline进行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.左边固定右边自适应布局
<div class="outer">
<div class="sidebar">固定宽度区(sideBar)</div>
<div class="content">自适应区(content)</div>
</div>
（1） 将左侧div浮动，右侧div设置margin-left
.sidebar{float: left;width:200px;height: 150px; background: #BCE8F1;}
.content{margin-left:200px;height:100px;background: #F0AD4E;}
（2）固定区采用绝对定位，自适应区设置margin
（3）tabel （父元素高度会随着子元素最高的一边变化）
.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()计算属性
.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.父子元素高度都不确定，实现垂直居中
（1） position
.parentElement{position:relative;}
.childElement{ position: absolute; top: 50%; transform: translateY(-50%); }
（2）flex --- 设置 align-items:center
网友评论