扩展部分
浮动补充
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动
body背景
画布 canvas
一块区域
特点:最小宽度和最小高度都是视口的宽高
HTML元素的背景
覆盖画布
body元素的背景
如果HTML元素有背景,body元素正常(背景覆盖边框盒)
如果HTML元素没有背景,body元素的背景覆盖画布
关于body背景图
就是坑
- 背景图的宽度百分比,是相对于视口
- 背景图的高度百分比,是相对于HTML元素,也就是相对于网页高度
- 背景图的横向位置百分比、预设值,相对于视口(background-position)
- 背景图的纵向位置百分比、预设值,相对于网页高度
行高的取值
- px,像素值
子元素直接继承 - 无单位的数字
是先继承,再计算,所以子元素的行高是子元素的font-size*继承的数字 - em单位
- 百分比
em和百分比都是先计算再继承的,就是先计算出像素值,然后子元素继承像素值
参考线-深入理解字体
font-size、line-height、vertical-align、font-family
文字
文字是通过一些软件制作的
有五根参考线
text-top,ascent,顶线
super,上基线
baseline,基线
sub,下基线
text bottom,descent,底线
font-size
字体大小设置的是文字的相对大小
文字的相对大小:1000,2048,1024
文字顶线到底线的距离,是文字的实际大小(content-area,内容区)
行盒的背景,覆盖content-area
行高
顶线向上延伸的空间和底线向下延伸的空间,两个空间相等,该空间叫做gap(空隙)
gap 默认情况下,有字体设计者决定
top到bottom,叫做virtual-area(虚拟区)
行高就是虚拟区
对于行盒来说,背景颜色填充的是text top到text bottom
line-height:normal,默认值,使用文字默认的gap
多行文本的部分重叠有可能是由于虚拟区小于内容区导致的
content-area一定出现在virtual-area的中间
vertical-align
决定参考线:font-size,font-family,line-height
一个元素如果子元素出现行盒,该元素内部也会产生参考线
baseline:(也就是一般的默认值)该元素的基线与父元素的基线对齐
super:该元素的基线与父元素的上基线对齐
sub:表示该元素的基线与父元素的下基线对齐
text-top:该元素的vertical-area的顶边,对齐父元素的text-top
text-bottom:该元素的vertical-area的底边,对齐父元素的text-bottom
top:该元素的virtual-area的顶边对齐line-box的顶边(该行中的最高顶边)
bottom:该元素的virtual-area的底边对齐line-box的底边(该行中的最低底边)
middle:该元素的中线(content-area的一半)与父元素的X字母高度一半的位置对齐
行盒组合起来,可以形成多行,每一行的区域叫做line-box(行框),line-box的顶边是该行内所有行盒最高顶边,底边是该行行盒的最低底边
实际上,一个元素的实际占用高度(高度自动),高度的计算通过line-box计算
取值还可以取数值,百分比
数值:相对于基线的偏移量,向上为正数,向下为负数
百分比:相对于基线的偏移量,百分比是相对于自身virtual-area的高度
line-box是承载文字内容的必要条件,以下情况不生成行框:
- 某元素内部没有任何行盒
- 某元素字体大小为0
可替换元素和行块盒的基线
图片:基线位置位于图片的下外边距
解决图片的底部白边:1. 设置font-size为0 2. 设置img元素的display为block
表单元素:基线位置在内容底边
行块盒:
- 行块盒最后一行有line-box,用最后一行的基线作为整个行块盒的基线
- 如果行块盒内部没有行盒,则使用下外边距作为基线
svg
svg:scalable vector graphics,可缩放的矢量图
- 该图片使用代码书写而成
- 缩放不会失真
- 内容轻量
怎么使用
svg可以嵌入浏览器,也可以单独成为一个文件
xml语言,svg使用该语言定义
- 直接嵌入到浏览器里面
- 使用img,当做外部文件使用
- 当做背景图
- 还可以使用embed、object、iframe元素
书写svg代码
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
</svg>
直接在svg里面设置宽高不带单位,带px也可以
矩形:rect
修改图案颜色使用fill属性,颜色的书写和之前的一样
stroke="#008c8c"
<!-- 表示描边(差不多是边框的意思)颜色 -->
stroke-width="2px"
<!-- 表示描边宽度 -->
x="100" y="100"
<!-- 设置位置,位置的定点在矩形的左上角 -->
效果如下图:
圆形:circle
cx="200" sy="200"
<!-- 设置的是圆的中心点的坐标,cx=center x,cy同理 -->
r="50"
<!-- 表示半径的大小 -->
椭圆:ellipse
rx="80" ry="30"
<!-- 分别表示设置椭圆的长轴和短轴,同样和圆一样有cx,cy -->
线条:line
x1="10" x2="150" y1="150" y2="300"
<!-- x1,y1,x2,y2分别表示线段的两点坐标 -->
折线:polyline
points="300,150,320,150,320,170"
<!-- 按顺序书写每个点的坐标 -->
<!-- 他的填充效果是把第一个点和最后一个点连起来,填充这条线和所有点之间的内容 -->
效果图如下,
多边形:polygon
<polygon points="100,400,150,500,200,400" stroke="blue" stroke-width="3" fill="pink"/>
效果如下图:
路径: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
rx,是长轴 ry,是短轴
angle,是椭圆绕中心点旋转的角度
large-arc-flag,是表示取优弧还是劣弧(就是长弧或者短弧),1表示取长弧,0表示取短弧
sweep-flag,表示弧线是按照顺时针还是逆时针,1表示顺时针,0表示逆时针
最后的x,y表示终点坐标
- Z = closepath
表示最后闭合线条
<path d="M0 150 A150 150 0 0 1 150 0" stroke="#000" stroke-width="3" fill="pink"/>
效果图如下,
例子,画太极
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500" style="background-color:lightblue;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M250 50 A100 100 0 0 0 250 250 A100 100 0 0 1 250 450 A200 200 0 1 1 250 50" fill="#000"/>
<path d="M250 50 A100 100 0 0 0 250 250 A100 100 0 0 1 250 450 A200 200 0 1 0 250 50" fill="#FFF"/>
<circle cx="250" cy="150" r="30"/>
<circle cx="250" cy="350" r="30" fill="#fff"/>
</svg>
效果图如下,
数据链接
date url
如何书写
数据链接:表示将目标文件的数据直接书写到路径位置
语法:date:MIME,数据(文件的内容)
意义
优势:
-
减少了浏览器中的请求浪费的时间
-
有利于动态生成数据
劣势:
-
增加了页面内容也就是增加了资源的体积,从而增加了单个资源的传输时间
-
不利于浏览器的缓存
应用场景:
-
当请求单个图片体积较小,并且该图片因为各种原因,不适合制作雪碧图,可以使用数据链接。
-
图片由其他代码动态生成,并且图片较小,可以使用数据链接
-
使用base64会增加原资料的体积的4/3
base64
一种编码方式
通常用于将一些二进制数据,转换成可书写的字符串来表示