@规则

别名：at-rule，@规则，@语句，CSS语句，CSS指令

1. import：写法：@import“路径”；表示导入另外一个CSS文件
2. charset：写法：@charset“utf-8”；表示告诉该CSS文件使用的字符编码集是utf-8，必须写到CSS代码文件的第一行（可不写）；

web字体和图标

web字体：

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

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

 @font-family{
font-family:"xxxxxx"
src:url('字体文件的位置')}p{
font-family:"xxxxxx"
}

字体图标

iconfont.cn

块级格式化上下文

全称：block formatting context ，简称BFC

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

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

渲染区域

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

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

“独立的”意思：

不同的BFC区域，进行渲染时互不干扰

创建BFC元素，隔绝了它内部和外部的练习，内部的渲染不会影响到外部

具体规则

• 创建BFC元素，它的自动高度需要计算浮动元素
• 创建BFC元素，它的边框盒不会与浮动元素重叠
• 创建BFC元素，不会和它的子元素进行外边距合并（不同的BFC元素中，外边距不会进行合并）

布局

多栏布局

两栏布局

三栏布局

等高

解决问题：

1. 使用CSS3的弹性盒
2. 使用JS控制
3. 使用伪等高，当超出外层容器，则使用overflow：hidden进行隐藏。

元素书写顺序

先写有定位的元素

后台页面的布局

**overflow: auto;········表示超出区域添加滚动条

---

浮动的细节规则

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

行高的取值

line-height

1. 像素值，px
2. 无单位的数字·······先继承，再计算
3. 带em单位的取值（表示行高为该元素所在的字体大小的取值）·····先计算像素值，再继承
4. 百分比······先计算后继承

body的背景

画布 canvas

画布是一块区域。

特点：

1. 最小宽度为视口（浏览器的可视窗口）宽度
2. 最小高度为视口高度

HTML元素的背景

HTML元素的背景会覆盖画布

body元素的背景

如果HTML元素有背景，body元素正常（背景覆盖边框盒）

如果HTML没有背景，body元素的背景覆盖画布

关于画布背景图

1. 背景图的宽度百分比，相对于视口高度
2. 背景图的高度百分比，相对于网页高度（HTML）
3. 背景图的横向位置百分比，预设值，相对于视口
4. 背景图的纵向位置百分比，预设值，相对于网页高度

参考线—深入理解字体

font-size,line-height,verical-align,font-family

文字

文字是通过一些文字制作软件制作出来的，比如
fontforge

制作文字时，会有几根参考线，不同的文字类型，参考线不一样，同一样的文字类型，参考线一致。

参考线：

text top，ascent······顶部参考线

第二根线：super····上基线

第三根线：baseline·····基线

倒数第二根线：sub ·······下基线

text bottom，descent······底部参考线

font-size

字体大小，设置的是文字的相对大小

文字的相对大小：1000,2048,1024

文字顶线到底线的距离，是文字的实际大小（content-area，内容区）

行盒的背景，覆盖content-area

行高

顶线向上延伸的空间和底线向下延伸的空间相等，该空间叫做gap（空隙），gap默认情况下是由字体设计者决定

top到bottom的距离叫做虚拟区（virtual-area）

行高就是virtual-area

line-height:normal，默认值，使用文字默认的gap

• 文字一定出现一行的最中间·········错误，是由设计者决定的
• content-area一定出现在virtual-area中间········正确

vertical-align:

影响参考线的因素：font-size,font-family,line-height

一个元素如果子元素出现了行盒，该元素内部也会产生参考线

baseline:该元素的基线与父元素的基线对齐

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

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

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

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

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

bottom：该元素的virtual-area的底边，对齐父元素的底边（该行中的最低底边）

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

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

行盒：inline-box

行框：line-box

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

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

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

1. 某元素内部没有任何行盒
2. 某元素的字体大小为0

可替换元素和行块盒的基线

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

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

行块盒：

1. 行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线
2. 如果行块

堆叠上下文

堆叠(层叠)上下文：（stack context），是一块区域，由某个元素创建，他规定了该区域中的内容在Z轴排列的先后顺序。

创建堆叠上下文的元素

1. html元素（根元素）
2. 设置了z-index（非auto）数值的定位元素

同一个堆叠上下文中元素在Z轴上的排列

从后（远离用户）到前（靠近用户）的排列顺序：

1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别（z-index,stack level）为负值的堆叠上下文,值越大越靠前，值越小越靠后
3. 常规流非定位的块盒
4. 非固定的浮动盒子
5. 常规流非定位行盒
6. 在任何z-index是auto的定位子元素，以及z-index是0的堆叠上下文
7. 堆叠级别为正值的堆叠上下文

每个堆叠上下文，独立于其他堆叠上下文，他们之间不能相互穿插。

行盒的垂直对齐

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

给没有对齐的元素设置vertical-align(垂直方向的对齐方式)，有预设值也有数值

图片的底部白边

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

解决图片底部白边的方法：

1. 设置父元素的字体为0；（若父元素里面有文字，不建议使用该方法，会导致文字的消失不见）
2. 将图片设置为块盒

svg（拓展）

svg:scalable vector graphics,可缩放的矢量图

特点：

1. 该图片使用代码书写而成
2. 缩放不会失真
3. 内容轻量

怎么使用svg

svg可以嵌入浏览器，也可以单独成为一个文件

xml是一个语句，svg使用该语言进行定义

使用方法：

1. 直接使用svg代码进行嵌入到body中
2. 使用img图片样式嵌入，
3. 使用embed元素嵌入，在src中写入svg的相对位置，在后面的type中写上“type=“image/svg+xml””
4. 可以使用object元素嵌入，在data属性中写入svg的相对位置，type中写上“type=“image/svg+xml”
5. 可以使用iframe元素

