CSS基础知识汇总

1、CSS选择器

CSS选择器即通过某种规则来匹配相应的标签，并为其设置CSS样式，常用的有类选择器、标签选择器、ID选择器，后代选择器，群组选择器，伪类选择器，兄弟选择器，属性选择器等

2、CSS Reset

HTML标签在不设置任何样式的情况下，也会有一个默认的CSS样式，而不同内核浏览器对于这个默认值的设置则不尽相同，这样可能会导致同一套代码在不同浏览器上显示的效果不一致，而出现兼容性问题，因此，在初始化时，需要对常用标签样式初始化，使其默认样式统一，这就是CSSReset，即样式重置

3、盒子布局

盒模型是CSS比较重要的概念，也是CSS布局的基石，常见的盒模型有块级盒模型和行内盒模型，与盒子相关的几个属性有：margin、border、padding和content等。这些属性的作用是设置盒子与盒子之间的关系以及盒子与内容之间的关系，其中，只有普通文档流中块级盒子的垂直外边距才会发生合并，而行内盒子，浮动盒子或绝对定位之间的外边距不会合并，另外，box-sizing属性的设置会影响width和height的计算

4、浮动布局

设置元素的float属性为left或right，就能使该元素脱离普通文档流，向左或者向右浮动，一般在做宫格布局时会用到，如果子元素全部设置为浮动，则父元素是塌陷的，这时就需要清除浮动，清除浮动方法很多，常用的方法是在元素末尾加空元素设置clear：both，更高级的就是给父元素设置before/after来模拟空元素，还可以直接设置overflow属性为auto/hidden来清除浮动，除浮动可以实现宫格布局，行内盒子inline-block和table也可以实现同样的效果

5、定位布局

设置元素的position属性为relative/absolute/fixed,就可以使元素脱离文档流，并以某种参照坐标进行偏移，其中，relative是相对定位，是以自己原来的位置进行偏移，偏移后，原来的空间不会被其他元素占用，absolute是绝对定位，它以自己最近的定位父容器作为参照进行偏移，为了对某个元素进行定位，常用的方式就是设置父容器的position：relative，因为相对定位元素在不设置top和left值时，不会对元素位置产生影响，因为相对定位元素在不设置top和left值时，不会对元素位置产生影响，fixed即固定定位，它则以浏览器窗口为参照物，PC网页底部悬停的banner一般都可以通过fixed定位来实现，但fixed属性在移动端有兼容性问题，因此不推荐使用，可替代的方案是，绝对定位+ 内部滚动

6、弹性布局

弹性布局即flex布局，定义了flex的容器一个可伸缩容器，首先容器本身会根据自身会根据容器中的元素动态设置自身大小，然后当flex容器被应用一个大小时，将会自动调整容器中的元素适应新大小，flex容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素的排列方向和是否支持元素的自动换行，有了这个神器，做页面就方便很多，注意，设置为Flex布局后，子元素的float、clear和vertical-align属性失效

7、CSS3动画

CSS3中规范引入两种动画，分别是transition和animation，transition可以让元素的CSS属性值的变化在一段时间内平滑的过度，形成动画效果，为了使元素的变换更加丰富多彩，CSS3还引入transfrom属性，它可以对元素进行平移，旋转，放大，缩小，倾斜，等操作，来实现2D和3D变换效果，transition还有一个结束事件transitionEnd，该事件是在CSS完成过度后触发，如果过度在完成之前被移除，则不会触发transitionEnd

animation需要设置一个@keyframes来定义元素以哪种形式来变换，然后再通过动画函数让这种变换平滑的进行，从而达到动画效果，动画可以被设置为永久循环演示，设置animation-play-state:paused可以暂停动画，设置animation-fill-mode:forwards可以让动画完成后定格在最后一帧，另外，还可以通过JS监听animation的开始，结束和重复播放时的状态，分别对应三个事件，animationStart、animationEnd，animationIteration，当播放次数设置为1时，不会触发animationIteration 。

和 transition相比，animation 设置动画效果更灵活更丰富，还有一个区别是：transition只能通过主动改变元素的css值才能触发动画效果，而animation一旦被应用，就开始执行动画。另外，HTML5 还新增了一个动画API，即requestAnimationFrame，它通过JS来调用，并按照屏幕的绘制频率来改变元素的CSS属性，从而达到动画效果。

8、BFC

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，比如：内部滚动就是BFC，当一个父容器的overflow-y设置为auto时，并且子容器的长度大于父容器时，就会出现内部滚动，无论内部元素怎么滚动，都不会影响父元素以外的布局，这个父容器的渲染区域就叫BFC，满足一下条件之一就可触发BFC：

根元素，即HTML元素

float的值不为none

overflow的值不为visible

display的值为inline-block、table-cell、table-caption

position的值为absolute或fixed

9、Sprite，Iconfont，@font-face

对于大型站点，为了减少http请求的次数，一般会将常用的小图标排到一个大图中，页面加载时只需请求一次网络，
然后在css中通过设置background-position来控制显示所需要的小图标，这就是Sprite图。

Iconfont，即字体图标，就是将常用的图标转化为字体资源存在文件中，通过在CSS中引用该字体文件，然后可以直接用控制字体的css属性来设置图标的样式，字体图标的好处是节省网络请求、其大小不受屏幕分辨率的影响，并且可以任意修改图标的颜色。

@font-face是CSS3中的一个模块，通过@font-face可以定义一种全新的字体，然后就可以通过css属性font-family来使用这个字体了，即使操作系统没有安装这种字体，网页上也会正常显示出来。

10、CSS Hack

早期，不同内核浏览器对CSS属性的解析存在着差异，导致显示效果不一致，比如 margin
属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍，也就是说margin-left:20px;在ie6中距左侧元素的实际显示距离是40px，而在非ie6的浏览器上显示正常。因此，如果要想让所有浏览器中都显示是20px的宽度，就需要在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的，这种方式就是css
hack， 对于ie6中的margin应用hack就会变成这样：.el {margin-left:20px;_margin-left:10px}

兼容各大浏览器的 css hack 如下：

.element{
    color:#000;   // 
}