CSS进阶

CSS进阶

@规则

at-rule: @规则、@语句、CSS语句、CSS指令

  1. import

@import "路径";

导入另外一个css文件

  1. charset

@charset "utf-8";

告诉浏览器该CSS文件,使用的字符编码集是utf-8,必须写到第一行

web字体和图标

web字体

用户电脑上没有安装相应字体,强制让用户下载该字体

使用@font-face指令制作一个新字体

字体图标

iconfont.cn

块级格式化上下文

全称Block Formatting Context,简称BFC
它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局

不同的BFC区域,它们进行渲染时互不干扰
创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部
具体规则:

  • 创建BFC的元素,它的自动高度需要计算浮动元素
  • 创建BFC的元素,它的边框盒不会与浮动元素重叠
  • 创建BFC的元素,不会和它的子元素进行外边距合并

布局

多栏布局

两栏布局

三栏布局

等高

  1. CSS3的弹性盒
  2. JS控制
  3. 伪等高

元素书写顺序

后台页面的布局

浮动的细节规则

盒子位置:

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

行高的取值

line-height

  1. px, 像素值

  2. 无单位的数字

  3. em单位

  4. 百分比

body背景

画布 canvas

一块区域

特点:

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

HTML元素的背景

覆盖画布

BODY元素的背景

如果HTML元素有背景,BODY元素正常(背景覆盖边框盒)

如果HTML元素没有背景,BODY元素的背景覆盖画布

关于画布背景图

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

行盒的垂直对齐

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

给没有对齐元素设置vertical-align

预设值

数值

图片的底部白边

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

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

参考线-深入理解字体

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是承载文字内容的必要条件,以下情况不生成行框:

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

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

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

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

行块盒:

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

堆叠上下文

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

创建堆叠上下文的元素

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

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

从后到前的排列顺序:

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

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

svg

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

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

怎么使用

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

意义

优点:

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

请求

响应

减少了请求中浪费的时间

  1. 有利于动态生成数据

缺点:

  1. 增加了资源的体积

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

  1. 不利于浏览器的缓存

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

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

应用场景:

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

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

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:

  1. list-style-type

设置次盒子中内容的类型

  1. list-style-position

设置次盒子相对于主盒子的位置

  1. 速写属性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:设置文字书写方向

utf-8字符

posted @   Kyou12138  阅读(7)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
点击右上角即可分享
微信分享提示