html5中的一些小知识点（CSS）

1、点击a标签周围区域就可以进入超链接： a标签 的css样式中的 display属性设置为block 就可以了

2、文字左右居中： text-align 属性值为 center

3、文字上下居中： line-height 为父元素的高度值

4、（1）导航栏的 li 如果设置 display 属性为 inline，所有条目在一行；如果设置 display 属性为 block，每个条目占据一行；inline-block 属性会使对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。例如，对 li 属性设置block属性为inline-block，可以使 li 显示为一行inline，li 中的内容就是一个单独的block（li 内的内容block显示），li中如果有 a 标签，可以设置 a 标签的 display 属性为 block， 以使点击 a 标签的周围就可以出发 a 的超链接。

（2）使条目显示在一行还可以设置 li 标签的 css 如下

1 li{
2     box-sizing: border-box;
3     float:left;
4     list-style-type: none;
5     inline-height:    // 父标签的高度
6 }

5、整个页面居中：对body设置如下css

 body{
     width:80%;
     margin:0 auto
 }

其中的width一定要设置为小于100%的宽度，否则默认整个页面的宽度（100%）展示，居中效果显示不出来

6、消除 li 标签前面的小圆点的方法：list-style-type:none;

7、以下css可以设置选中文字为白色，选中文字背景为粉红色

 ::selection{
     color:white;
     background: pink;
 }

8、css多个属性选择器 a[href][class="good"]　　含有href属性且类名为good的的a标签

9、div中img会比实际高度多出一部分，是因为img是一种类似与text的的元素，在img的结尾会加一个空白符。要去除高出的一部分，将img的display属性设置为block就可以解决

10、outline:0; 用来设置元素边框为0，在选中一个链接或使用tab键切换选中某一个链接之后会有边框出现，当设置了outline:0; 之后边框不再显示。

　　outline-width 用来指定边框宽度

　　outline-style 用来指定边框样式

　　outline-color 用来指定边框颜色　　

11、设置下标 position:relative; font-size:0.75em; top:0.5em;

　　设置上标 position:relative; font-size:0.75em; bottom:0.5em;

12、奇偶行设置样式 :nth-clild() 伪选择器

　　:nth-child(odd)　　奇数行

　　:nth-child(even) 　　偶数行

　　:nth-clild(2n+1)　　用一个表达式选择要渲染的行元素