10 篇博文含有标签「CSS」

查看所有标签

10-11-CSS布局-flex布局

下定决心还是再学一遍CSS等前端知识

1. 认识Flex布局和Flex布局的由来

1.1 认识Flex box

Flexbox翻译为弹性盒子
- 弹性盒子是一种用于按行或者按列布局元素的一维布局方法
- 元素可以膨胀以填充额外的空间，收缩以适应更小的空间
- 通畅我们使用Flexbox来进行布局的方案称之为flex布局（flex layout）
flex布局是目前web开发中使用最多的布局方案
- flex布局（Flexible布局，弹性布局）
- 目前特别在移动端可以说已经完全普及
- 在PC端也几乎已经完全普及和使用，只有非常少数的网站依然在用浮动来布局
为什么需要flex布局
- 长久以来，CSS布局中唯一可靠且跨浏览器兼容的布局工具只有floats和positioning
- 但是这两种方法本身存在很大的局限性，使用他们是无奈之举

1.2 原先布局存在的痛点

举例
- 比如在父内容里面垂直居中一个块内容
  - "44 years ago we put a man on the moon, but we still can't vertically center things in CSS." -- by Juozas Kaziukenas, 2013-07-21
- 使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用
- 使多列布局中的所有列采用相同的高度，即使他们包含的内容量不同

1.3 Flex布局的出现

所以长久以来，大家非常期待一种真正可以用于对元素布局的方案：于是Flex布局出现了
- "Nature and nature's laws lay hid in night; God said "Let Newton be" and was light." -- 牛顿的墓志铭
如果担心其兼容性问题
- 可以在CanIuse查询具体的兼容性

2. 两个非常重要的概念

开启了flex布局的元素叫 flex container
flex container里面的直接子元素叫做 flex item

2.1 container

设置display属性为flex或者inline-flex可以成为flex container
- flex：flex container以block-level形式存在
- inline-flex：flex container以inline-level形式存在

2.2 flex item

当flex container中的子元素变成了flex item的时候，具备以下特点
- flex item的布局将受flex container属性的设置来进行控制和布局
- flex item不再严格区分块级元素和行内级元素
- flex item默认情况下是包裹内容的，但是可以设置宽度和高度

3. Flex布局的模型，坐标轴，主轴和交叉轴

Flex布局的模型

main axis
cross axis

4. Flex相关的属性

4.1 应用在flex container上的CSS属性

4.1.1 flex-flow

4.1.2 flex-direction

决定main axis的方向
- row 默认值
- row-reverse
- column
- column-reverse

4.1.3 flex-wrap

nowrap: 默认，单行
wrap: 多行
wrap-reverse: 多行，对比wrap，cross start与 cross end相反

4.1.4 justify-content

4.1.5 align-items

4.1.6 align-content

4.1.7 flex-flow

是flex-direction和flex-wrap的简写属性
- 顺序随便，并且都可以省略

4.1.8 justify-content

justify-content

flex-start: 默认值，与main start 对其
flex-end：与main end对其
center 居中对其
space-between:
- flex items之间的距离相等
- 与main start，main end两端对齐
space-arount:
- flex items之间的距离相等
- flex items与main start，main end之间的距离是flex items之间距离的一半
space-evenly:
- flex items之间的距离相等
- flex items与main start，main end之间的距离等于flex items之间距离

4.1.9 align-items

align-items

align-items 决定了flex items在cross axis上的对齐方式
- normal: 在弹性布局中，效果和stretch一样
- stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
- flex-start: 与cross start对齐
- flex-end：与cross end对齐
- center: 居中对齐
- baseline: 与基准线对齐

4.1.10 align-content

align content

决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
- stretch 默认值：与align-items的stretch类似
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly

4.2 应用在flex items 上的CSS属性

4.2.1 flex-grow

决定了flex items如何扩展（拉伸/成长）
- 默认值是0，可以设置任意非负数字，
- 当flex container在main axis方向上有剩余 size时，flex-grow属性才会有效
如果所有 flex items的flex-grow总和sum超过1，每个flex item扩展的size为
- flex container 的剩余size * flex-grow / sum
flex items扩展后的最终size不能超过max-width/max-height

