本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用。
文章目录
浮动的细节规则
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动
行高的取值
line-height
-
px, 像素值
-
无单位的数字
-
em单位
-
百分比
body背景
画布 canvas:一块区域
特点:1. 最小宽度为视口宽度 2. 最小高度为视口高度
HTML元素的背景:覆盖画布
BODY元素的背景:
1. 如果HTML元素有背景,BODY元素正常(背景覆盖边框盒)
2. 如果HTML元素没有背景,BODY元素的背景覆盖画布
关于画布背景图
1. 背景图的宽度百分比,相对于视口
2. 背景图的高度百分比,相对于网页高度(html高度)
3. 背景图的横向位置百分比、预设值,相对于视口
4. 背景图的纵向位置百分比、预设值,相对于网页高度
行盒的垂直对齐
多个行盒垂直方向上的对齐
给没有对齐的元素设置vertical-align属性,写预设值、数值、百分比
top/bottom/middle/super/sub/text-top/text-bottom
10px/…
图片的底部白边
发生的时间:图片的父元素是一个块盒时,若块盒高度自动时,图片底部和父元素底边之间往往会出现空白。
- 设置父元素的字体大小为0
副作用:父元素里的其他字无法显示 - 把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是承载文字内容的必要条件,以下情况不生成行框:
- 某元素内部没有任何行盒
- 某元素字体大小为0
可替换元素和行块盒的基线
图片: 基线位置位于 图片的下外边距。
表单元素:基线位置在 内容底边
行块盒:
- 行块盒最后一行有line-box,用最后一行的 基线 作为整个行块盒的基线。
- 如果行块盒内部没有行盒,则使用 下外边距 作为基线
堆叠上下文
堆叠上下文 (stack context),它是一块区域,这块区域由某个元素创建,它规定了该区域中的内容在Z轴上排列的先后顺序。
创建堆叠上下文的元素
- html(根元素)
- 设置了z-index数值(非auto)的定位元素
同一个堆叠上下文中元素在z轴上的排列
从后到前(Z轴方向)的排列顺序:
- 创建堆叠上下文的元素的背景和边框
- 堆叠级别(z-index, stack level)为负值的堆叠上下文
- 常规流非定位(position:static;)的块盒
- 非定位的浮动盒子
- 常规流非定位行盒
- 任何 z-index 是 auto 的定位子元素,以及 z-index 是 0 的堆叠上下文
- 堆叠级别为正值的堆叠上下文
每个堆叠上下文,独立于其他堆叠上下文,它们之间不能相互穿插。
如果出现在相同堆叠上下文区域,且z-index值相同,则后面出现的覆盖前面的
svg
svg: scalable vector graphics,可缩放的矢量图
- 该图片使用代码书写而成
- 缩放不会失真
- 内容轻量
怎么使用
svg可以嵌入浏览器,也可以单独成为一个文件
xml语言,svg使用该语言定义
使用方法:
- 直接在body里嵌入svg代码 (test1.html)
- 外部引用 (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,数据
意义
优点:
- 减少了浏览器中的请求
请求
响应
减少了请求中浪费的时间
- 有利于动态生成数据
缺点:
- 增加了资源的体积
导致了传输内容增加,从而增加了单个资源的传输时间
- 不利于浏览器的缓存
浏览器通常会缓存图片文件、css文件、js文件。
- 会增加原资源的体积到原来的4/3
应用场景:
-
当请求单个图片体积较小,并且该图片因为各种原因,不适合制作雪碧图,可以使用数据链接。
-
图片由其他代码动态生成,并且图片较小,可以使用数据链接。
base64
一种编码方式
通常用于将一些二进制数据,用一个可书写的字符串表示。
参考资料
- 【渡一教育】袁进老师的html+css基础课程
- 【渡一教育】袁进老师相关课程源代码