css2

@规则

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

1. import

@import"路径";

导入另外一个css文件。比如在使用一个css文件的时候，要在该文件前面先引用reset文件，可以在该文件开头写一个import"reset.css";

2. charset

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

web字体和图标

web字体

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

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

<style>
        @font-face{
            font-family: "翩翩体-简";
            src: url("./字体文件的位置");
        }
        p{
            font-family: "翩翩体-简";
        }
    </style>

字体图标

iconfont.cn 阿里巴巴做的一个字体图标库

该图标是一个字体，不是图片，可以设置颜色、大小等

<i class="iconfont icon-ai214"></i>
        <i class="iconfont icon-tubiaozhizuomobanyihuifu-"></i>
        <i class="iconfont icon-ditu"></i>

块级格式化上下文

全称 block formatting context，简称BFC，是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局(常规流块盒在水平方向上必须撑满包含块、在包含块的垂直方向上依次摆放、若外边距无缝相邻，则进行外边距合并、自动高度和摆放位置无视浮动元素)

BFC渲染区域：
是由某个HTML元素创建，以下元素会在其内部创建BFC区域：
· 根元素（html元素），意味着，元素创建的BFC区域覆盖了网页中所有的元素
· 浮动和绝对定位元素
· overflow不等于visible的块盒

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

1. 创建BFC的元素，它的自动高度需要计算浮动元素
   在高度坍塌的时候，可以不用clearfix，直接让高度坍塌的元素创建BFC就可以，比如设置为绝对定位、浮动，但是一般不使用这两种方法，因为会影响到其他的布局，所以一般会使用副作用最小的方式：overflow：auto、hidden（最常用）可以在直接在clearfix里面只写overflow：hidden。。
   但是副作用最小的还是清除浮动。所以一般还是使用清除浮动。

2. 他的边框盒不会和浮动元素重叠

3. 不会和他的子元素进行外边距合并（不同的BFC不会进行外边距合并）

布局

多栏布局

两栏布局：侧边栏定宽，左浮动（或右浮动），右边内容栏不定宽，宽度自适应，创建BFC区域，就会自动避开侧边栏浮动元素

三栏布局：同上

等高

一般是侧边栏内容较少，主区域内容较多。所以处理等高问题一般是处理侧边栏，侧边栏的高度不够。

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

元素书写顺序

一般是要先写侧边栏（浮动先写），如果必须要主区域先写：主区域留出左右的margin（可以不定宽），然后将左右两个边栏设为绝对定位放到左右两边留出的位置

后台页面布局

行盒的垂直对齐

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

给没有对齐的元素设置一个css属性：vertical-align

预设值
数值

图片的底部白边

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

1. 设置父元素的字体大小为0（有副作用）
2. 将图片设置为块盒

居中总结

居中：盒子在其包含块中居中

行盒（行块盒）水平居中

直接设置行盒（行块盒）的父元素 text-aligh:center

常规流块盒水平居中

定宽，设置左右margin为auto

绝对定位元素的水平居中

定宽，设置左右坐标为0（left right为0），将左右margin设置为auto

实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况

单行文本的垂直居中

设置文本所在元素的行高为整个区域的高度（line-height=height）

行块盒或块盒内多行文本的垂直居中

没有完美方案，设置padding上下相等，达到类似效果

绝对定位的垂直居中

高度固定，设置上下坐标为0（top、bottom），将上下margin设置为auto

样式补充

display:list-item

（ul li就有这个属性）
设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会覆盖另一个盒子，元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列（次盒子就是前面那个小圆点，主盒子就是后面的文字）

涉及的css属性：

1. list-style-type
   设置次盒子中内容的类型（可以继承）

2. list-style-position
   设置次盒子相对于主盒子的位置

3. 速写属性list-style：*** ***;

清空次盒子
list-style:none;

图片失效时的宽高问题

如果img元素的图片链接无效，img的元素的特性和普通行盒一样，无法设置宽高，如果要设置可以将盒子设置为行块盒

行盒中包含行块盒或可替换元素

行盒的高度与它内部的行块盒或可替换元素的高度无关（跟字体大小有关）

text-align:justify

出最后一行外，分散对齐（有时候会在单词截断的地方出现很多空白，justify会将空白平均分布）
如果要让最后一行也分散对齐可以设置**::after{设置内容为空，display为inline-block，宽度100%}

制作一个三角形