4. CSS进阶

@规则

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

@import "./reset.css";

1. import
   @import “路径”
   表示导入另外一个css文件

在network中可以看见加载的css文件

2. charset

@charset “utf-8”;
这个指令必须要写到第一行;
告诉浏览器该css文件，使用的字符编码集是utf-8

web字体与图标

web字体

解决用户电脑上没有安装相应字体的问题

font-family:‘翩翩体-简’, ‘微软雅黑’, sans-serif;

当用户电脑上没有安装相应字体，强制让用户下载该字体，放到服务器上的

ttf后缀名文件–字体文件

使用font-face制作一个新字体

@font-face{
font-family:‘good night’;
src:url(‘字体文件存放的位置’);

}

后面设置font-family的时候，就下载该字体----临时下载，第二次访问重新下载

ctrl + r强制刷新

因为中文字体文件一般较大，所以应用不多
考虑用户体验

字体图标库：iconfont.cn

添加图标到项目之后. 复制在线链接—在线链接省略了协议名

<link href="//at.alicdn.com/t/font_2314517_gurjwm4ohnq.css">
字体图标是字体，到那时展示的样子像图片，它可以设置文字的所有特点

i元素表示图标，给它的类名加上字体图标文件里的class

bfc 块级格式化上下文

block fomatting context

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局;

• 常规流块盒在水平方向上，必须撑满包含块
• 常规流块盒在包含块的垂直方向上依次摆放
• 常规流块盒若外边距无缝相邻，则进行外边距合并
• 常规流块盒的自动高度和摆放位置，无视浮动元素

上面的是由视觉格式化模型规定的，准确的说是视觉格式化模型包括了块级格式化上下文，块级格式化上下文又包含了这些规则;

独立：不同的BFC区域，他们进行渲染时互不干扰；
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
具体规则：

1. 创建BFC的元素，它的高度计算需要考虑浮动元素;—可以用来解决高度坍塌(一般用overflow：hidden,副作用最小)
2. 创建BFC的元素，它的边框盒不会与浮动元素重叠
3. 创建BFC的元素，不会和它的子元素进行外边距合并（不同的BFC外边距时不可能合并的，只有在同一个BFC中的元素才会合并）

绝对定位的元素是不可能计算高度的，因为定位元素直接脱离文档流，无法计算；
而浮动元素虽然不会计算高度，但是清除了浮动或者创建BFC之后，就可以计算高度了；

BFC渲染区域：
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：

• 根元素 意味着，元素创建的BFC区域，覆盖了网页中所有的元素
• 浮动和绝对定位元素
• overflow不等于visible的块盒
• display:table
• 行块盒

布局

布局：排列页面中的区域

多栏布局

两栏布局和三栏布局

假设左边侧边栏，右边主区域
两栏布局：
左边左浮动，右边右浮动；左边定宽，如果内容太多，右边也需要定宽(是否定宽和设计师商量)，定宽的话可视区宽度减少的话可能会出问题；

右边区域设置BFC(overflow：hidden),这样右边会避开浮动盒子显示；如果需要两块有空隙，需要设置浮动元素的margin-right，而不是设置主区域的margin-left;

三栏布局

左右两边都是侧边栏，中间是主区域

左边左浮动，右边右浮动，并且左右两边定宽，中间是主区域;中间创建BFC，因为块盒无视浮动元素;而容器元素一般都是块盒

等高

通常侧边栏高度不够，需要设置两者等高；

1. css的弹性盒
2. js控制
3. 伪等高

元素书写顺序

• 先写浮动元素，后写常规流盒子

• 主区域代码靠前书写
  搜索引擎优化：从上往下读，它认为越在前面的部分越重要

.main{
margin: 0 300px;
}
再设置绝对定位解决;这种方法无法计算侧边栏，因为侧边栏永远脱离了常规流布局，无法计算高度;

后台页面的布局

浮动的细节

• 左浮动的盒子向上向左排列
• 右浮动的盒子向上向右排列
• 浮动盒子的顶边不得高于上一个盒子的顶边
• 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然会再向左或向右移动；

行高的取值

line-height
该属性值可以被继承;先计算像素值，再继承

1. px, 像素值

2. 无单位的数字
   先继承数字，然后根据当前元素的字体大小计算像素值;

3. em单位

1em表示当前元素的字体大小

4. 百分比

和em 一样