前端小技巧个人小笔记

1.【带有padding和border,且需要并排的DIV】######

box-sizing：border-box;
padding再怎么爱搞事也得乖乖听话
妈妈再也不担心with:50%;的情况下，div不在一列上！

2.【四角弧形矩形可以自定义每个角的弧度】######

border-radius: 20px 30px 60px 70px / 10px 40px 50px 80px;
[MDN测试页面]

3.【表格单元格等宽】######

可以使用table-layout: fixed。默认情况下是auto。如果不设置宽度，则随机分布宽度与高度。
更详细的表述戳[table-layout属性研究传送门]

• 格子被撑开的情况：
  1 ) 在默认情况下，设置了white-space: nowrap;
  2）在默认情况下，单元格中的图片宽度大于单元格的宽度
  3）某些预设格式
  
  
  
  （白色区域为table的witdh）
  4）在设置了table-layout: fixed的情况下，用px为单位赋值，且单元格的总width > table 的width
  
  

内容超出了格子的情况：
1）设置了table-layout: fixed的情况下，还设置了white-space: nowrap;

（白色区域为table的witdh）

4. 【表格边框处理】######

[传送门]

5.【距离物体有一段距离的边框】- 移动端######

可以使用 outline-offset: 15px;
[demo传送门]

6. 【背景大图永远居中】######

 1）方法一：css
  width:XXX;(填入所需要的数值)
  height: XXX;(填入所需要的数值)
  background-image: url("../img/index_bg.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
 注意：它的其中一个父对象必定要设置max-width，否则不生效！设置成max-with
  2 ）方法二：js
  var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;      var bgContainer = document.getElementById("js-bg-container");       bgContainer.style.left = -(2200-clientWidth)/2+'px';

7.【子串匹配属性选择器】######

eg: [class^=”icon-“]
优势：=使用这个的好处是，对于 icon 类的标签，我们再也不需要对其加一个对于 icon 的公用类名，只需要类名是以 icon- 开头就可以匹配所有 icon ，省了一个类名。
缺点：不兼容IE6
so, 移动端项目可以使用

8.【transform的Matrix(矩阵)用法】######

transform: matrix(水平缩放比例, 0, 0, 垂直缩放比例, 水平偏移距离, 垂直偏移距离)
[详细解释传送门]

9.【背景大图居中显示】######

background-position: center

10.【display:inline-block顶部对齐】######

vertical-align: top;

11. 【相对居中】######

1）方法一，缺点不兼容IE8

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%); 
-webkit-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);

2）方法二，缺点，需要知道图片的高度与宽度

position: absolute;
left: 50%;
top: 50%;
margin-left:  图片宽度/2;
margin-top:  图片高度/2;