css进阶复习笔记（三）

css进阶

一、@规则

别名：at-rule css指令 css语句 @规则
1、import
@import“路径”：作用是导入另外一个文件

2.charset
@charset“utf-8”：

告诉该文件浏览器该css文件使用的字符编码集是utf-8

这个指令必须写到第一行，如果没有中文可以不写

二、web字体和图标

1、web字体

（用的比较少，因为要单独加载）

解决用户电脑上没有安装需求字体的问题，强制让浏览器下载字体文件（后台下载）

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

font-family：‘good night’

src:url（字体文件位置）

2、字体图标

iconfont网站：字体图标网站

常用的有阿里字体图标库 基本上用到的图标都能找到还是免费的。官网有使用教程：

习惯上用i元素做图标

图标看做一个字体，字体元素所有的属性都可以在字体图标上用

三、bfc格式化上下文

全称：blockfor formatting

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

常规流块盒在水平方向上必须撑满块盒

常规流在包含块的垂直方向上依次摆放

常规流块盒外边距无缝相邻，则进行外边距合并

常规流块盒自动高度和摆放位置 无视浮动元素

bfc渲染区域

这个区域由某个HTML元素创建 ，以下元素会在其内部创建bfc区域

根元素

浮动和绝对定位元素
overflow不等于visible的块盒

表格单元格 行块盒也会创建

独立的

不同的bfc区域，他们进行渲染事互不干扰

创建的bfC元素，隔绝了他们内部和外部的联系，内部的渲染不会影响到外部

具体规则：

四、字体的参考线

这部分是扩展，深入理解字体是怎么形成的

Super：该元素的基线与父元素的上基线对齐

Sub：该元素的基线与父元素的下基线对齐

texe-top：该元素的virtual-area的顶边，对齐父元素的text-top

text-bottom：该元素的virtual-area的底边对齐父元素txet-bottom

Top：该元素的virtual-area的顶边，对齐父元素的顶边（该行中的最高顶边）对齐的是line-box的顶边

Bottom：该元素的virtual-area的底边对齐符元素的底边（该行中的最低底边），对齐line-box的底边

行盒组合起来可以形成多行，每一行的区域叫做line-box，line-box是顶边这一行的最高顶边，底边是该行盒的最低底边

实际上，一个元素的实际高度（高度自动），高度计算通过line-box计算

行盒：inline-box

行框：line-box

数值：相对于基线的偏移量，向上为正数，向下为负数

百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度

Line-box是承载内容的必要条件，以下情况不生成行框

1，某元素内部没有任何的元素

2，某元素的字体大小为0

可替换元素和行块盒基线

图片：基线位置位于图片的下外边距

表单元素：基线位置在内容底边

五、浏览器兼容性

产生原因

市场竞争

标准版本的变化

Chrome s4只支持部分css3的功能

产商前缀

比如谷歌旧版本：box-sizing，webkit-box-siziing，border-box

市场竞争，标准没有发布

标准仍在讨论，浏览器厂商希望支持

Ie：-ms-

Chrome：Safari：webkit—

Firefox：-moz-

---

注：浏览器在处理样式或者元素的时候，遇到无法识别的代码时，直接滤过

谷歌浏览器的滚动条样式，-webkit-scrollbar

实际上，在开发中用div加css来实现滚动条

css hack

根据不同浏览器ie，设置不同的样式和元素

样式

Ie中css的特殊前缀

*属性：兼容ie6.ie7，谷歌浏览器不兼容

-（下划线）属性，兼容ie5，ie6

Background：red/9兼容ie5到ie10

属性加/0兼容ie8到ie10

属性值/9/0兼容ie9到ie10

ie5 6 7 的外边距bug 浮动元素的左外边距翻倍

条件判断

Ie浏览器可以识别注释里面的内容

渐进增强和优雅降级

两种解决兼容性问题的思路，会影响代码的书写风格

渐进增强:先适应大部分浏览器，然后针对新版本浏览器加入的新样式
书写代码时，先尽量避免书写有兼容性的代码，完成之后，在逐步就加入新标准中的代码

优雅降级
先制作完整的功能，然后在针对第版本浏览器进行特殊处理，书写代码时，先不用特别在意兼容性，完成整改功能后，在针对低版本浏览器处理样式
Caniuse网站可以查找css兼容性
[caniuse.com]:

六、居中总结

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

行盒（行块盒）居中：

直接设置行盒（行块盒）父元素text-align：center，可利用在文字和水平居中

常规流块盒水平居中：

定宽，设置左右margin为auto

浮动元素

浮动元素没办法设置水平居中，使用css3

绝对定位元素的水平居中

定宽，左右设置为0，左右margin设置为auto

固定定位（fixed）是绝对定位的特殊情况，只是相对于视口

单行文本的垂直居中

设置文本所在元素的行高为整个区域的高度

绝对定位的垂直居中：

定高，设置上下的坐标为0，（top：0，bottom：0）将上下margin设置为auto

其他

行块或块盒盒内多行文本的垂直居中，没办法做，换另外一种办法设置上下内边距padding 类似于居中的样子

七、样式补充

Display：list-item
设置为该属性值的盒子，本质上任然是一个块盒，但是同时该盒子会附带另外一个盒子，元素本身生成的盒子叫做主盒子，次盒子和主盒子水平排列。先排列次盒子，在排列主盒子。

涉及css属性
list-style-type属性，设置次盒子属性。可以继承，也可以写在父元素中
list-style-position属性，设置次盒子相对于主盒子的位置

在重置样式表里清空次盒子
list-style：none

图片失效时的宽高问题
如果img元素图片链接失效，和行盒元素一样，无法设置宽高
解决办法，设置成行盒或者行块盒

行盒中包含块盒或可替换元素
会导致行盒的高度不够，就是说与他内部的行块盒或者可替换元素的高度无关

text-align-justify
Left：左对齐
Right；右对齐
Center：居中
Justify；除最后一行外分散对齐

如果最后一行也要分散对齐

制作一个三角形
可以用图片，也可以用字形图

Direction和writing-mode文字排列方向问题
开始start->结束end
左left–右end
开始和结束是相对的，不同国家有不同的习惯
左右是绝对的
Direction是描述开始到结束的方向：rtl从右到左

Writing-mode：设置文字的书写方向