4.2.2 flex-basis

用来设置flex items在main axis方向上的base size
- auto 默认值
- 具体的宽度数值
决定flex items最终base size的因素，优先级从高到低
- max-width,max-height,min-width,min-height
- flex-basis
- width,height
- 内容本身的size

4.2.3 flex-shrink

4.2.4 order

order越小，越排在前面
可以设置任意整数，默认值是0

4.2.5 align-self

覆盖flex container设置的align-items
- auto

4.2.6 flex

-flex是flex-grow,flex-shrink,flex-basis的简写，可以指定1个，2个或者3个值

单值语法：值必须为以下其中之一 -一个无单位：会被当作flex-grow
- 一个有效的宽度值：会被当作flex-basis的值
- 关键字none，auto或者initial -双值语法
- 第一个值必须为一个无单位数，并且会被当作flex-grow的值
- 第二个必须为以下之一：
  - 一个无单位数：会被当作flex-shrink的值
  - 一个有效的宽度值：会被当作flex-basis的值
三值语法
- 第一个必须无单位: flex-grow
- 第二个必须无单位: flex-shrink
- 第三个必须为一个有效的宽度值：flex-basis
添加span的个数是列数减2

2025年8月3日CSS 学习笔记前端定位 Flex阅读需 5 分钟

10-11-CSS定位-浮动布局

下定决心还是再学一遍CSS等前端知识

Day09

1. position定位

将position设置为absolute,fixed
- 可以随意设置宽高
- 宽高默认由内容决定
- 居中

2025年5月11日CSS 学习笔记前端定位浮动布局阅读需 1 分钟

10-CSS学习笔记-额外知识补充

下定决心还是再学一遍CSS等前端知识

Day08

1. border图形

border-right-color
旋转
- transform: rotate(90deg);
- transform-origin: center/25%; 旋转中心点
https://css-tricks.com/the-shapes-of-css

2. Web网络字体

之前通过font-family设置字体
- 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体
- 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的
- 这就是所谓的web-safe字体
- 并且这种默认可选的字体并不能进行一些定制化的需求

2.1 web fonts 的工作原理

首先，需要通过一些渠道获取到希望使用的字体
- 对于某些收费的字体，需要获取到对应的授权
- 对于某些公司定制的字体，需要设计人员来设计
- 对于某些免费的字体，需要获取到对应的字体文件
其次，在我们的CSS代码当中使用该字体（重要）
- 具体看后面的操作流程
最后，在部署静态资源的时候，将HTML/CSS/JavaScript/Font一起部署在静态服务器中
用户的角度
- 浏览一个网页的时候，因为代码中有引入字体文件，字体文件会被一起下载下来
- 浏览器会根据使用的字体在下载的字体文件中查找，解析，使用对应的字体
- 在浏览器中使用对应的字体显示内容

流媒体
- 封装格式
- 编码格式

3. Web字体图标

4. CSS精灵图

spritecow.com

5. cursor属性

2025年5月5日CSS 学习笔记前端 border图形字体 CSS精灵图 cursor阅读需 2 分钟

9-CSS学习笔记-结构伪类

下定决心还是再学一遍CSS等前端知识

1. 结构伪类

1.1 `nth-child`

奇数
- nth-child(2n+1)
偶数
- nth-child(2n)
前几个
- nth-child(-n+5)

1.2 `nth-last-child`

nth-last-child(1)
- 倒数第一个
nth-last-child(-n+2)
- 最后2个

1.3 `nth-of-type`

和nth-child类似，但是这个计数的时候只计算同种类的元素

1.4 `nth-last-of-type`

1.5 其他

:first-child
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:root
:empty
- 里面完全空白的元素

1.6 否定伪类

:not(), 格式是:not(x)
- x是简单选择器

2025年5月4日CSS 学习笔记前端阅读需 1 分钟

8-CSS学习笔记-高级元素的使用

下定决心还是再学一遍CSS等前端知识

1. 列表元素

1.1 列表的实现方式

