好程序员Web前端分享前端CSS篇

　　今天好程序员跟你们分享的文章是CSS篇。Web前端技术由html、css和javascript三大部分构成，而咱们在学习它的时候每每是先从某一个点切入，而后不断地接触和学习新的知识点，所以对于初学者很难理清楚整个体系的脉络结构。今天小编将为你们带来关于Web前端中CSS的介绍，下面咱们一块儿来看一看吧~

　　一、CSS选择器

　　CSS选择器即经过某种规则来匹配相应的标签，并为其设置CSS样式，经常使用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(before/after)、兄弟选择器(+~)、属性选择器等等。

　　二、CSSReset

　　HTML

　　标签在不设置任何样式的状况下，也会有一个默认的CSS样式，而不一样内核浏览器对于这个默认值的设置则不尽相同，这样可能会致使同一套代码在不一样浏览器上的显示效果不一致，而出现兼容性问题。所以，在初始化时，须要对经常使用标签的样式进行初始化，使其默认样式统一，这就是CSS

　　Reset，即CSS样式重置，好比：*{margin:0,padding:0}就是最简单CSSReset，关于CSS重置请参考：

　　Neat.css

　　三、盒子布局

　　盒子模型是CSS比较重要的一个概念，也是CSS布局的基石。

　　常见的盒子模型有块级盒子(block)和行内盒子(inline-block)，与盒子相关的几个属性有：margin、border、padding和content

　　等，这些属性的做用是设置盒子与盒子之间的关系以及盒子与内容之间的关系。其中，只有普通文档流中块级盒子的垂直外边距才会发生合并，而行内盒子、浮动盒子或绝对定位之间的外边距不会合并。另外，box-sizing

　　属性的设置会影响盒子width和height的计算。

　　四、浮动布局

　　设置元素的float属性值为left或

　　right，就能使该元素脱离普通文档流，向左或向右浮动。通常在作宫格布局时会用到，若是子元素所有设置为浮动，则父元素是塌陷的，这时就须要清除浮动，清除浮动的方法也不少，经常使用的方法是在元素末尾加空元素设置clear:both，

　　更高级一点的就给父容器设置before/after来模拟一个空元素，还能够直接设置overflow属性为auto/hidden来清除浮动。除浮动能够实现宫格布局，行内盒子(inline-block)和table也能够实现一样的效果。

　　五、定位布局

　　设置元素的position属性值为relative/absolute/fixed，就可使该元素脱离文档流，并以某种参照坐标进行偏移。其中，releave

　　是相对定位，它以本身原来的位置进行偏移，偏移后，原来的空间不会被其余元素占用;absolute

　　是绝对定位，它以离本身最近的定位父容器做为参照进行偏移;为了对某个元素进行定位，经常使用的方式就是设置父容器的poistion:relative，由于相对定位元素在不设置

　　top和left值时，不会对元素位置产生影响;fixed

　　即固定定位，它则以浏览器窗口为参照物，PC网页底部悬停的banner通常均可以经过fixed定位来实现，但fixed属性在移动端有兼容性问题，所以不推荐使用，可替代的方案是：绝对定位+内部滚动。

　　六、弹性布局

　　弹性布局即Flex布局，定义了flex的容器一个可伸缩容器，首先容器自己会根据容器中的元素动态设置自身大小;而后当Flex容器被应用一个大小时(width和height)，将会自动调整容器中的元素适应新大小。Flex容器也能够设置伸缩比例和固定宽度，还能够设置容器中元素的排列方向(横向和纵向)和是否支持元素的自动换行。有了这个神器，作页面布局的能够方便不少了。注意，设为Flex布局之后，子元素的float、clear和vertical-align

　　属性将失效。

　　七、CSS3动画

　　CSS3中规范引入了两种动画，分别是transition和animation，transition

　　可让元素的CSS属性值的变化在一段时间内平滑的过渡，造成动画效果，为了使元素的变换更加丰富多彩，CSS3还引入了transfrom

　　属性，它能够经过对元素进行平移(translate)、旋转(rotate)、放大缩小(scale)、倾斜(skew)

　　等操做，来实现2D和3D变换效果。transiton还有一个结束事件

　　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属性，从而达到动画效果。

　　八、BFC

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

　　根元素，即HTML元素

　　float的值不为none

　　overflow的值不为visible

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

　　position的值为absolute或fixed

　　九、Sprite，Iconfont，@font-face

　　对于大型站点，为了减小http请求的次数，通常会将经常使用的小图标排到一个大图中，页面加载时只需请求一次网络，

　　而后在css中经过设置background-position来控制显示所须要的小图标，这就是Sprite图。

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

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

　　十、CSSHack

　　早期，不一样内核浏览器对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}