书写svg代码

• 当fill=transparent，表示没有填充

矩形：rect（rectangle），

更改颜色用fill属性，
设置边框（描边）颜色用stroke，

设置边框宽度用stroke-width

用x，y 可设置位置，相对于最左上角的位置，

圆形：circle

属性：cx······表示圆心的横坐标
cy·······表示圆心的纵坐标
r········表示圆的半径

椭圆：ellipse

属性：rx·····表示椭圆的长半径
ry·········表示椭圆的短半径
还要加上椭圆的cx cy来表示椭圆的圆心位置

线条：line

用两个点的坐标来表示

折线：polyline

折线会把第一个点跟最后一个点连线

多边形：polygon

路径：path

M=moveto········起点移动

L=lineto·········画一条线

H=horizontal ineeto·········

V=vertical lineto

C=curveto

S=smooth curveto

Q=quadratic belzier curve

T=smooth quadratic belzier curveto

A=elliptical arc······弧线（需要标明椭圆的长短半径，也可以在后面标上顺时针的旋转角度，小弧0或大弧1 顺时针画法用1（逆时针用0） 终点坐标）

Z=closepath·······闭合路径

数据链接(data url)

如何书写数据连接

数据链接将目标文件的数据直接书写到路径位置

语法：data：MIME（数据类型），数据

例如：

意义

优点：

1. 减少了浏览器的请求（减少请求中浪费的时间）
2. 有利于动态生成数据。

缺点：

1. 增加了资源的体积，导致传输内容增加，从而增加了单个资源的传输时间
2. 不利于浏览器的缓存，浏览器通常会缓存图片文件，CSS文件，JS文件。
3. 会增加原资源的体积到原来的4/3

应用场景：

1. 当请求单个图片体积较小，并且该图片因为各种原因不适合制作雪碧图，可以使用数据连接。
2. 图片由其他代码动态生成，并且图片较小，可以使用数据链接。

base64

是一种编码方式，通常用于将一些二进制数据，用一个可书写的字符串表示。

浏览器兼容性

问题产生原因

• 市场竞争
• 标准版本的变化

厂商前缀

比如：box-sizing，在谷歌旧版本浏览器中使用-webkit-box-sizing

出现问题的原因：

1，市场竞争，标准没有发布

2，标准仍在讨论中（草案），浏览器厂商希望先支持

常见的厂商前缀：

IE：-ms-

chrome（谷歌），safari：-webkit-

opera：-o-

firefox：-moz-

浏览器在处理样式或元素时，使用如下的方式：
当遇到无法识别对的代码时，直接略过。

（是写厂商前缀的简单方式：安装好插件后，按F1键）

1，谷歌浏览器的滚动条样式

实际上，在开发中使用自定义的滚动条，往往是使用div+css+JS实现的

2，多个背景图中选一个作为背景

css hack

根据不同的浏览器（主要针对IE），设置不同的样式和元素

1. 样式：IE中，CSS的特殊符号：

属性前面加*号，兼容IE5,IE6，IE7；

属性前面加下划线，兼容IE5~IE6

属性值后面加\9，兼容IE5~IE10

属性值后面加\0，兼容IE8~IE10

属性值后面加\9\0,兼容IE9~IE11

IE5，6，7，的外边距bug：浮动元素的左外边距翻倍

2. 条件判断

解决浏览器兼容性问题的常见做法

渐进增强 和 优雅降级

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

• 渐进增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式

书写代码时，先尽量避免书写有兼容性的问题代码，完成之后，再逐步加入新标准中的代码。

• 优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理，

书写代码时，先不用特别在意兼容性，完成整个功能后，再针对低版本浏览器处理样式

caniuse（一个网站）

用于查找CSS兼容性

caniuse.com

居中总结

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

行盒（行块盒）水平居中

直接设置行盒（行块盒）的父元素水平居中······text-align：center`````

常规流块盒水平居中

定宽————设置左右margin为auto

绝对定位元素的水平居中

定宽————设置左右的坐标为0（left：0，right：0）；将左右margin设置为auto。

固定定位（fixed）是绝对定位（absolute）的特殊情况

单行文本的垂直居中

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

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

没有完美方案设置上下内边距相同。达到类似效果。

绝对定位的垂直居中

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

样式补充

display:list-item

设置为该属性值的盒子，本质上还是一个块盒，但同时该盒子会附带另外一个。

元素本身生成的盒子叫做主盒子，附带的盒子成为次盒子，次盒子和主盒子水平排列，先排列次盒子，再排列主盒子

涉及的CSS属性：

1. list-style-type·····设置次盒子类型，可继承
2. list-style-position··········设置次盒子相对于主盒子的位置
3. 速写属性：list-style

清空次盒子
list-style：none

图片失效时的宽度问题

如果img图片失效，img元素的特性和普通行盒一样，无法设置宽高。当设置为块盒时，display：block时，可设置宽高

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

行盒的高度与它内部的行块盒或可替换元素的高度无关

text-align：justify

text-align属性：

• left：左对齐
• right：右对齐
• center：居中对齐
• justify：除最后一行外，分散对齐

制作一个三角形

    div{width: 0;height: 0;border-width: 10px;border-style: solid;border-color: transparent transparent  transparent chocolate;}

或者

div{width: 0;height: 0;border: 10px solid transparent;border-left-color: red;}

derection和writing-mode

开始start——结束end

左left——右right

开始和结束时相对的，不同的国家有不同的习惯

左右是绝对的

direction设置的是开始到结束的方向。