方案一：使用div
方案二：使用列表元素，
事实上现在很多网站对于列表元素没有很强烈的偏好，更加不拘一格，按照自己的风格来布局
- 原因是列表元素默认的CSS样式，让他用起来不是很方便
- 比如列表元素往往有很多的限制，ul/ol中智能存放li，li再存放其他元素，默认样式等
- 虽然我们可以通过重置来解决，但是我们更喜欢自由的div
HTML提供了3组常用的展示列表的元素
- 有序列表：ol, li
- 无序列表：ul, li
- 定义列表：dl, dt, dd

2. 表格元素

在网页中，对于某些内容的展示使用表格元素更为合适和方便
常见元素
- table
- tr
- td
- 后增加的元素
  - thead
    - td->th
  - tbody
  - tfoot
  - caption
其他已经不推荐用了
- table元素应该使用CSS制定样式
- 设置margin-left, margin-right为auto，来实现类似于align属性的效果
案例
- border-collapse
  - collapse折叠
单元格合并
- 跨列合并：
  - colspan
  - 在最左边的单元格使用，并省略掉合并的td
- 跨行合并
  - rowspan
  - 在最上面的单元格使用，并省略掉合并的td
案例：
- 快捷写法：tr*12>td{数学}*6
- 技巧
  - table tr:nth-child(-n + 2){} :n的取值，0和整数

3. 表单元素

和用户交互的重要方式之一
常见的表单元素
- form
  - 表单，一般情况下，其他表单相关的元素都是他的后代
- input
  - 单行文本输入框，单选框，复选框，按钮
- textarea
  - 多行文本框
- select，option
  - 下拉选择框
- button
  - 按钮
- label
  - 表单元素的标题

3.1 input

input
- 是一个行内替换元素
- type
  - text
  - password
  - ratio
  - checkbox
  - button
  - reset
  - submit
  - file
  - readonly
  - disabled
  - checked
    - 默认选中，只有当type为ratio或checkbox的时候可以用
  - autofocus
  - name
  - value
  - time
  - date

3.1.1 布尔属性（boolean attributes)

常见的有
- disabled, checked, readonly, multiple, autofocus, selected
布尔属性可以没有属性值，写上属性名就代表使用这个属性

3.1.2 表单按钮

按钮
- button
- reset
- Submit

3.1.3 input和label的关系

label可以展示会input的标题
label可以跟某个input绑定，点击某个label就可以激活对应的input变成选中

<label for="username">
    用户：
</label>
<input id="username" type="text"/>

<label for="username">
    用户：
    <input id="username" type="text"/>
</label>

3.1.4 ratio

在类型为radio的input中，如果name一样，那么两个radio就会互斥

<label for="male">
    <input id="male" type="radio" name="sex" value="male">男
</label>

<label for="female">
    <input id="female" type="radio" name="sex" value="female">女
</label>

3.1.5 checkbox

<label for="basketball">
    <input id="basketball" type="checkbox" name="hobby" value="basketball">篮球
</label>

<label for="football">
    <input id="football" type="checkbox" name="hobby" value="football">足球
</label>

3.2 form常见的属性

4. Emmet语法

4.1 认识Emmet语法

前身为（Zen Coding) 是一个能大幅度提高前端开发效率的一个工具
- vscode内置了Emmet语法，在后缀为.html/.css中输入缩写后按tab/Enter键即可自动生成相应的代码
举例
- ! == html:5
>（子代）和+兄弟

4.2 HTML Emmet

4.3 CSS Emmet

2025年5月3日CSS 学习笔记前端阅读需 3 分钟

6 - CSS学习笔记-盒子模型

下定决心还是再学一遍CSS等前端知识

1. 盒子模型-margin

1.1 margin 基本使用

换行符会造成两个元素之间有间距

暂时可以通过去除（后面介绍通过浮动，flex布局去除）

body {
    font-size: 0; 
}

依次尝试：

margin-top
margin-bottom
margin-right
margin-left
margin 全写，以及缩写属性

1.2. padding 和 margin对比

大box包含小box，如果设置大box的padding，会让大box撑开
- box-sizing: boder-box;
设置小box的margin
- 好处：不用设置boder-box，
- 坏处：但是对于margin-top会让大box也往下跑
  - 因为做了一个传递，把margin传递给了父元素
  - 解决办法，在父元素设置: overflow: auto;,不是最好的方式，后面讲
