今天好程序员给大家分享的文章就是CSS。Web前端技术由html、css和javascript三部分组成，而我们在学习的时候往往是从某一点开始，然后不断接触和学习新的知识点，初学者很难理解整体系统的上下文结构。今天小编就为大家带来Web前端CSS的介绍。一起来看看吧~ 1.CSS选择器 CSS选择器通过一定的规则匹配对应的标签。并为其设置CSS样式，常用的有类选择器、标签选择器、ID选择器、后代选择器、组选择器、伪类选择器（前/后）、兄弟选择器（+~）、属性选择器等等。 2。CSSReset HTML 标签在不设置任何样式的情况下也会有一个默认的CSS样式，不同的核心浏览器对于这个默认值的设置也不同。会导致同一套代码在不同浏览器上的显示效果不一致，造成兼容性问题。因此在初始化时，需要对常用标签的样式进行初始化，使其默认样式统一。这就是CSS Reset，即CSS样式重置。例如：*{margin:0,padding:0}是最简单的CSSReset，请参考： Neat.css 3。盒子布局 盒子模型是CSS的一个重要概念，是CSS布局的基石。 常见的盒模型包括块级盒（block）和行内块（inline-block）。与框相关的几个属性有：margin、border、padding、content 等，这些属性的作用是设置框与框的关系以及框与内容的关系。其中，只会合并正常文档流中块级框的垂直边距，行内框、浮动框或绝对定位之间的边距不会合并。另外，box-sizing 属性的设置会影响盒子宽高的计算。 4。浮动布局 将元素的float属性值设置为left或 right，可以使元素向左或向右浮动，脱离正常的文档流。一般在做网格布局的时候会用到。如果所有的子元素都设置为浮动，那么父元素就会塌陷。这时候就需要清除浮动了。有很多方法可以清除浮动。常用的方法是在元素末尾添加一个空元素Setclear:both, 更进阶一点的是给父容器设置before/after模拟一个空元素，也可以直接设置overflow属性为auto/hidden清除浮动。除了浮动实现网格布局外，inline-block和table也可以实现同样的效果。 5.定位布局 将元素的position属性值设置为relative/absolute/fixed，可以使元素脱离文档流，偏移一些参考坐标。其中，release 是相对定位，它是利用自己原来的位置进行偏移，偏移之后，原来的空间不会被其他元素占用；absolute 是绝对定位，它使用距离自己最近的定位父容器作为参考进行偏移；为了定位一个元素，常见的方式是设置父容器的poistion:relative，因为在没有设置 top和left值的情况下，相对定位元素不会影响元素的位置；fixed 是指固定定位，以浏览器窗口为参照物。一般PC网页底部的悬停banner可以通过固定定位实现，但是固定属性在移动端有兼容性问题，不推荐使用，替代方案是：绝对定位+内部滚动。（宽度和高度），将自动调整容器中的元素以适应新的尺寸。flex容器还可以设置缩放比例和固定宽度，还可以设置元素在容器中的排列方向（水平和垂直）以及是否支持元素自动换行。有了这个神器，做页面排版就方便多了。注意设置flex布局后，子元素的float、clear、vertical-align 属性将失效。 7。CSS3动画 CSS3规范引入了两种动画，即过渡和动画。transition 可以让一个元素的CSS属性值的变化在一段时间内平滑过渡，形成动画效果。为了让元素的变换更加丰富多彩，CSS3还引入了transfrom 的属性，可以平移、旋转（rotate）、放大缩小（scale）、倾斜（skew） 等，实现2D和3D变换效果。transiton也有结束活动 transitionEnd，该事件在CSS完成过渡后触发，如果过渡在完成前被移除，则不会触发transitionEnd。 animation需要设置一个@keyframes来定义元素会变换成哪种形式， 然后使用动画函数让这个变换平滑，从而达到动画效果，动画可以设置成a永久循环演示。设置animation-play-state:paused 为暂停动画，设置animation-fill-mode:forwards 为动画完成后停在最后一帧。另外，还可以通过JS监听动画的开始、结束、重复播放状态，分别对应三个事件： animationStart、animationEnd、animationIteration。注意当播放次数设置为1时，不会触发animationIteration。 比transition更加灵活丰富。还有一个区别：transition 只能通过主动改变元素的css值来触发动画效果，而动画一旦被应用就会开始执行。动画片。此外，HTML5还增加了一个新的动画API，即 requestAnimationFrame，通过JS调用，根据屏幕的绘制频率改变元素的CSS属性，从而实现动画效果。 8.BFC BFC在页面上是一个隔离独立的容器，容器内的子元素不会影响外层元素。例如：内部滚动是一个BFC。当父容器的overflow-y设置为auto，子容器的长度大于父容器时，会发生内部滚动。无论内部元素如何滚动，都不会影响父容器。对于其他布局，父容器的渲染区域称为BFC。满足以下条件之一即可触发BFC： 根元素，即HTML元素 float的值不为none overflow不可见 display为inline-block，table-cell的值，table-caption position是绝对的还是固定的 9、Sprite、Iconfont、@font-face 对于大型站点，为了减少http请求次数，常用小图标一般排列到大图，页面加载时只需要请求一次网络， 然后在css中设置background-position来控制需要显示的小图标，也就是Sprite贴图。 iconfont，即字体图标，是将常用的图标转换成字体资源，存放在文件中。通过在CSS中引用字体文件，可以直接使用控制字体的css属性来设置图标的样式。字体图标的好处节省网络请求，大小不受屏幕分辨率影响，图标颜色可任意修改。 @font-face是CSS3中的一个模块，通过@font-face可以定义一个新的字体，然后通过css属性font-family就可以使用这个字体，即使在运行时没有安装该字体system，在网页上就能正常显示了。 10。CSSHack 早期，不同内核的浏览器对CSS属性的解析存在差异，导致显示效果不一致。比如在ie6中margin 属性显示的距离会比其他浏览器显示的宽度大2倍，也就是margin-left:20px；ie6中left元素实际显示距离为40px，非ie6浏览器正常显示。因此，如果想让所有的浏览器都显示20px的宽度，就需要在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，从而达到应用不同CSS样式的目的。第一种方式是css hack。对于ie6中的marginapplicationhack，会变成这样：.el{margin-left:20px;_margin-left:10px}
