CSS基础

标签：str   动画   绝对定位   平移   osi   orm   sla   标签   flow   

　　1、选择器

   css的选择器很多种，常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器（befor/after）、兄弟选择器(+~)、属性选择器等等。

　　2、定位

  定位一般有相对定位（relative）、绝对定位（absolute）、固定定位（fixed）,relative和absolute在移动端用得最多，fixed在移动端有兼容性问题，因此不推荐使用，在移动端替代fixed的方案是absolute+内部滚动。

　　3、浮动

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

　　4、盒子模型

  盒子模型是css最重要的一个概念，也是css布局的基石。常见的盒子模型有块级（block）和行内盒子(inline-block)，盒子最关键的几个属性包括margin border padding 和content,这几个元素可以设置盒子与盒子之间的关系以及盒子与内容之间的关系。还有一个问题是计算盒子的大小，需要注意的是，box-sizing属性的设置会影响盒子的width和height。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框 浮动框或绝对定位之间的外边距不会合并。

　　5、Flex布局

  Flex布局的容器是一个伸缩容器，首先容器本身会更具容器的元素动态设置自身大小；然后当Flex容器被应用一个大小时（width和height），将会自动调整容器中的元素适应新的大小。Felx容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素的排列方向（横向和纵向）和是否支持元素的自动换行。有了这个神器，作业面可以方便很多。注意，设为Felx布局以后，子元素的float clear 和vertical-align属性将失效。

　　6、transition和transform

  应用transform可以对元素进行平移(translate)、旋转(rotate)、放大缩小（scale）、倾斜(skew)等处理，而transition使css属性值（包括transform）在一段时间内平滑的过度。使用transition和transform就可以实现页面的滑动切换效果。

　　7、动画Animation

  Animation首先需要设置一个动画效果，然后以这个动画方式来改变元素的css属性之变化，动画可以被设置为永久循环演示。和transition相比，animation设置动画效果更灵活更丰富，而这还有一个区别：transition只能通过主动改变元素的css值才能触发动画效果,而animation一旦被应用，就开始执行动画。

　　8、Sprit图

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

　　9、字体图标iconfont

     所谓字体图标就是将常用的图标转化为字体资源存在文件中，通过CSS中应用该字体文件，然后可以直接通过控制字体的css属性来设置图标的样式。

CSS基础

标签：str   动画   绝对定位   平移   osi   orm   sla   标签   flow   

原文地址：http://www.cnblogs.com/dfghjkl/p/7058802.html