补充
- margin用来设置元素和元素之间的距离（一般是兄弟元素）
- padding

1.3. margin上下传递问题

左右不会传递
margin-top传递
- 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递
- 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
如何防止出现传递问题？
- 给父元素设置padding-top ，padding-bottom
- 给父元素设置border
- 触发BFC（Block Formatting Context）(块级格式上下文)：设置overflow为auto
建议：
- margin一般用来设置兄弟元素之间的间距
- padding一般用来设置父子元素之间的间距

1.4. 上下margin的折叠

垂直方向上相邻2个margin(margin-top, margin-bottom)有可能合并为一个margin，这种现象叫做collapse（折叠）
水平方向上的margin(margin-left, margin-right)永远不会折叠
折叠后最终值的计算规则
- 两个值比较，取较大的值
如何防止margin折叠
- 只设置其中一个元素的margin
兄弟块级元素之间margin的折叠

父子块级元素之间margin的折叠

1.5. 块级元素的水平居中-`margin-auto`

浏览器默认会给body设置margin: 8px
块级元素 block box
- block box width = width + padding + border + margin
- 但是默认margin-left是0
- margin-right也是0
- 但是浏览器优先展示width，然后再把剩余的空间设给right
如果希望居中，则把margin-left和margin-right都设置为auto
点评
- 这种方式不太好，用flex布局则是更好
- 比如float浮动也不应该用来做布局

2.盒子模型-外轮廓-outline

outline表示元素的外轮廓
- 不占用空间
- 默认显示在border的外面
outline相关属性
- outline-width
- outline-style
- outline-color
- Outline: outline-width, outline-style, outline-color

3.盒子模型-阴影-box-shadow

box-shadow属性可以设置一个或者多个阴影
- 每个阴影用shadow表示
- 多个阴影之间用逗号隔开，从前到后叠加
常见格式
- none | <shadow>#
- <shadow> = inset? && <length>{2, 4} && <color>?
- 第一个length: offset-x,水平方向的偏移，正数往向右
- 第二个length: offset-y,水平方向的偏移，正数往向下
- 第3个length：blur-radius, 模糊半径
- 第4个length：spread-radius, 延伸半径
- color: 阴影的颜色，如果没有设置，就跟随color属性的颜色
- inset: 外框阴影变成内框阴影
坐标轴
blur：阴影的模糊度
在线网站
- https://html-css-js.com/css/generator/box-shadow/

4.盒子模型-文字阴影-text-shadow

类似于box-shadow，用于给文字添加阴影
相当于box-shadow，但是没有spread-radius的值
没有向内
https://html-css-js.com/css/generator/text-shadow/

5. 行内非替换元素的注意事项

span/a/strong/i
- width,height不生效
- padding, border, margin，上下可以撑大，但是不占空间

6. 盒子模型-盒子尺寸计算-box-sizing

背景色有没有设置到border下面（有设置）
前景色会在border没有设置颜色的情况下，显示出来color颜色

.box {
    width: 100px;
    height: 100px;
    background-color: #f00;
    color: orange;
    padding: 30px;
    border: 10px solid;
}

box-sizing用来设置盒子模型中宽高的行为
content-box
- padding, border都布置在width，height外边
border-box
- padding, border都布置在width，height里面

7. 案例

灰色背景：#f5f5f5
单行显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2025年5月2日CSS 学习笔记前端阅读需 4 分钟

7 - CSS学习笔记-背景

下定决心还是再学一遍 CSS 等前端知识

1. background

1.1 background-image

用于设置元素的背景图片
- 会盖在（不是覆盖）background-color 的上面
如果设置了多张图片
- 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

1.2 background-repeat

1.3 background-size

auto: 默认值，以背景图本身大小显示
cover：缩放背景图，以完全覆盖铺满元素，可能背景图片部分看不见
contain：
<percentage>
Length

1.4 background-position

用于设置背景图片在水平，垂直方向上的具体位置
- 可以设置具体的数值，比如 20px 30px
- 水平方向还可以设值：left, center, right
- 垂直方向还可以设值: top, center, bottom
- 如果只设置了一个方向，另一个方向默认是 center

1.5 background- attachment

