【无标题】

块级格式化上下文

简称bfc

它规定了在该区域中，常规流块盒的布局 ‘

是一块独立的渲染区域 渲染时互不干扰 内部的渲染不会影响外部
BFC渲染区域：这个区域由某个HTML元素创建，以下元素会创建

• 根元素
• 浮动和绝对定位元素
• overflow不为visible的块盒
• 行块盒

具体规则：

1. 创建BFC的元素，自动高度计算时需要计算浮动元素 可用于高度坍塌
2. 创建BFC的元素，它的边框盒不会与浮动元素重叠 即会避开浮动元素盒子
   可用于把左边栏固定 右边随窗口变化自适应
   设置浮动元素的margin才能使两者的距离发生变化
3. 创建BFC的元素，不会和它的子元素的外边距合并

布局

多栏布局

1. 两栏布局
   侧边栏左右浮动 主区域定宽直接使用浮动 不定宽直接使用BFC（overflow:hidden）

2. 三栏布局
   左右边栏左右浮动 中间栏创建BFC 或 为行盒

等高布局

两个栏等高

1. css3 弹性盒
2. js
3. 伪等高
   边框栏 height为一个很大的数 magrin-bottom为一个很小的负数 并且二者相加不为0
   然后给主盒子设置overflow:hidden

元素书写顺序

1. 先写所有浮动元素盒子 再写常规流盒子。对布局没影响 但浏览器会认为前面写的代码一般为重要的 因此就有了（2.）
2. 主区域代码靠前书写时 设置左右margin 然后将浮动元素以绝对定位挂在应在的位置

后台页面布局

1. 不出现滚动条 将主容器设置为固定定位
2. 标题栏设置为绝对定位
3. 主区域盒height为100% boxzing为边框盒 设置padding为标题栏高度
4. 左边区域内容过多出现滚动 overflow：auto

浮动拓展

1. 浮动盒子的顶边不得高于上一个盒子的顶边

2. 若剩余空间无法放下浮动盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左向右移动

行高的取值

1. px 像素值
2. 直接书写无单位数字 表示几倍。先继承 后计算
3. em单位 先计算 后继承
4. 百分比 先计算 后继承

body的背景

画布

一块区域

特点

1. 最小宽度为视口宽度
2. 最小高度为视口高度

html元素的背景

覆盖画布

body元素背景

如果html有背景，则body元素是正常的
如果html元素没有背景，则body覆盖画布

关于画布背景图

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

html设置背景 body一切正常

行盒的垂直对齐

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

给没有对齐的元素设置vertical-align：预设值，数值

图片的底部白边

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

1.设置父元素字体大小为0
2.将图片设置为块盒

参考线深入理解字体

文字

文字是通过文字制作软件做出来的，制作文字时，有几根参考线。不同的文字类型，参考线不一样。相同的文字类型，参考线一致。

font-size

字体大小，设置的是字体的相对大小
字体的相对大小:1000 2048 1024
文字的实际距离是顶线到底线的距离，（content-area，内容区）

行高

顶线向上延伸一段空间，和底线向下延伸一段空间，两个空间相等，叫做gap
这个gap默认情况下，是由字体设计者决定的

top到bottom之间的距离叫virtual-area虚拟区域，即行高

～normal 使用默认gap值

vertical-align

一个元素如果子元素为行盒，则在该元素内部也会出现参考线

默认为baseline:该元素的基线和父元素基线对齐

• super 表示该元素的基线和父元素的上基线对齐
• sub 表示该元素的基线和父的下基线对齐
• text-top 该元素的top和父元素的text-top对齐
• text-bottom
• top 表示该元素的top和父元素的顶边（该行中的最高顶边）（对齐的是line-box的顶边）对齐
• 数值:相对于基线的偏移
• middle: 该元素的中线和父元素的X字母高度一半对齐

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

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

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

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

可替换元素和行块盒

1. 图片:基线的位置位于图片的下外边距（可能有margin）
2. 表单元素:基线的位置在内容的底边位置
3. 行块盒:
   1. 行盒的最后一行有line-box,用最后一行的基线作为整个行块盒的基线
   2. 如果行块盒内部没有行盒，则使用下外边距作为基线

堆叠上下文（stack content）

他是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在z轴上排列的先后顺序

创建堆叠上下文的元素

1. html元素
2. 设置了z-index(非auto)的定位元素 只有定位元素设置z-index才有效

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

从底到上的排序来

