日常使用css总结

对于很多的css，日常经常使用到，但是面试的时候或者突然问起这个时候，就会忘记。刚好今天浏览了一个回答，我也给自己总结一下，以防忘记。

参考链接地址：https://zhuanlan.zhihu.com/p/84212558?from_voters_page=true

 

1、css水平居中：

行内元素: text-align: center
块级元素: margin: 0 auto
绝对定位：{position:absolute, left:50%,  transform:translateX(-50%)}
弹性布局：{display:flex, justify-content: center}

　css垂直居中：

line-height：{height: 100px,  line-height: 100px }
绝对定位：{position：absolute,  top:50%,  transform:translateY(-50%)}
弹性布局：{ display:flex, align-items: center}
栅格布局：{display:table,  display:table-cell, vertical-align: middle;}

 

2、transform：

　该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate：平移   translateX():X轴方向平移  translateY():Y轴方向平移
scale：缩放
rotate：旋转
skew： 倾斜旋转

3、盒模型：主要区别就是宽度width的不同

盒模型：content+padding+border+margin
IE盒子模型： content+padding+border
标准的盒子模型: width就是content

　可以通过 box-sizing来改变盒模型

 box-sizing: content-box 是W3C盒子模型
 box-sizing: border-box 是IE盒子模型

4、清除浮动：

1： .clear{ clear:both} 
2： 父级添加 { overflow:hidden }
3： 给父级添加伪类
4： 使用双伪类

5、css选择符有哪些

1: id选择器（#myid）;
2: 类选择器（.myclassname）;
3: 标签选择器（div,h1,p）;
4: 相邻选择器（h1+p）;
5: 子选择器（ul>li）;
6: 后代选择器（li a）;
7: 通配符选择器（*）;
 
*   可继承的样式： font-size font-family color;
*   不可继承的样式：border padding margin width height background-color;