决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
可以设置以下三个值
- scroll：表示背景相对于元素本身固定，而不是随着它的内容滚动
- local：表示背景相对于元素的内容固定，如果一个元素拥有滚动机制，背景将会随着元素的内容滚动
- fixed

1.6 缩写属性

1.7 background-image vs. img

	img	background-image
性质	HTML 元素	CSS 样式
图片是否占用空间	✅	❌
浏览器右键直接查看地址	✅	❌
支持 CSS Sprite（精灵图）	❌	✅
更有可能被搜索引擎收录	✅（结合 alt 属性）	❌

2025年5月2日CSS 学习笔记前端阅读需 2 分钟

CSS学习笔记-CSS选择器

下定决心还是再学一遍CSS等前端知识

CSS选择器

什么是CSS选择器
- 按照一定的规则选出符合条件的元素，为之添加CSS样式
选择器的种类繁多
- 通用选择器(universal selector)
- 元素选择器(type selectors)
- 类选择器(class selectors)
- id选择器(id selectors)
- 属性选择器(attribute selectors)
- 组合(combinators)
- 伪类(pseudo-classes)
- 伪元素(psedo-elements)

通用选择器(universal selector)

选择所有的元素
一般用来给所有元素设置一些通用性的设置
- 比如内边距，外边距
- 比如重置一些内容
效率比较低，尽量不要使用
body 默认有一个margin 8px

* {
    font-size: 20px;
}

/*尽量不用通配符*/

body, p, div, h2, span {
    margin: 0;
    padding: 0;
}

简单选择器

一个HTML文档里面的id值是唯一的，不能重复
- id值如果由多个单词组成，单词之间可以用中划线，下划线连接，也可以使用驼峰标识
- 最好不要用标签名作为id值
中华线又叫连字符（hyphen）

元素选择器(type selectors)，使用元素的名称

类选择器(class selectors)，`.类名`

id选择器(id selectors)，`#id`

属性选择器

拥有某一个属性 [att]
属性等于某个值 [att=val]
其他了解下
- [att*=val]: 属性值包含某一个值val
- [att^=val]: 属性值以val开头
- [att$=val]: 属性值以val结尾
- [att|=val]: 属性值等于val或者以val开头后面紧跟连接符-
- [att~=val]: 属性值包含val，如果有其他值，比如以空格和val分割

<div title="div"></div>

<h2 title="h2"></h2>

[title] {
    color: red;
}

[title=div] {
    background-color: red;
}

后代选择器(descendant combinator)

后代选择器一：所有后代（直接和间接的后代）
- 选择器之间以空格分割
  - .box span {xxx}
后代选择器二：直接子代选择器（必须是直接自带）
- 选择器之间以 >分割

兄弟选择器(sibling combinator)

相邻兄弟选择器
- .box + .content {}
普遍兄弟选择器 ~
- .box ~ div {}

选择器组

交集选择器

同时符合两个选择器条件，为了精准选择某一个元素

<div class="box"></div>
<p class="box"></p>

div.box {
    xxx
}

并集选择器

符合一个选择器条件即可，两个选择器以,分割

body, h2, p, div {
    xxx
}

伪类

认识伪类

Pseudo-classes，伪类
伪类是选择器的一种，用于选择处于特定状态的元素
常见的伪装
- 动态伪类(dynamic pseudo-classes)
  - :link
  - :visited
  - :hover
  - :active
  - :focus
- 目标伪类(target pseudo-classes)
  - :target
- 语言伪类(language pseudo-classes)
  - :lang(en)
- 元素状态伪类(UI element states pseudo-classes)
  - :enabled
  - :disabled
  - :checked
- 结构伪类（structural pseudo-classes）
  - :nth
    - :nth-child()
    - :nth-last-child()
    - :nth-of-type()
    - :nth-last-of-type()
  - :first
    - :first-child()
    - :last-last-child()
    - :first-of-type()
    - :last-of-type()
  - 第三类
    - :root
    - :only-child
    - :only-of-type
    - :empty
- 否定伪类(negation pseudo-classes) :not()

div:hover{

}

动态伪类(dynamic pseudo-classes)

