CSS

CSS(层叠样式表)

三大特性

层叠性（Cascading）

层叠性是指当多个样式规则应用于同一个元素时，浏览器会根据一定的规则来决定最终应用哪个样式。这些规则基于样式表的来源（内联、嵌入、外部）、重要性（!important）和特异性（Specificity）。

特性点 描述
定义 控制多个样式定义同时应用到某个元素时，如何决定哪个样式定义将被应用
原则 1. 样式冲突时，遵循就近原则，哪个样式离结构近就执行哪个。
2. 样式不冲突时，不会层叠。
影响因素 样式表的来源（内联 > 嵌入 > 外部）、重要性（!important）、特异性（Specificity）

继承性（Inheritance）

继承性是指某些CSS属性可以从父元素继承到子元素。这有助于减少样式表的重复，提高代码的可维护性。

特性点 描述
定义 某些样式定义可以被继承到其子元素中
常见可继承属性 文本相关属性（如color、font-family、font-size、line-height等）
不可继承属性 盒模型相关属性（如margin、padding、border、width、height等）
用途 简化样式定义，提高代码重用性

优先级（Specificity）

优先级决定了当多个样式规则应用于同一个元素时，哪个规则将最终生效。优先级通过一组特定的数字来表示，这些数字分别对应不同类型的选择器。

特性点 描述
定义 应用于一个元素的多个样式规则中，哪一个规则优先级最高，从而被应用到元素上
选择器权重 1. 内联样式（在HTML元素内部）：1000
2. ID选择器：100
3. 类选择器、伪类选择器和属性选择器：10
4. 元素选择器和伪元素选择器：1
5. 通配符选择器、关系选择器和否定伪类选择器：0
权重计算 复合选择器（如后代选择器、交集选择器等）的权重是其所包含选择器的权重之和，但权重值不会进位
!important规则 使用!important声明的样式规则将覆盖任何其他样式规则，具有最高优先级

一、基础篇

引入方式

内部样式表

在title标签下方添加style双标签，在style标签里写CSS代码

1
2
3
4
5
6
7
8
9
10
<title>Title</title>
<style>
    /*形式：选择器{}*/
/*例:*/
    p {
        CSS属性:属性值
    }
    
</style>
<p>文本</p>

选择器：选择要修饰的标签

外部样式表

实际开发使用

  • CSS代码写在CSS文件中(.css)
  • 在HTML中用link标签引入
1
<link rel="stylesheet" href="URL或本地路径">

行内样式

需配合JavaScript使用

CSS写在标签的style属性值里(多个CSS属性用分号分隔)

CSS选择器

作用

查找标签，设置样式

基础选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

标签选择器

  • 使用标签名作为选择器
  • 选中同名标签设置相同样式
  • 例：p，h1……
1
2
3
p {

}

类选择器

  • 定义类选择器(.类名 {})
  • 使用类选择器(标签添加 class=”类名”)
  • 一个标签可使用多个类名
  • 类名命名规范：英文，用-连接单词
1
2
3
.类名 {

}

id选择器

  • 一般配合JavaScript使用
  • 定义id选择器（#id名 {}）
  • 使用id选择器(标签添加id=”id名”)
  • 同一个id选择器，在一个页面中只能用一次
1
2
3
#id名 {

}

通配符选择器

  • 不需调用，所有标签都将被修饰
1
2
3
* {
	
}

复合选择器

分类
复合选择器 形式 说明
后代选择器 A B 选择所有属于A元素后代的B元素
子选择器 A > B 选择作为A元素直接子元素的B元素
相邻兄弟选择器 A + B 选择紧接在A元素之后的同级B元素
通用兄弟选择器 A ~ B 选择所有作为A元素兄弟的B元素
属性选择器 E[attr="value"] 根据元素的属性及属性值来选择元素
伪类选择器 E:pseudo-class 选择处于特定状态的元素
伪元素选择器 E::pseudo-element 选择元素的特定部分
伪类选择器

伪类：元素状态

