css进阶--@规则+web字体和图标+布局（二栏+三栏+等高+主区域代码 靠前）

@规则：

at-rule：亦称@规则、@语句、css语句、css指令
1：import 引用：@import"路径" 导入另外一个css文件
** 特：CSS中 link 和@import 的区别是？**
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.
**2：charset 引用：@charset “utf-8”; **
特：告诉浏览器该css文件，使用的字符编码集是utf-8，且必须写在css文件中第一行

web字体和图标

1：web字体
（1）用户电脑上没有安装相应字体，强制让用户下载该字体。
使用@font-face制作新字体

2：字体图标
（1）字体图标iconfont

块级格式化上下文：

全称：block Formatting Context 简称BFC
独立的渲染区域，常规流块盒的布局。


解决高度坍塌：

布局

多栏布局：
（1）两栏布局：

第一种不推荐：利用float属性

第二种：推荐overflow：hidden

（2）三栏布局：


第一步：设置左右浮动，新建一个三栏布局，但是一易见出现高度坍塌问题。
效果：
第二步：clearfix解决高度坍塌。但是易见中间元素边框出现问题

效果：
第三步：由于文字是行盒元素。创建BFC避开浮动盒子。解决边框问题。

等高布局

1：方法：
（1）：css3的弹性盒
（2）：js控制
（3）：伪等高

伪等高：常见使侧边栏与中央部分等高：
效果：
代码：

主要区域代码靠前书写：
css方法：将中间主要内容部分挂在页面上，给margin留出左右空间。再将左右部分绝对定位挂在页面上
js方法：。。
css方法：。。

后台页面布局：