:link
- a:link 未访问的连接
:visited
- a:visited 已访问的连接
:hover
- a:hover 鼠标挪动到链接上
:active
- a:active 激活的连接(鼠标在链接上长按住未松开)
:focus
- 指当前拥有输入焦点的元素（能接收键盘输入）
- 文本输入框一聚焦后，背景就会变成红色
- 因为链接a元素可以被键盘的tab键选中聚焦，所以:focus也适用于a元素
使用注意
- :hover必须放在:link和:visited后面才能完全生效
- :active必须放在:hover后面才能完全生效
- 所以建议的编写顺序是:link、:visited、:hover、:active
除了a元素，:hover、:active也可以用在其他元素上
动态伪类的编写顺序建议为：
- :link、:visited、:focus、:hover、:active
直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

伪元素(pseudo-elements)

常见的伪元素有
- :first-line, ::first-line
- :first-letter, ::first-letter
- :before, ::before
- :after, ::after
为了区分伪类和伪元素，建议用两个冒号
:first-line, ::first-line
- 可以针对首行文本设置属性

2025年4月26日CSS 学习笔记前端阅读需 4 分钟

CSS学习笔记2

下定决心还是再学一遍 CSS 等前端知识

大纲

CSS 文本属性

text-decoration

text-decoration(常用):用于设置文字的装饰线
- none：无任何装饰线，可以去除 a 元素默认的下划线
- underline: 下划线
- overline: 上划线
- line-through: 中划线
企业中常用的
- css/reset.css 在里面设置, 在 html 通过 link 引入

a {
  text-decoration: none;
}

text-transform

text-transform(一般)
- capitalize（每个单词的首字母大写）
- uppercase 大写
- lowercase 小写
- none 没有任何影响

text-indent

text-indent(一般): 设置第一行内容的缩进
- font-size: 40px; text-indent: 80px;
- text-indent: 2em;

text-align

text-align(重要)
- 直接翻译过来设置文本的对齐方式
- MDN：定义行内内容（例如文字），如何想对它的块父元素对其
- 常用的值
  - left
  - right
  - center
  - justify：两端对齐，基本很少用
    - 需要和text-align-last: justify一起配合用
- W3C
  - This shorthand property sets the 'text-align-all' and 'text-align-last' properties and describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill

word/letter-spacing

word/letter-spacing
- letter-spacing: 10px;
- word-spacing: 10px;

CSS 字体的属性

font-size

常用设置
- 具体数值 + 单位：默认为 16px（浏览器设置我们自己的大小就是 16px）
- em
- 百分比
  - 可以继承

font-family

用于设置文字的字体名称 - 可以设置 1 个或者多个字体名称 - 浏览器会选择列表中第一个该计算机上有安装的字体 - 或者是通过 @font-face 指定的可以直接下载的字体可以继承

font-weight(重要)

用于设置文字的粗细(重量)
常见的取值
- 100, 200, 300, 400, 500, 600, 700, 800, 900, 每一个数字表示一个重量
- normal: 等于 400
- bold: 等于 700
strong, b, h1-h6 默认设置的就是 bold

font-style（一般）

设置文字的常规，斜体显示
- normal
- italic：斜体，字体本身支持斜体时，显示的斜体
- oblique：斜体，不管字体支持不支持斜体，都给字体做倾斜，看起来像斜体
早期 em, i, cite, address, var, dfn 等元素的 font-style 默认就是 italic

font-variant(了解)

可以影响小写字母的显示形式，variant 是变形的意思

可以设置的值如下： - normal - small-caps 将小写字母替换为缩小过的大写字母 - My Name Is ->

line-height(常用)

用于设置文本的行高
- 可以先简单理解为一行文字所占据的高度
为什么文本需要行高
- 方便文本的阅读和理解
严格定义
- 两行文字(基线)之间的间距
- 基线：与小写字母 x 对齐的线

基线以及行距

line-height - 文本的高度 = 行距
文本默认会在一行的中间显示

font

font 是一个缩写属性
- font-style
- font-size
- font-weight
- font-variant
- font-family
- line-height
- font-style font-variant font-weight font-size/line-height font-family;
规则
- font-style font-variant font-weight 可以随意调换顺序，也可以省略
- /line-height 可以省略，如果不省略，必须跟在 font-size 后面
  - 如果是数值，表示 2 倍或者 1.5 倍前面的行高