1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别为负数的堆叠上下文;有相同情况的 后边的代码显示在上边，前边的代码显示在下面
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何z-index为auto的定位子元素，和z-index为0的堆叠上下文
7. 堆叠级别为正值的堆叠上下文

每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插 在上面的堆叠上下文中的所有元素一定在下面的堆叠上下文中的所有元素的上面

svg

可缩放的矢量图

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

使用

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

xml语言，svg用该语言制作

书写svg代码

可直接写svg 可为其添加内联样式

矩形

rect 是一个元素

• fill改变颜色 和color用法一样
• stroke 描边颜色
• stroke-width 表示描边的宽度
• x，y 以矩形的左上角为原点增加

圆形 circle

• cx cy 中心点坐标
• r 半径

椭圆 ellipse

• rx -ry 长轴 短轴长度

线条 line

两点连线

• x1 y1
• x2 y2
  同时要设置stroke

多线端 polyline

xyxyxyxy交替写成
填充fill 会将第一个点和最后一个点相连 然后填充

多边形 polygon

多边型的各个点

path 路径写法

W3C
M:Moveto 将坐标原点移动到哪里
L:line X Y从前面的一个点到这个点的连线
Z:将图形闭合
A:ellipse Arc A:长轴 短轴 顺时针旋转角度 画弧(优弧为1 劣弧为0) 顺时针1 逆时针0 终点坐标

数据链接

data url

如何书写

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

语法:data:MIME;base64,数据

意义

优点:

1. 减少了浏览器请求文件浪费的时间
2. 有利于动态生成数据 利用js更改该位置的代码 从而更改页面显示
   缺点:
3. 增加了资源的体积 增加了单个资源的传输时间
4. 不利于浏览器的缓存
5. 会增大资源内存

应用场景

请求的单个图片体积较小，并且该图片不适合制作雪碧图
图片由其他代码动态生成

base64

一种编码方式

通常用于将一些二进制数据，用一个可书写字符串表示

浏览器兼容

厂商前缀

eg box-sizing
IE -ms-
Chrome,safari -webkit-
opera -o-
firefox -moz-

浏览器在遇到无法识别的代码时 不会直接报错 而是直接忽略

1. 谷歌浏览器的滚动条
   通常使用js+css 设置
2. 多个背景图选择一个作为背景
   -厂商前缀image-set(url()1x,url()2x)

css hack

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

1. 样式

• *属性 兼容IE567
• _+属性 兼容IE56
• 属性+\9 兼容IE5-10
• 属性+\0 兼容IE8-10
• 属性+\9\0 兼容IE9-10

2. 条件判断

渐进增强 优雅降级

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

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

尽量避免书写由兼容性问题的代码，完成后再逐步加入

• 优雅降级 先制作完整的功能，然后针对有兼容性问题浏览器进行特殊处理

先不用在意兼容性 完成整个功能后，再针对进行处理

网站caniuse.com

查找css兼容性

居中总结

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

行盒（行块盒）水平居中

直接设置行盒or行块盒父元素的text-align：center

常规流块盒居中

定width 设置左右margin:auto

绝对定位元素居中

定width 设置左右偏移为0 设置左右margin:auto

单行文本垂直居中

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

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

没有完美方案

1. 设置盒子上下内边距相同，达到类似效果
2. 绝对定位 定高 上下偏移为0 上下margin为auto

样式总结

display:list-item li元素的

设置为该属性的盒子，本质上还是一个块盒,但同时会附带另一个盒子，元素本身生成的盒子叫主盒子，附带的盒子叫次盒子（就是列表元素前面的那个点的盒子），次盒子和主盒子水平排列，先排次再排主，且无法调整两者见的距离

涉及的css属性

1. ul中 list-style-type
   设置次盒子中内容的类型
2. list-style-position
   设置次盒子相对于主盒子的位置
3. list-style-image
4. 速写属性 list-style 清空次盒子 - none

图片失效时的宽高问题

如果img元素图片链接无效，img元素的特性和普通行盒一样 无法设置宽高

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

行盒的高度和它内部的行块盒or可替换元素的高度无关 只和字体大小有关

text-align:justify 分散对齐（使单词间空格分散 一般最后一行分散对齐）

最后一行也分散对齐 给加上::after display:inline-block width:100%

制作一个三角型

direction 和 writing-mode

direction 文字开始到结束的方向
writing-mode 书写方向 垂直书写

utf-8字符

爱
p::after中内容content:“\7231\1223”