理解CSS

写在前面的话：对于web开发，html完成网页的structure，css完成网页的presentation，js完成网页的behavior，今天就来说一说css，通过理解一些css的基础概念，能够更好的实现一些我们想要的功能。

====正文开始=====

　　当通过各个html标签完成网页的结构（structure），接下来就需要使用css完成网页的展示（presentation）。展示实现的功能无非就是设置各个html标签的大小、样式，各个html标签在网页中如何摆放等功能，因此可以总结为如下几个基本的问题：

　　1.如何找到各个html标签----css selector

　　2.如何看待各个html标签----css box model

　　3.如何布置各个html标签的位置----float和position

　　4.如何设置各个html标签的样式----基础样式和css3动态样式

　　下面就对照上面四个问题，一一进行说明。

1.如何找到各个html标签----css selector

　　能够正确找到我们需要操作的html标签， 是后面一切操作的前提条件。

　　css的基本语法为：selector{property：value}，例如#testDiv{font-size:16px}，其中选择器（selector）很多，只介绍一些主要的，其他的一些也要练习练习。

　　（1）id、class选择器

　　　　如果知道一个html标签的id，那么可以通过#标签id来选择；如果知道一个html标签的class，那么可以通过.标签class来选择。

　　（2）类型选择器

　　　　例如要选择body标签，可以直接写body{property：value}来设置。

　　（3）群组选择器

　　　　如果要选择多个，可以用逗号隔开。如#test1,#test2就可以选择id为test1和id为test2的html标签。

　　（4）包含选择符

　　　　使用空格隔开，例如#test1 p{}表示id为test1的标签内所有的p标签。

　　注意：有没有空格表示的含义不同，例如.class1.class2表示类名同时为class1和class2的标签；.class1 .class2表示.class1内的所有.class标签。

　　（5）伪类与伪对象：如a：hover{}表示当鼠标移至a标签上时，显示的样式。

　　（6）通配符：* 表示所有的对象。

2.如何看待各个html标签----css box model

　　通过css selector找到了各个html标签，但是想要能够随心所欲的对他们的位置布局进行设置，还是需要理解css是如何看待各个html标签的，这就是css box model。

　　（1）css把所有html标签看成box，这个box由width、height、padding、bord、margin组成，如下图所示：

　　其中css中设置的width和height指的是content的width和height。

　　（2）虽然css把所有的html标签看成box，但是box和box也是有不同的：有两种不同的box：block-leve box和in-line box，其中block-level box默认情况下占据一行，前后都有换行符，如div默认情况下就是block-level box；in-line box默认情况下按照内容决定大小，因此设置margin和padding无效，通过line-height设置高度。通过设置display属性，可以人为的改变html标签为block-level box或者in-line box。

　　例子：将一个div中的内容垂直居中，可以设置line-height与height相等，再设置text-align=center来实现。

3.如何布置各个html标签的位置----float和position

　　所有的html标签看成为box，这些box默认情况下，是按照默认的文档流来排列的；可以通过float和position改变默认的文档流。

（1）float：通过设置html标签的float属性，可以其脱离原来默认的文档流，例如float：left，表示该标签会往左移动，直到触碰到包含它的标签的边缘或者其他设置为float属性的标签；通过clear属性可以消除float的影响。

（2）position：该属性可以设置三个值，分别为relative、absolute、fixed，其中relative相对于其原始位置的移动；absolute脱离文档流，相对应最近的设置过position的标签，如果没有的话，则相对于初始的包含元素；fixed相对于viewport。

4.如何设置各个html标签的样式----基础样式和css3动态样式

　　css的基础样式，如设置font-size、color等等实现一些基本的功能；

　　css3增加了一些动态样式设置方法：分别为transition和animation，可以实现更加多样的功能；当对css3的动态属性理解的比较透彻之后，如果不想每次都从头写css，可以使用animate.css等简化操作，不过还是自己写的更加灵活。　　

备注：可以通过css3的media query实现响应式布局，不过从大的方面来看响应式布局可以分成三个层次：

　　　（1）设置多套ui，这种效果最好，一般情况下，对于电脑端和手机端设置不同的ui。

　　　（2）使用css3的 media query：例如对于手机端不同的屏幕大小，通过media query来判断，进而设置不同的css属性值。

　　　（3）使用百分数：由于手机端屏幕的大小差异并不是特别大，因此，对于一些元素的高度和宽带通过设置百分比，即可达到自适应要求，因此很多情况下，也不去用media query了。

（完）

文档信息

• 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
• 本文为原创文章，欢迎转载，后续本博客会不断更新，因此请保留该文档信息。
• 本文地址：http://www.cnblogs.com/wuguanglei/p/4295518.html