伪类选择器 描述
:link 选择所有未访问的链接
:visited 选择所有已访问的链接
:hover 选择鼠标悬停在上面的元素
:active 选择活动元素（例如，鼠标点击不放时的元素）
:focus 选择获得焦点的元素
:enabled 选择启用的表单控件
:disabled 选择禁用的表单控件
:checked 选择被选中的<input>元素（如复选框或单选按钮）
:first-child 选择父元素的第一个子元素
:last-child 选择父元素的最后一个子元素
:nth-child(n) 选择父元素的第n个子元素

说明

:nth-child(公式)

功能 公式
偶数标签 2n
奇数标签 2n+1;2n-1
5的倍数的标签 5n
第五个以后的标签 n+5
第五个以前的标签 -n+5
伪元素选择器

作用：创建虚拟元素，摆放装饰性的内容

选择器 说明
E::before 在E元素里面的最前面添加一个伪元素
E::after 在E元素里面的最后面添加一个伪元素
  • 必须设置content:”伪元素内容”属性
  • 伪元素默认是行内显示
  • 权重与标签选择器相同

CSS属性

文字控制属性

描述 属性 属性值 注释
字体大小 font-size 文字尺寸（单位：px）
字体粗细 font-weight *数字(正常:400 加粗:700)
*关键字(正常:normal 加粗:bold)
字体倾斜 font-style *normal(正常) *italic(倾斜)
行高(设置间距) line-height *数字+px
*数字(当前标签font-size值的倍数)		 垂直居中技巧：行高等于盒子高度
字体族 font-family 字体名(可多个，从左到右，逗号分隔) 最后一个应设无衬线字体族名(如sans-serif)
字体复合属性 font font: 倾斜 加粗 字号/行高 字体; 设置网页文字公共属性时用
字号和字体值必须有
文本缩进 text-indent *数字+px
*数字+em(1em表示当前字号大小)
文本对齐 text-align left 左对齐
center 居中
right 右对齐		 默认左对齐
修饰线 text-decoration none 无
underline 下划线
line-through 删除线
overline 上划线
颜色 color 颜色关键字
rgb(r,g,b)
rgba(r,g,b,a)
十六进制表示法 #RRGGBB

背景属性

属性 描述 示例
background-color 背景色 background-color: #ff0000;
background-color: rgb(255, 0, 0);
background-image 背景图 background-image: url('image.jpg');
background-repeat 背景图平铺方式
(背景图像是否及如何重复)		 no-repeat;
repeat-x;（水平重复）
repeat-y;（垂直重复）
repeat;
background-position 背景图起始位置 关键字left right center top bottom;（可结合使用)
坐标background-position: 20px 30px;(正负均可)
background-size 背景图尺寸 关键字 cover;（覆盖整个元素，可能显示不全） contain;（包含整个图像，可能有露白）
百分比
数字+单位background-size: 100px 200px;（指定宽度和高度）
background-attachment 背景图固定 background-attachment: scroll;（默认，随页面滚动）
background-attachment: fixed;（不随页面滚动）
background 背景复合属性 background: #ff0000 url('image.jpg') no-repeat left top;

注释

background-size若用百分比，则图片宽度为盒子宽度×百分比，图片高度为图片高度×百分比

Emmet写法

HTML

说明 标签结构 Emmet
类选择器
标签名.类名
id选择器
标签名#id名
同级标签

div+p
父子级标签

div>p
多个相同标签

span*3
有内容的标签 div{内容} div{内容}
Emmet缩写 展开后的HTML代码 说明
! <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html> 快速生成HTML5模板
h1 <h1></h1> 生成一级标题
h2 <h2></h2> 生成二级标题
h3 <h3></h3> 生成三级标题
h4 <h4></h4> 生成四级标题
h5 <h5></h5> 生成五级标题
h6 <h6></h6> 生成六级标题
p <p></p> 生成段落
ul>li*3 <ul><li></li><li></li><li></li></ul> 生成一个包含三个列表项的无序列表
ol>li*3 <ol><li></li><li></li><li></li></ol> 生成一个包含三个列表项的有序列表
a[href="#"] <a href="#"></a> 生成一个链接，并自动添加href属性
img[src="path/to/image.jpg" alt="Description"] <img src="path/to/image.jpg" alt="Description"> 生成一个图片标签，并自动添加src和alt属性
div.class <div class="class"></div> 生成一个div元素，并为其添加一个类名
div#id <div id="id"></div> 生成一个div元素，并为其添加一个ID
div.class#id <div class="class" id="id"></div> 生成一个div元素，并同时为其添加一个类名和ID

