CSS进阶（4）- 扩展内容

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

浮动的细节规则

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

行高的取值

line-height

1. px, 像素值

2. 无单位的数字

3. em单位

4. 百分比

body背景

画布 canvas：一块区域

特点：1. 最小宽度为视口宽度 2. 最小高度为视口高度

HTML元素的背景：覆盖画布

BODY元素的背景：

1. 如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）
2. 如果HTML元素没有背景，BODY元素的背景覆盖画布

关于画布背景图

扫描二维码关注公众号，回复： 16141131 查看本文章

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

行盒的垂直对齐

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

给没有对齐的元素设置vertical-align属性，写预设值、数值、百分比

top/bottom/middle/super/sub/text-top/text-bottom
10px/…

图片的底部白边

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

1. 设置父元素的字体大小为0
   副作用：父元素里的其他字无法显示
2. 把img设置为块盒

参考线-深入理解字体

font-size line-height vertical-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（看PPT图），叫做virtual-area(虚拟区)

• 行高就是虚拟区

• line-height：normal，默认值为文字默认的gap

文字一定出现在一行的中间 X
content-area一定出现在virtual-area中间 √

vertival-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

vertical-align还可以使用数值： 相对于基线的偏移量，向上为正数，向下为负数。

vertical-align还可以使用百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度

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

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

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

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

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

行块盒：

1. 行块盒最后一行有line-box，用最后一行的 基线 作为整个行块盒的基线。
2. 如果行块盒内部没有行盒，则使用 下外边距 作为基线

堆叠上下文

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

创建堆叠上下文的元素

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

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

从后到前（Z轴方向）的排列顺序：

1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别(z-index, stack level)为负值的堆叠上下文
3. 常规流非定位(position:static;)的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文
7. 堆叠级别为正值的堆叠上下文

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

如果出现在相同堆叠上下文区域，且z-index值相同，则后面出现的覆盖前面的

svg

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

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

怎么使用

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

xml语言，svg使用该语言定义

使用方法：

1. 直接在body里嵌入svg代码 (test1.html)
2. 外部引用 (test2.html)
   img
   p 作为p标签的背景图引入
   embed
   object
   iframe 不太好设置 还要去改svg的本身尺寸

书写svg代码

矩形:rect

<rect x="10" y="10" width="100" height="100"  fill="red" stroke="#000" stroke-width="5" />
<!-- x、y坐标，原点在svg区域左上角；fill填充颜色；stroke、stroke-width边框颜色及宽度 -->

圆形：circle

<circle cx="150" cy="160" r="50" fill="pink" stroke="#000" stroke-width="5"/>
<!-- cx、cy、r坐标及半径 -->

椭圆：ellipse

<ellipse rx="80" ry="30" cx="240" cy="240" fill="transparent" stroke="#f00" stroke-width="5"/>
<!-- rx、ry椭圆长短半径 -->

线条：line

<line x1="320" x2="380" y1="360" y2="400"  stroke="#fcc" stroke-width="1"/>
<!-- 两点坐标 -->

折线：polyline

<polyline points="300,100,350,100,350,150,400,150,400,200" fill="red" stroke="#000" stroke-width="3"/>
    <!-- 折线 -->

多边形：polygon

<polygon points="300,300, 400, 400, 300, 500" fill="none" stroke="#000" stroke-width="3" /> 
<!-- 多边形 -->

路径：path

<!-- <path d="M150 600 L300 600 L300 800 L150 800 Z" fill="red" style="stroke:#000; stroke-width:5" /> -->
<path d="M300 300 A150 150 0 0 0 450 150" fill="none" style="stroke:#000; stroke-width:3" />

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，数据

意义

优点：

1. 减少了浏览器中的请求

请求

响应

减少了请求中浪费的时间

2. 有利于动态生成数据

缺点：

1. 增加了资源的体积

导致了传输内容增加，从而增加了单个资源的传输时间

2. 不利于浏览器的缓存

浏览器通常会缓存图片文件、css文件、js文件。

3. 会增加原资源的体积到原来的4/3

应用场景：

1. 当请求单个图片体积较小，并且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接。

2. 图片由其他代码动态生成，并且图片较小，可以使用数据链接。

base64

一种编码方式

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

参考资料

1. 【渡一教育】袁进老师的html+css基础课程
2. 【渡一教育】袁进老师相关课程源代码