这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天
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。
其中css中设置的width和height指的是content的width和height。
虽然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来实现。