CSS

大多数简写方式为属性单词的首字母

Emmet缩写 描述 示例
w 宽度（width） w100 -> width: 100px;
h 高度（height） h50 -> height: 50px;
m 外边距（margin） m10 -> margin: 10px;
p 内边距（padding） p20 -> padding: 20px;
bg 背景（background） bgc -> background-color: #fff;
fs 字体大小（font-size） fs16 -> font-size: 16px;
c 颜色（color） c#3 -> color: #333;
bd 边框（border） bd1 -> border: 1px solid #000;
br 边框半径（border-radius） br5 -> border-radius: 5px;
pos 定位（position） posa -> position: absolute;
dis 显示类型（display） dib -> display: inline-block;
ov 溢出（overflow） ovh -> overflow: hidden;
fl 浮动（float） flr -> float: right;
op 透明度（opacity） op5 -> opacity: 0.5;
z z轴位置（z-index） z10 -> z-index: 10;
@f 字体族（font-family） @fa -> font-family: Arial;
text- 文本相关属性（text-align等） text-c -> text-align: center;
lh 行高（line-height） lh150 -> line-height: 150%;
: 伪类和伪元素（:hover等） a:h -> a:hover {}

显示模式

分类

块级元素
  • 独占一行
  • 宽度默认为父级的100%
  • 添加宽高元素生效
行内元素
  • 一行共存多个
  • 尺寸由内容定
行内块元素
  • 一行共存多个
  • 尺寸由内容定
  • 加宽高生效

转换显示模式

加属性display

属性值 效果
block 块级
inline-block 行内块
inline 行内

盒子模型

属性

属性 说明 属性值
width height 内容区域 像素
padding 内边距(内容与盒子边缘之间) 像素
border(bd) 边框线 像素 线条样式 颜色
margin 外边距(盒子外面) 像素
border-radius 圆角 像素/百分比
(圆角半径)
box-shadow 阴影 见说明

说明

border

​ solid实线，dashed虚线，dotted点线，double双实线

border-radius

​ 从左上角顺时针赋值，没有赋值的与对角相同

取值个数 说明
一个值 四角
四个值 左上 右上 右下 左下
三个值 左上 (右上+左下) 右下
两个值 (左上+右下)(右上+左下)

​ 常见应用

​ 正圆形状：给正方形盒子设置圆角半径为宽高一半/50%

​ 胶囊形状：给长方形盒子设置圆角半径为盒子高度一半

box-shadow

属性值 属性值取值
水平偏移量(必须) 正值（阴影向右偏移）、负值（阴影向左偏移）、0（无偏移）
垂直偏移量(必须) 正值（阴影向下偏移）、负值（阴影向上偏移）、0（无偏移）
模糊半径 正值（模糊效果）、0（无模糊效果）、不允许负值
扩散半径 正值（阴影扩散）、0（无扩散）、不允许负值
颜色 RGBA、HEX、HSLA等CSS颜色值
插入方式 inset（内阴影）、省略或outset（外阴影，默认值）

box-shadow属性可以接受多个阴影值，每个阴影之间用逗号分隔。

单方向

​ border-方位名词(bd方位名词首字母)

​ padding-方位名词

​ margin-方位名词

多值写法

写法一：

​ 例：

1
2
3
padding-top:10px;
padding-right:20px
...

写法二：

取值个数 示例 含义
一个值 padding:10px 四个方向
四个值 padding:10px 20px 40px 80px 上右下左
三个值 padding:10px 40px 80px 上(左右)下
两个值 padding:10px 80px (上下)(左右)

