Html+Css中的小知识点需要注意

1.在设置一个div盒子时，body会有一个默认8像素的外边距。需要用margin：0；来清除标签默认样式。

2.fonts文件中的图标样式需要放在和css同级目录下；

引入fonts图表样式文件；

<link rel="stylesheet" href="./css/fonts/iconfont.css">

在所需要填加图表样式的地方，用i标签进行包裹一下；

 <i class="iconfont icon-dingwei"></i> 河南

 效果图：

3.阿里的字体图标在使用的时候，不需要去复制 @font-face，只需要把文件夹里边的 iconfont.css引入进来就可以了。

4.进行左右浮动：

float：left;

float: right;

5.快速进行无序列表的书写的快捷书写方式

 ul>li*8

效果图：

6.清除li前面的黑色点

代码：

list-style: none;

效果： 

 

 7.清除ul的默认内外边距样式

清除前：

清除后：

ul{
    margin:0;
    padding:0;


}

8.把li中的文字变成在一行的显示

 利用浮动

float:left;

 效果：

9.文本垂直居中的实现

利用行高（line-height）和高（height）相等可以实现，其中也是继承的表现。 

height: 30px;
line-height: 30px;

 10.只设置边框右边线

 border-right: 1px solid red;

 11.去下划线

 text-decoration: none;

12.设置边框和文本的间距

padding: 0 10px;

13.去掉第一个和第九个的右边框

用nth-child();样式

由下面代码可以看出，nth-child();可以针对单个进行设置样式，比较灵活。

 /* 对第1个li中的a的右边框进行清除 */
        .header .header_right ul li:nth-child(1) a:nth-child(1){
            border-right: 0;
        }
         /* 对第9个li中的a的右边框进行清除 */
        .header .header_right ul li:nth-child(9) a:nth-child(1){
            border-right: 0;
        }

效果图：