@规则
at-rule: @规则、@语句、CSS语句、CSS指令
- import @import "路径"; 导入另外一个css文件
- charset @charset "utf-8"; 告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行
web字体和图标
web字体
当用户电脑上没有安装相应字体，强制让用户下载该字体 使用@font-face指令制作一个新字体
@font-face {
font-family: "字体名";
src: url("字体路径");
}
p {
font-family: "字体名";
}
字体图标
iconfont.cn
块级格式化上下文
全称Block Formatting Context，简称BFC 它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
- 常规流块盒的布局
- 常规流块盒在水平方向上，必须撑满包含块
- 常规流块盒在包含块的垂直方向上依次摆放
- 常规流块盒若外边距无缝相邻，则进行外边距合并
- 常规流块盒的自动高度和摆放位置，无视浮动元素
- BFC渲染区域： 这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
- 根元素，html元素创建的BFC区域，覆盖了网页中所有的元素
- 浮动和绝对定位元素
- overflow不等于visible的块盒
- 不同的BFC区域，它们进行渲染时互不干扰 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
- 创建BFC的元素，它的自动高度需要计算浮动元素
由此延伸出解决高度坍塌的办法——创建BFC区域： 1、添加绝对定位、浮动（但会改变盒子的排列方式） 2、设置overflow使其不等于visible（副作用最小的方式：overflow：hidden） 3、如果仅仅只是为了解决高度坍塌，还是建议使用清除浮动的方式
- 创建BFC的元素，它的边框盒不会与浮动元素重叠
- 创建BFC的元素，不会和它的子元素进行外边距合并
布局
多栏布局
两栏布局 三栏布局
等高布局
CSS3的弹性盒 JS控制 伪等高
元素书写顺序
若使用浮动元素，则浮动元素需靠前书写 但要求主区域代码靠前书写时，则不能使用浮动元素，此时可使用绝对定位来实现
后台页面的布局
一些扩展知识
浮动的细节规则
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
行高的取值
line-height的取值：
- px, 像素值
- 无单位的数字
- em单位
- 百分比
行高设为em或者百分比的形式，会先计算像素值，再继承给相应元素 行高设为无单位的数字，会先继承，后计算
body元素的背景
背景颜色填充的是边框盒
画布 canvas
指的是一块区域 该区域的特点：
- 最小宽度为视口宽度
- 最小高度为视口高度
HTML元素的背景
覆盖画布
BODY元素的背景
如果HTML元素有背景，BODY元素正常（背景覆盖边框盒） 如果HTML元素没有背景，BODY元素的背景覆盖画布
关于画布背景图
- 背景图的宽度百分比，相对于视口
- 背景图的高度百分比，相对于网页高度
- 背景图的横向位置百分比、预设值，相对于视口
- 背景图的纵向位置百分比、预设值，相对于网页高度
行盒的垂直对齐
多个行盒垂直方向上的对齐
给没有对齐元素设置vertical-align（垂直-排列方式） 预设值：middle居中，top靠上，bottom靠下，等 数值
图片的底部白边
图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。 解决办法：
- 设置父元素的字体大小为0，但会影响到父元素中的文字
- 将图片设置为块盒
参考线-深入理解字体
font-size、line-height、vertical-align、font-family
文字
文字是通过一些文字制作软件制作的，比如fontforge 制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型，参考线一致。
font-size
字体大小，设置的是文字的相对大小 文字的相对大小：1000、2048、1024 文字顶线到底线的距离，是文字的实际大小（content-area，内容区） 行盒的背景，覆盖content-area
行高
顶线向上延申的空间，和底线向下延申的空间，两个空间相等，该空间叫做gap（空隙） gap默认情况下，是字体设计者决定 top到botoom（看ppt图），叫做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的定边，对齐line-box的顶边 bottom：该元素的virtual-area的底边，对齐line-box的底边 middle: 该元素的中线（content-area的一半），与父元素的X字母高度一半的位置对齐 行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边。 实际，一个元素的实际占用高度（高度自动），高度的计算通过line-box计算。 行盒：inline-box 行框：line-box 数值：相对于基线的偏移量，向上为正数，向下为负数。 百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度 line-box是承载文字内容的必要条件，以下情况不生成行框：
- 某元素内部没有任何行盒
- 某元素字体大小为0
可替换元素和行块盒的基线
图片：基线位置位于图片的下外边距。 表单元素：基线位置在内容底边 行块盒：
- 行块盒最后一行有line-box，用最后一行的基线作为整个行块盒的基线。
- 如果行块盒内部没有行盒，则使用下外边距作为基线
堆叠上下文
堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。
创建堆叠上下文的元素
- html元素（根元素）
- 设置了z-index（非auto）数值的定位元素
同一个堆叠上下文中元素在Z轴上的排列
从后到前的排列顺序：
- 创建堆叠上下文的元素的背景和边框
- 堆叠级别(z-index, stack level)为负值的堆叠上下文
- 常规流非定位的块盒
- 非定位的浮动盒子
- 常规流非定位行盒
- 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
- 堆叠级别为正值的堆叠上下文 每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插。
svg
svg: scalable vector graphics，可缩放的矢量图
- 该图片使用代码书写而成
- 缩放不会失真
- 内容轻量
怎么使用
svg可以嵌入浏览器，也可以单独成为一个文件 xml语言，svg使用该语言定义
书写svg代码
矩形:rect 圆形：circle 椭圆：ellipse 线条：line 折线：polyline 多边形：polygon 路径：path
M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc
A 半径1 半径2 顺时针旋转角度 小弧（0）或大弧（1） 顺时针（1）逆时针（0）
Z = closepath 画太极图
数据链接
data url
如何书写
数据链接：将目标文件的数据直接书写到路径位置 语法：data:MIME,数据
意义
优点：
- 减少了浏览器中的请求 请求 响应 减少了请求中浪费的时间
- 有利于动态生成数据 缺点：
- 增加了资源的体积 导致了传输内容增加，从而增加了单个资源的传输时间
- 不利于浏览器的缓存 浏览器通常会缓存图片文件、css文件、js文件。
- 会增加原资源的体积到原来的4/3 应用场景：
- 但请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。
- 图片由其他代码动态生成，并且图片较小，可以使用数据链接。
base64
一种编码方式 通常用于将一些二进制数据，用一个可书写的字符串表示。
浏览器兼容性
问题产生原因
- 市场竞争
- 标准版本的变化
厂商前缀
比如：box-sizing， 谷歌旧版本浏览器中使用-webkit-box-sizing:border-box
- 市场竞争，标准没有发布
- 标准仍在讨论中（草案），浏览器厂商希望先支持
IE： -ms- Chrome，safari: -webkit- opera： -o- firefox: -moz-
浏览器在处理样式或元素时，使用如下的方式：
当遇到无法识别的代码时，直接略过。
- 谷歌浏览器的滚动条样式 实际上，在开发中使用自定义的滚动条，往往是使用div+css+JS实现的
- 多个背景图中选一个作为背景
css hack
根据不同的浏览器（主要针对IE），设置不同的样式和元素
- 样式 IE中，CSS的特殊符号
- *属性，兼容IE5、IE6、IE7
- _ 属性，兼容IE5~IE6
- 属性值\9，兼容IE5~IE11
- 属性值\0，兼容IE8~IE11
- 属性值\9\0，兼容IE9~IE10
IE5、6、7的外边距bug，浮动元素的左外边距翻倍
- 条件判断
渐近增强 和 优雅降级
两种解决兼容性问题的思路，会影响代码的书写风格
- 渐近增强：先适应大部分浏览器，然后针对新版本浏览器加入新的样式 书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的代码。
- 优雅降级：先制作完整的功能，然后针对低版本浏览器进行特殊处理 书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式。
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：
list-style-type设置次盒子中内容的类型list-style-position设置次盒子相对于主盒子的位置- 速写属性
list-style清空次盒子 list-style:none
图片失效时的宽高问题
如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高
行盒中包含行块盒或可替换元素
行盒的高度与它内部的行块盒或可替换元素的高度无关
text-align:justify
text-align:
- left: 左对齐
- right：右对齐
- center：居中
- justify：除最后一行外，分散对齐
制作一个三角形
<head>
...
<style>
div{
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
direction 和 writing-mode
开始 start -> 结束 end 左 left -> 右 end 开始和结束是相对的，不同国家有不同的习惯 左右是绝对的 direction设置的是开始到结束的方向 writing-mode：设置文字书写方向