尺寸计算

默认：

​ 盒子尺寸=内容尺寸+border尺寸+内边距尺寸

减尺寸：

  • 手动减border/padding尺寸
  • 内减模式：box-sizing:border-box

清除默认样式

1
2
3
4
* {
    margin: 0;
    padding: 0;
}

元素溢出

控制溢出元素的显示方式

属性名：overflow

属性值 效果
hidden 溢出隐藏
scroll 溢出滚动(溢不溢出都显示滚动条)
auto 溢出滚动(溢出了才显示滚动条)

各种问题

margin

​ 合并现象：垂直排列的兄弟元素，上下margin会合并，取较大值

​ 塌陷问题：父子级的标签，子级添加上外边距时，会导致父级向下移动 而不是子级向下

​ 解决方法：

  • ​ 取消子级margin，父级设置padding
  • ​ 父级设置overflow:hidden
  • ​ 父级设置border-top

行内元素-内外边距问题

行内元素垂直位置由行高控制

行内元素添加margin和padding，无法改变元素垂直位置

解决方法

给行内元素添加line-height

排布规则

标准流

也叫文档流，指标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行多个

浮动

作用：让块元素水平排列

本质：实现图文混排

属性

float

属性值 说明
left 左对齐
right 右对齐
特点
  • 浮动后的盒子顶对齐
  • 浮动后的盒子具备行内块特点
  • 父级快读不够，浮动的子级会换行
  • 浮动后的盒子脱标
清除浮动

清除浮动带来的影响

场景：浮动元素脱标后，若父级无高度，浮动后的子级无法撑开父级，导致下面的元素顶上来，页面错乱

方法一：额外标签法

在父元素内容的最后添加一个块级元素，设置CSS属性clear:both

方法二：单伪元素法

1
2
3
4
5
.clearfix::after{
    content: "";
    display: block;
    clear:both;
}

方法三：双伪元素法(推荐)

before防塌陷，after清除浮动

1
2
3
4
5
6
7
8
9
.clearfix::before,
.clearfix::after {
    content:"";
    display:table;
}

.clearfix::after {
    clear:both;
}

方法四：overflow

父元素添加overflow:hidden

Flex布局

也叫弹性布局，适合结构化布局

组成

给父级设置display:flex，子级元素可以自动挤压或拉伸

组成部分：

  • 弹性容器
  • 弹性盒子（沿着主轴排列）
  • 主轴：默认在水平方向
  • 侧轴/交叉轴：默认在垂直方向

设置方式：

1
2
3
父级 {
    display:flex;
}
描述 属性
创建flex容器 display:flex
主轴对齐方式 justify-content
侧轴对齐方式 align-items
某弹性盒子侧轴对齐方式 align-self
修改主轴方向 flex-direction
弹性伸缩比 flex
弹性盒子换行 flex-wrap
行对齐方式 align-content

主轴对齐方式

justify-content

属性值 效果
flex-start 默认，从起点开始依次排列
flex-end 从终点开始依次排列
center 沿主轴居中排列
space-between 沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around 沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly 沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴对齐方式

align-items全局

align-self自身

属性值 效果
stretch 弹性盒子沿着侧轴被拉伸至铺满容器(默认，弹性盒子无高时)
center 弹性盒子沿侧轴居中对齐
flex-start 从起点开始依次排列
flex-end 从终点开始依次排列

修改主轴方向

flex-direction

属性值 效果
row 水平，从左到右（默认）
column 垂直，从上到下
row-reverse 水平，从右到左
column-reverse 垂直，从下到上

弹性伸缩比

控制弹性盒子主轴方向的尺寸

属性名：flex

属性值：整数，表示占用父级剩余尺寸的份数

弹性盒子换行

属性名：flex-wrap

属性值 效果
wrap 换行
nowrap 不换行（默认）
#学习笔记，前端
CSS
https://fiy-pc.github.io/2024/10/29/CSS/
作者
FIY-pc
发布于
2024年10月29日
许可协议