CSS进阶
CSS进阶
@规则
at-rule: @规则、@语句、CSS语句、CSS指令
- import
@import "路径";
导入另外一个css文件
- charset
@charset "utf-8";
告诉浏览器该CSS文件,使用的字符编码集是utf-8,必须写到第一行
web字体和图标
web字体
用户电脑上没有安装相应字体,强制让用户下载该字体
使用@font-face指令制作一个新字体
字体图标
iconfont.cn
块级格式化上下文
全称Block Formatting Context,简称BFC
它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局
不同的BFC区域,它们进行渲染时互不干扰
创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部
具体规则:
- 创建BFC的元素,它的自动高度需要计算浮动元素
- 创建BFC的元素,它的边框盒不会与浮动元素重叠
- 创建BFC的元素,不会和它的子元素进行外边距合并
布局
多栏布局
两栏布局
三栏布局
等高
- CSS3的弹性盒
- JS控制
- 伪等高
元素书写顺序
后台页面的布局
浮动的细节规则
盒子位置:
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动
行高的取值
line-height
-
px, 像素值
-
无单位的数字
-
em单位
-
百分比
body背景
画布 canvas
一块区域
特点:
- 最小宽度为视口宽度
- 最小高度为视口高度
HTML元素的背景
覆盖画布
BODY元素的背景
如果HTML元素有背景,BODY元素正常(背景覆盖边框盒)
如果HTML元素没有背景,BODY元素的背景覆盖画布
关于画布背景图
- 背景图的宽度百分比,相对于视口
- 背景图的高度百分比,相对于网页高度
- 背景图的横向位置百分比、预设值,相对于视口
- 背景图的纵向位置百分比、预设值,相对于网页高度
行盒的垂直对齐
多个行盒垂直方向上的对齐
给没有对齐元素设置vertical-align
预设值
数值
图片的底部白边
图片的父元素是一个块盒,块盒高度自动,图片底部和父元素底边之间往往会出现空白。
- 设置父元素的字体大小为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
一种编码方式
通常用于将一些二进制数据,用一个可书写的字符串表示。
居中总结
居中:盒子在其包含块中居中
行盒(行块盒)水平居中
直接设置行盒(行块盒)父元素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:除最后一行外,分散对齐
制作一个三角形
direction 和 writing-mode
开始 start -> 结束 end
左 left -> 右 end
开始和结束是相对的,不同国家有不同的习惯
左右是绝对的
direction设置的是开始到结束的方向
writing-mode:设置文字书写方向
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体