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

　　1 、 CSS 选择器

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

　　2 、 CSSReset

　　HTML

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

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

　　Neat.css

　　3 、盒子布局

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

　　常见的盒子模型有块级盒子 (block) 和行内盒子 (inline-block) ，与盒子相关的几个属性有： 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 ，就可以使该元素脱离文档流，并以某种参照坐标进行偏移。其中， releave

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

　　是绝对定位，它以离自己最近的定位父容器作为参照进行偏移 ; 为了对某个元素进行定位，常用的方式就是设置父容器的 poistion:relative ，因为相对定位元素在不设置

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

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

　　6 、弹性布局

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

　　属性将失效。

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

　　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 、 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}