- font-size, font-family 不可以调换顺序，不可以省略

font-size: 30px;
font-weight: 700;
font-variant: small-caps;
font-style: italic;
font-family: serif;
line-height: 30px;

font: italic small-caps 700 30px/30px serif;

CSS 选择器

2025年4月21日CSS 学习笔记前端阅读需 3 分钟

CSS学习笔记

下定决心还是再学一遍 CSS 等前端知识

CSS

三种引入方式
- inline
- <style></style>
- 文件引入的方式：<link rel="stylesheet", href="./css/style.css">
index.css, 把其他 CSS 文件放到这里

@import url(./style.css) @import url(./test.css); /* @import "./style.css"
   但是推荐上面的那一种，用括号的方式，意思是作为函数参数传入
*/

CSS 的注释
- /*CSS的注释*/

一个好问题：如果写多了注释，用户在下载文件的时候会不会太大，造成打开网页缓慢？

这个考虑是对的，但未来我们会用打包工具，比如 webpack，上传到服务器的代码会删除我们写的注释

常见的 CSS 元素

必须掌握的 CSS 属性

定位（Position）和布局（Layout）

展示（display）和可见（visibility）

盒子模型（box model）顺序

背景设置（background）

字体（Font），文本（text）

其他属性（Other Property）

CSS 属性的官方文档

官方文档
- https://w3.org/TR?tag=css
CSS 推荐文档地址
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
由于浏览器版本，CSS 版本的问题，查询某些 CSS 是否可用
- 可以到 caniuse.com，查询 CSS 属性的可用性

案例练习

/* 方式一：改变元素的特性和垂直方向的布局 */
display: inline-block;
vertical-align: top;

/* 方式二： 通过浮动完成 */
float: left;

额外知识补充 2

link 元素

link 元素是外部资源链接元素，规范了文档与外部资源的关系
- link 元素通常是在 head 元素中
最常用的链接是样式表（CSS）
- 此外也可以被用来创建站点图标（比如"favicon"图标）
link 元素常见的属性
- href：此属性指定被链接资源的 URL。URL 可以是绝对的，也可以是相对的
- ref：指定链接类型，常见的链接类型
  - icon：站点图标
  - stylesheet：CSS 样式
属性
- dns-prefetch
preload 预加载，在 webpack 会讲到

进制

二进制：0b 开头
八进制：0o 开头
16 进制：0x 开头

CSS 里面颜色的表示方法

颜色关键字
RGB 颜色
- RGB 是一种色彩空间，通过 R，G，B 三原色来组成不同的颜色
- RGB 各个原色的取值范围是 0-255
当所有颜色都是 0 的时候，呈现黑色
- 黑色是最纯洁的颜色
RGB 的表示方法
- 十六进制（#RRGGBB[AA]）
- 十六进制（#RGB[A]）
- 函数符 RGB(100, 100, 100)
- RGBA(), A 表示透明度

Chrome 浏览器开发者工具

打开
- 右键->检查
- 快捷键 F12
其他技巧
- 快捷键：ctrl+ 可以调整页面或者工具的字体大小
- 通过删除某些元素来查看网页结构
- 通过增删 css 来调试网页样式

浏览器的渲染流程 HTML，CSS

浏览器的渲染流程

Dom Tree -> Render Tree(With CSS)

2025年4月20日CSS 学习笔记前端阅读需 3 分钟

1. 认识Flex布局和Flex布局的由来​

1.1 认识Flex box​

1.2 原先布局存在的痛点​

1.3 Flex布局的出现​

2. 两个非常重要的概念​

2.1 container​

2.2 flex item​

3. Flex布局的模型，坐标轴，主轴和交叉轴​

4. Flex相关的属性​

4.1 应用在flex container上的CSS属性​

4.1.1 flex-flow​

4.1.2 flex-direction​

4.1.3 flex-wrap​

4.1.4 justify-content​

4.1.5 align-items​

4.1.6 align-content​

4.1.7 flex-flow​

4.1.8 justify-content​

4.1.9 align-items​

4.1.10 align-content​

4.2 应用在flex items 上的CSS属性​

4.2.1 flex-grow​

