CSS新增属性下

字体：

字体的格式：.ttf文件（外部引入文字样式）

1.如何引入自己下载好的外部字体：

@font_face{

font-family:"字体名字";

src:"路径";

font-weight:normal;

font-style:normal

}

2.字体图标：是一个图标（例如百度的logo，csdn的logo等），但是遵循所有的文本的属性。字体图标经常应用在移动端布局/pc端布局

如何引用：

1）把iconfont文件夹放在自己的站点里面

2）通过link将iconfont这个文件夹里面的iconfont.css文件引入

如何使用：给对应元素起类名即可

<div class="iconfont icon-图标名字"></div>

图标名字回到demo_fontclass.html页面查找

3.伪元素选择器：

字体图标实现的基本原理就是配合字体图标库向元素里面的正前方插入内容。基本原理是使用伪元素选择器

伪类选择器有哪些：

E::before：向元素里面的正前方插入内容(必须配合content使用E::before{content:"插入内容"})

E::after：向元素里面的正后方插入内容(必须配合content使用E::after{content:"插入内容"})

E::first-line：匹配元素第一行

E::first-letter：匹配元素文本中的第一个字符

4.如何解决高度塌陷：

产生原因：由于浮动或者是定位产生的元素脱离文档流，不占页面空间，导致父元素的高度降低，后面的元素上去补位置，这种情况就是高度塌陷

如何解决：

1）给父元素高度（如果元素过多的话会有溢出）

2）给补位元素添加清除浮动带来的影响：clear:both;(ruguo meiyou buweiyuansu,zhiyou y如果没有补位元素，只有一个子元素的情况无法解决)

3）给父元素后面补一个元素ps:补位元素必须是一个块元素（不能平白无故的给元素中补一个元素，js获取的时候这个节点可能会被获取到）

4）overflow:hidden触发BFC，块级格式化上下文，形成一个独立的区域不影响到外界（但凡多出去的内容都会被隐藏掉）

5）万能清除法：

用法：

.类名:after{

content:"";

display:block; /*因为添加的元素默认是个行内元素，所以需要调整为块级元素*/

clear:both/*清除浮动*/

/*隐藏content中填写的内容*/

/*方法1（官方代码）*/

visibility:hidden;

height:0px;

/*方法2（不太建议）*/

opacity:0;

height:0px

}