CSS进阶（二）@规则、web字体和图标、布局和行盒的垂直对齐

@规则

at-rule: @规则、@语句、CSS语句、CSS指令

1. import

@import “路径”;

导入另外一个css文件
注：在首页css文件最顶部进行导入
例如：

2. charset

@charset “utf-8”;

告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行

web字体和图标

web字体

用户电脑上没有安装相应字体，强制让用户下载该字体

使用@font-face指令制作一个新字体
注：渲染速度会减慢

字体图标

比图片效率高，老版浏览器可能无法显示。

iconfont.cn（字体图标库）

布局

多栏布局

边栏浮动，主区域设置BFC区域，不定宽，一般使用overflow：hidden来设置BFC区域

两栏布局

三栏布局

等高

1. CSS3的弹性盒
2. JS控制
3. 伪等高

元素书写顺序

主区域代码靠前书写，用定位来设置边栏。用来解决代码书写不能按逻辑来书写。

后台页面的布局

主容器固定为fixed
其内区域高度撑满可用100%

行盒的垂直对齐

多个行盒垂直方向上的对齐

给没有对齐元素设置vertical-align

预设值

数值

图片的底部白边

图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。

1. 设置父元素的字体大小为0（父元素里没有字体的前提下）
2. 将图片设置为块盒