CSS 基础

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 布局：

    

    

    

 .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）

    

    

    

.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）

    

 .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

    
        
        
        
        
    
    
         
         
    

1	2	3	4
5		6

（2）inline-block  （另：它不支持ie6、7浏览器，请注意，但是可以使用inline进行hack处理） 、float 、position:absolute左右布局 原理一样

     

           

1

           

2

 

     

 

.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.左边固定右边自适应布局

    

固定宽度区(sideBar)

    

自适应区(content)

（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