4.2.2 flex-basis​

4.2.3 flex-shrink​

4.2.4 order​

4.2.5 align-self​

4.2.6 flex​

1. position定位​

1. border图形​

2. Web网络字体​

2.1 web fonts 的工作原理​

3. Web字体图标​

4. CSS精灵图​

5. cursor属性​

1. 结构伪类​

1.1 nth-child​

1.2 nth-last-child​

1.3 nth-of-type​

1.4 nth-last-of-type​

1.5 其他​

1.6 否定伪类​

1. 列表元素​

1.1 列表的实现方式​

2. 表格元素​

3. 表单元素​

3.1 input​

3.1.1 布尔属性（boolean attributes)​

3.1.2 表单按钮​

3.1.3 input和label的关系​

3.1.4 ratio​

3.1.5 checkbox​

3.2 form常见的属性​

4. Emmet语法​

4.1 认识Emmet语法​

4.2 HTML Emmet​

4.3 CSS Emmet​

1. 盒子模型-margin​

1.1 margin 基本使用​

1.2. padding 和 margin对比​

1.3. margin上下传递问题​

1.4. 上下margin的折叠​

1.5. 块级元素的水平居中-margin-auto​

2.盒子模型-外轮廓-outline​

3.盒子模型-阴影-box-shadow​

4.盒子模型-文字阴影-text-shadow​

5. 行内非替换元素的注意事项​

6. 盒子模型-盒子尺寸计算-box-sizing​

7. 案例​

1. background​

1.1 background-image​

1.2 background-repeat​

1.3 background-size​

1.4 background-position​

1.5 background- attachment​

1.6 缩写属性​

1.7 background-image vs. img​

CSS选择器​

通用选择器(universal selector)​

简单选择器​

元素选择器(type selectors)， 使用元素的名称​

1. 认识Flex布局和Flex布局的由来

1.1 认识Flex box

1.2 原先布局存在的痛点

1.3 Flex布局的出现

2. 两个非常重要的概念

2.1 container

2.2 flex item

3. Flex布局的模型，坐标轴，主轴和交叉轴

4. Flex相关的属性

4.1 应用在flex container上的CSS属性

4.1.1 flex-flow

4.1.2 flex-direction

4.1.3 flex-wrap

4.1.4 justify-content

4.1.5 align-items

4.1.6 align-content

4.1.7 flex-flow

4.1.8 justify-content

4.1.9 align-items

4.1.10 align-content

4.2 应用在flex items 上的CSS属性

4.2.1 flex-grow

4.2.2 flex-basis

4.2.3 flex-shrink

4.2.4 order

4.2.5 align-self

4.2.6 flex

1. position定位

1. border图形

2. Web网络字体

2.1 web fonts 的工作原理

3. Web字体图标

4. CSS精灵图

5. cursor属性

1. 结构伪类

1.1 `nth-child`

1.2 `nth-last-child`

1.3 `nth-of-type`

1.4 `nth-last-of-type`

1.5 其他

1.6 否定伪类

1. 列表元素

1.1 列表的实现方式

2. 表格元素

3. 表单元素

3.1 input

3.1.1 布尔属性（boolean attributes)

3.1.2 表单按钮

3.1.3 input和label的关系

3.1.4 ratio

3.1.5 checkbox

3.2 form常见的属性

4. Emmet语法

4.1 认识Emmet语法

4.2 HTML Emmet

4.3 CSS Emmet

1. 盒子模型-margin

1.1 margin 基本使用

1.2. padding 和 margin对比

1.3. margin上下传递问题

1.4. 上下margin的折叠

1.5. 块级元素的水平居中-`margin-auto`

2.盒子模型-外轮廓-outline

3.盒子模型-阴影-box-shadow

4.盒子模型-文字阴影-text-shadow

5. 行内非替换元素的注意事项

6. 盒子模型-盒子尺寸计算-box-sizing

7. 案例

1. background

1.1 background-image

1.2 background-repeat

1.3 background-size

1.4 background-position

1.5 background- attachment

1.6 缩写属性

1.7 background-image vs. img

CSS选择器

通用选择器(universal selector)

简单选择器

元素选择器(type selectors)，使用元素的名称