【笔记】CSS学习笔记

发表于 更新于 阅读次数：

前言

层叠样式表是一种用来为结构化文档添加样式的计算机语言，由W3C定义和维护。当前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。（维基百科）

1994年，Håkon Wium Lie 和 Bert Bos 合作设计了CSS
1996年，两人发布了CSS 1
1997年，W3C创立了CSS工作组
1998年5月，W3C发布了CSS 2
2011年6月，W3C发布了CSS 3 Color Module（从CSS 3开始，CSS分为不同模块，每个CSS模块都有新特性并向前兼容，所以没有真正意义的CSS 3）

CSS的使用方式

内联样式（inline style）

1
<div style="样式名: 样式值;"></div>

内部样式（internal style）

1
2
3
4
5
6
7
<head>
  <style>
    选择器 {
      样式名: 样式值;
    }
  </style>
</head>

外部样式（external style）

定义CSS文件

  • 在CSS文件中定义样式
index.css
1
2
3
选择器 {
  样式名: 样式值;
}

HTML文件中引入CSS文件

  • <link>引入CSS文件时不会阻塞HTML解析
1
2
3
<head>
  <link rel="stylesheet" herf="index.css">
</head>

CSS文件中引入CSS文件

  • @import引入CSS文件时会阻塞HTML解析，而<link>引入CSS文件时不会阻塞HTML解析，所以HTML中不建议使用@import引入CSS文件
index.css
1
@import url(外部样式文件路径);
index.css
1
@import "外部样式文件路径";

CSS引入文件函数

1
url(文件路径)

CSS的注释

1
/* 行内注释 */

CSS的函数

定义变量

  • 使用--作为前缀实现变量的定义
  • 只有后代元素可以使用变量
1
2
3
:root {
  --变量名: 值;
}

使用变量

  • 通过var()函数实现变量的使用
1
2
3
div {
  width: var(--变量名);
}

计算数值

  • 通过calc()函数实现数学计算
  • 运算符左右必须通过空格隔开
1
2
3
div {
  width: calc(1px + 2px);
}

CSS的选择器

通用选择器

  • 无论HTML元素在页面中是否存在，都会被遍历并设置样式
1
* {样式声明}

元素选择器

1
元素名称 {样式声明}

id选择器

1
#元素的id属性值 {样式声明}

类选择器

  • 类名不能以数字开头，除了-_不能包含其他符号，尽量见名知意
1
.元素的class属性值 {样式声明}

属性选择器

  • 通过元素的内置属性或自定义属性
1
[属性名] {样式声明}
1
[属性名="属性值"] {样式声明}
1
元素名[属性名] {样式声明}
1
元素名[属性名="属性值"] {样式声明}

模糊匹配属性值

包含关键词
属性值只有一个且包含
  • 属性值只有一个，当属性值包含了关键词，则匹配成功
1
[属性名*="关键词"] {样式声明}
属性值有多个且包含
  • 属性值有多个且通过 分隔的情况，当其中一个属性值包含了关键词，则匹配成功
1
[属性名~="关键词"] {样式声明}
以关键词开头
1
[属性名^="关键词"] {样式声明}
以关键词结尾
1
[属性名$="关键词"] {样式声明}
等于关键词
  • 等于关键词或包含关键词-
1
[属性名|="关键词"] {样式声明}

后代、子代、兄弟选择器

后代选择器

  • 一代或者多代的嵌套，由 分隔多级选择器
1
选择器1 选择器2 选择器3 {样式声明}

直接子代选择器

  • 一级嵌套，由>分隔多级选择器
1
选择器1 > 选择器2 {样式声明}

兄弟选择器

  • 兄弟选择器不能选择当前元素之前的元素，只能选择当前元素之后的元素
同级紧随其后的一个兄弟元素
1
选择器1 + 选择器2 {样式声明}
同级紧随其后的所有兄弟元素
1
选择器1 ~ 选择器2 {样式声明}

交集、并集选择器

交集选择器

  • 多个选择器不进行分隔，同时满足两个选择器，才会匹配成功
  • 通常用于精准的选择某一个元素
1
选择器1选择器2 {样式声明}

并集选择器

  • 由,分隔多个选择器，多个选择器都会匹配成功
  • 通常用于同时为多个元素设置相同的样式
1
选择器1, 选择器2, 选择器3 {样式声明}

伪类选择器（Pseudo Classes）

  • 伪类选择器用于匹配元素的不同状态

动态伪类

  • 动态伪类建议的设置顺序：:link、:visited、:focus、:hover、:active
匹配链接未访问的状态
1
:link {样式声明}
匹配链接已访问的状态
1
:visited {样式声明}
匹配元素获取焦点时的状态
1
:focus {样式声明}
匹配鼠标悬停时的状态
1
:hover {样式声明}
匹配元素被激活的状态
  • 被鼠标长按未松开时的元素
1
:active {样式声明}

目标伪类

匹配被激活的锚点
1
:target {样式声明}

语言伪类

匹配指定语言的元素
1
:lang(语言) {样式声明}

元素状态伪类

匹配可使用的表单元素
1
:enable {样式声明}
匹配不可使用的表单元素
1
:disable {样式声明}

结构伪类

匹配根元素
  • 匹配<html></html>
1
:root {样式声明}
匹配空内容的元素
  • 匹配元素内容为空白的元素
1
:empty {样式声明}
匹配子代指定位置的元素（正序搜索）
  • 下标从1开始
不区分子元素类型
1
:nth-child(1) {样式声明}
  • 可以是包含n的表达式，n表示正整数和0

案例

  • 所有偶数
1
:nth-child(2n) {样式声明}
  • 所有奇数
1
:nth-child(2n + 1) {样式声明}
  • 前3个
1
:nth-child(-n + 3) {样式声明}
区分子元素类型
1
:nth-of-type(1) {样式声明}
匹配子代指定位置的元素（倒叙搜索）
  • 下标从1开始
不区分子元素类型
1
:nth-last-child(1) {样式声明}
区分子元素类型
1
:nth-last-of-type(1) {样式声明}
匹配子代第一个元素
不区分子元素类型
1
:first-child {样式声明}
区分子元素类型
1
:first-of-type {样式声明}
匹配子代最后一个元素
不区分子元素类型
1
:last-child {样式声明}
区分子元素类型
1
:last-of-type {样式声明}
匹配唯一的子元素
不区分子元素类型
1
:only-child {样式声明}
区分子元素类型
1
:only-of-child {样式声明}

否定伪类

匹配不是指定元素的元素
1
:not(选择器) {样式声明}

伪元素选择器

匹配伪元素

匹配长文本的第一个字符
1
:first-letter {样式声明}
1
::first-letter {样式声明}
匹配长文本的第一行字符
1
:first-line {样式声明}
1
::first-line {样式声明}

添加伪元素

  • 只有双标签的元素可以添加伪元素
  • 添加伪元素时，CSS中必须有content属性，content属性用于设置文本内容，默认可以传空字符串
  • 添加的伪元素必须脱离文档标准流
  • 添加的伪元素在同一个元素内部只可以有两个（每种一个），如果超出两个，后者覆盖前者
  • 添加的伪元素默认是行内非替换元素，不能设置宽高
在内容最前面插入内容并设置样式
1
2
3
::before {
  content: "";
}
在内容最后面插入内容并设置样式
1
2
3
::after {
  content: "";
}

匹配鼠标选中的字符

1
::section {样式声明}

否定伪元素

  • 符合selector的元素都不要
1
elem:not(选择器) {样式声明}

CSS的继承性（Inherited）

  • 如果一个属性具备继承性，那么在该元素上设置后，它的后代元素都可以继承这个属性
  • 如果后代元素自己有设置该属性，那么优先使用后代元素自己的属性，不论继承过来的属性权重多高
  • 只会继承计算值而不是设置值
  • 强制继承可以使用inherit关键字
1
属性名: inherit;

CSS的层叠性

  • 对于一个元素，相同属性可以通过不同选择器设置多次，但最终只有最后一次设置会生效，其他设置会被覆盖

CSS的优先级

  • 如果多个样式作用到一个元素上，样式冲突，则按照样式规则的优先级应用

  • 当一个选择器中包含有多个选择器时，需要将所有选择器权值进行相加，然后比较权值大的优先显示

  • 权值相同，就近原则

  • 群组选择器的权值，单独计算，不能相加

  • 选择器权值的计算结果不能超过本身的最大数量级

  • !important关键字直接获取最高优先级，内联样式不允许加!important

  • !important关键字放在属性之后，与属性值用空格分开，可以把该样式属性的优先级调到最高

!important=10000
内联样式=1000
id选择器=100
类/伪类选择器=10
元素/伪元素选择器=1
通用选择器=0
继承的样式=null

1
属性名: 值 !important;

CSS重置

传送门

路径

  • 用于引入资源，路径可以用成对的单引号包裹、可以用成对的双引号包裹、可以不用引号包裹
1
url()

颜色

前景色

1
color: ;

背景色

1
backgroung-color: ;

transparent：缺省值，透明，相当于rgba(0, 0, 0, 0)

透明度

  • 设置元素及其所有子元素的透明度
1
opacity: ;

取值：0~1

合法的颜色值

透明

1
color: transparent;

颜色的英文单词

1
color: red;

十六进制数

  • # + 6个16进制数
1
color: #FF0000;
  • # + 3个16进制数
1
color: #F00;
  • 包含透明度：# + 8个16进制数，这种方式只有比较新的浏览器内核支持解析
    • 最后两个数字表示透明度的16进制，范围为：00~FF
1
color: #FF0000FF;

rgb()函数

CSS3写法

  • CSS3要求数值用,分隔

  • 红、绿、蓝的浓度值

1
color: rgb(255, 0, 0);
  • 红、绿、蓝的浓度百分比
1
color: rgb(100%, 0%, 0%);
CSS4写法
  • CSS4要求数值可以用 分隔
1
color: rgb(255 0 0);
  • CSS4要求透明度可以写在rgb()函数中，数值可以用/分隔
1
color: rgb(255 0 0 / 0.5);
1
color: rgb(255 0 0 / 50%);

rgba()函数

  • 红、绿、蓝、透明度的浓度值
    • 透明度的取值范围为：0~1
    • 如果是0.x可以省略0写为.x
1
color: rgba(255, 0, 0, 0.5);
1
color: rgba(255, 0, 0, .5);
  • 红、绿、蓝、透明度的浓度百分比
1
color: rgba(100%, 0%, 0%, 0%);

颜色渐变

  • 颜色渐变实质上是绘制了一个图片

线性渐变

to bottom：指定目标方向，缺省值为从上到下
red：指定颜色值
10%：指定颜色占比

1
background-img: linear-gradient(to bottom, red 10%, green, blue);
根据指定方向
从边到边
  • 从下到上
1
background-img: linear-gradient(to top, red, green, blue);
  • 从上到下
1
background-img: linear-gradient(to bottom, red, green, blue);
  • 从右到左
1
background-img: linear-gradient(to left, red, green, blue);
  • 从左到右
1
background-img: linear-gradient(to right, red, green, blue);
从角到角
  • 从左下角到右上角
1
background-img: linear-gradient(to right top, red, green, blue);
  • 从左上角到右下角
1
background-img: linear-gradient(to right bottom, red, green, blue);
  • 从右上角到左下角
1
background-img: linear-gradient(to left bottom, red, green, blue);
  • 从右下角到左上角
1
background-img: linear-gradient(to left top, red, green, blue);
根据指定角度
  • 顺时针
1
background-img: linear-gradient(45deg, red, green, blue);
  • 逆时针
1
background-img: linear-gradient(-45deg, red, green, blue);

圆心扩散渐变

at 50% 50%：指定圆心位置，缺省值为图形中心

1
background-img: radial-gradient(at 50% 50%, red 10%, green, blue);

高斯模糊（毛玻璃效果）

将模糊或颜色偏移应用于元素

1
filter: blur(radius);

取值

radius：模糊偏差值（模糊半径），数值越大越模糊，以px为单位的数值

为元素后面的区域添加模糊或其他效果

1
backdrop-filter: blur(radius);

取值

radius：模糊偏差值（模糊半径），数值越大越模糊，以px为单位的数值

单位

长度单位

绝对长度单位

cm：厘米，1cm=96px/2.54
mm：毫米，1mm=1/10cm
Q：1/4毫米，1Q=1/40cm
in：英寸，1in=2.54cm≈96px
pc：十二点活字，1pc=1/16in
px：像素，1px=1/72in
pt：磅，1pt=1/72in

相对长度单位

%：在不同地方相对的参照物不同
em：相对自己的font-size
rem：相对于<html></html>根元素的font-size
ex：相对字母x的高度
ch：相对数字0的高度
lh：相对于行高
vw：相对于视图端口宽度的百分比，1vw=1%
vh：相对于视图端口高度的百分比，1vh=1%

角度单位

deg：角度，360deg，可以用于旋转和倾斜
grad：百分度，90deg=100grad，可以用于旋转和倾斜
rad：弧度，90deg=0.5πrad，可以用于旋转和倾斜
turn：圈数，90deg=0.25turn，可以用于旋转和倾斜

时间单位

s：秒，可以用于过渡或动画
ms：毫秒，可以用于过渡或动画

显示

显示方式

  • 块级元素，默认具有display: block;块属性，独占一行，可以设置宽高
  • 行内非替换元素，默认具有display: inline;行内属性，在一行中显示，不可以设置宽高
  • 行内可替换元素，默认具有display: inline-block;行内块属性，在一行中显示，可以设置宽高
1
display: ;

取值

none：隐藏，并不占用位置
block：块属性，让元素按照块的方式显示
inline：行内属性，让元素按照行内的方式显示
inline-block：行内块属性，让元素按照行内块的方式显示
table：让元素按照表格的方式显示
flex：让元素按照块级弹性盒的方式显示
inline-flex：让元素按照行内级弹性盒的方式显示

是否隐藏

1
visibility: ;

取值

visible：缺省值，可见
hidden：隐藏，但占用位置

布局

定位（Positioning）

绝对定位、相对定位、固定定位、黏性定位

  • 绝对定位（Absolute Positioning）和相对定位（Relative Positioning）被称为绝对定位元素（Absolutely Positioned Element）
  • 绝对定位和固定定位的特点
    • 在设置后无论元素是行内元素还是块级元素，都可以设置宽高，如果不设置宽高，宽高默认由内容决定
    • 不再向父级汇报宽高
1
position: ;

取值

static：缺省值，标准流定位
relative：相对定位，相对于原本标准流的位置进行偏移
absolute：绝对定位，脱离标准流，相对于可视区域进行偏移
fixed：固定定位，脱离标准流，相对于已定位的最近的祖先元素进行偏移，如果祖先元素没有定位，那么就相对于视口进行偏移
sticky：黏性定位，脱离标准流，刚开始是相对定位，当视口滚动后，元素满足偏移属性时，自动相对于最近的滚动视口固定定位

  • 脱离标准流：当一个元素不是标准流定位时，那么这个元素被称为已定位元素（Positioned Element），已定位元素自动解锁4个偏移属性
    • 左右冲突，以左为准
    • 上下冲突，以上为准

取值

top：正数向上偏移，负数向下偏移
left：正数向左偏移，负数向右偏移
right：正数向右偏移，负数向左偏移
bottom：正数向下偏移，负数向上偏移

绝对定位元素的尺寸计算方式

  • 元素在页面上实际占地空间的计算方法
    • 定位参照对象宽度=左外边距（margin-left）+左偏移量（left）+子元素宽度（width）+右偏移量（right）+右外边距（margin-right）
    • 定位参照对象高度=上外边距（margin-top）+上偏移量（top）+子元素高度（height）+下偏移量（bottom）+下外边距（margin-bottom）

定位元素的堆叠顺序

  • 只有已定位的元素，可以设置堆叠顺序，标准流定位不存在堆叠顺序
  • 堆叠顺序只对兄弟级有效，对父子级无效，子级永远在父级的上面
  • 默认堆叠顺序，兄弟级之间，弟弟的顺序高于哥哥的顺序
1
z-index: ;

取值

无单位的数字，可以是负数，缺省值为0

浮动（Floating)

  • 元素一旦浮动，就脱离标准流
  • 浮动元素，会根据父元素，向左或向右浮动，紧贴父元素边缘或其他已浮动的元素边缘，不能向上或向下浮动
  • 浮动元素之间不能堆叠，浮动元素与行内级元素不能堆叠，堆叠顺序为：定位元素>浮动元素>普通元素
  • 父元素内横向显示不下所有浮动子元素时，最后的浮动子元素会被挤到下一行
1
float: ;

取值

none：不浮动，默认文档流
left：左浮动，让元素脱离文档流，在当前行向左看齐
right：右浮动，让元素脱离文档流，在当前行向右看齐

清除浮动效果

  • 将一个没有浮动效果的元素移动到浮动元素的下面
1
clear: ;

取值

none：默认，不清除
left：移到向左浮动元素的下面
right：移到向右浮动元素的下面
both：移到向左和向右浮动元素的下面

弹性布局（Flex Layout）

  • 父元素设置为flex容器（Flex Container）后

    • 子元素（Flex Item）受父元素（Flex Container）的属性来进行控制和布局
    • 子元素（Flex Item）不再区分块级元素还是行内级元素
    • 子元素（Flex Item）默认情况下是包裹内容的，但是可以设置宽高

  • 和主轴（Main Axis）向对应的另一个轴是交叉轴（Cross Axis），交叉轴用于多行的元素换行方向

  • 主轴开始位置（Main Start）、主轴结束位置（Main End）、交叉轴开始位置（Cross Start）、交叉轴结束位置（Cross End）

  • 主轴开始位置和交叉轴开始位置相同，都是交叉点的位置

设置为弹性盒容器

  • 将父级设置为弹性盒容器（Flex Container），那么子元素就变为弹性盒元素（Flex Item）
1
display: ;

取值

flex：设置为块级flex容器
inline-flex：设置为行内级flex容器

弹性盒容器（Flex Container）

设置主轴方向
1
flex-direction: ;

取值

row：缺省值，主轴设置为横向，子元素从左到右排列
column：主轴设置为纵向，子元素从上到下排列
row-reverse：主轴设置为横向反转（Main Start 与 Main End 反转），子元素从右到左排列
column-reverse：主轴设置为纵向反转（Main Start 与 Main End 反转），子元素从下到上排列

设置主轴换行方式
  • 弹性盒容器的默认换行方式是单行，此时弹性盒元素的宽度不一定是完全等于width，如果所有弹性盒元素总宽度大于弹性盒容器宽度，那么每个弹性盒元素宽度会被压缩
1
flex-wrap: ;

取值

nowrap：缺省值，单行
wrap：多行
wrap-reverse：多行反转（Cross Start 与 Cross End 反转）

简写
  • 顺序任意，且都可以省略
1
flex-flow: direction;
1
flex-flow: wrap;
1
flex-flow: direction wrap;
元素在主轴上的对齐方式
1
justify-content: ;

取值

flex-start：缺省值，所有元素紧贴，与主轴起始位置紧贴
flex-end：所有元素紧贴，与主轴结束位置紧贴
center：所有元素紧贴，相对于主轴居中
space-between：元素之间的距离相等，与主轴起止位置紧贴（两端对齐）
space-around：元素之间的距离相等，与主轴起止位置的距离是元素之间距离的一半
space-evenly：元素之间的距离相等，与主轴起止位置的距离与元素之间的距离相同

单行元素在交叉轴上的对齐方式
1
align-items: ;

取值

normal：缺省值，在弹性布局中与stretch相同
stretch：如果元素没有设置高度，则将元素高度设置与容器高度相同
flex-start：所有元素在交叉轴起始位置紧贴
flex-end：所有元素在交叉轴结束位置紧贴
center：所有元素相对于交叉轴居中
baseline：所有元素根据各个元素的基线对齐

多行元素在交叉轴上的对齐方式
1
align-content: ;

取值

normal：缺省值，在弹性布局中与stretch相同
stretch：如果元素没有设置高度，则将所有行元素总高度设置与容器高度相同
flex-start：缺省值，所有行紧贴，与交叉轴起始位置紧贴
flex-end：所有行紧贴，与交叉轴结束位置紧贴
center：所有行紧贴，相对于交叉轴居中
space-between：行之间的距离相等，与交叉轴起止位置紧贴（两端对齐）
space-around：行之间的距离相等，与交叉轴起止位置的距离是元素之间距离的一半
space-evenly：行之间的距离相等，与交叉轴起止位置的距离与元素之间的距离相同

弹性盒元素（Flex Item）

元素拉伸
1
flex-grow: ;

取值

0：缺省值，不会分割主轴剩余空间作为元素的宽
1：平均分割主轴剩余空间作为元素的宽
大于1的整数、小于1的整数

元素压缩
1
flex-shrink: ;

取值

1：缺省值，会被压缩
0：不会被压缩

基础尺寸

  • 用于设置元素在主轴上的尺寸

  • 决定实际显示尺寸的优先级

    1. max-width、min-width、max-height、min-height
    2. flex-basis
    3. width、height
    4. 内容所撑开的尺寸
1
flex-basis: ;
缩写
1
flex: grow shrink basis;
元素排序
1
order: ;

取值

0：缺省值，可以是正数、负数、0，数字越小，在容器中的顺序越靠前

元素在交叉轴上的对齐方式
1
aline-self: ;

取值

normal：缺省值，在弹性布局中与stretch相同
stretch：如果元素没有设置高度，则将元素高度设置与容器高度相同
flex-start：元素在交叉轴起始位置紧贴
flex-end：元素在交叉轴结束位置紧贴
center：元素相对于交叉轴居中
baseline：元素根据其他各个元素的基线对齐

网格布局（Grid Layout）

  • https://css-tricks.com/snippets/css/complete-guide-grid

  • 父元素设置为grid容器（Grid Container）

    • 直接子元素（Grid Item）被称为网格（Grid Cell）
    • 单元格由网格线（Grid Line）切割而成，网格线可以是行网格线也可以是列网格线
    • 一整行或一整列网格构成网格轨道（Grid Track）
    • 由四条网格线包围的总空间被称为网格区域（Grid Area），一个网格区域可以由任意数量的网格但愿组成

溢出

  • 内容多，容器小，会发生溢出
  • 默认溢出显示，默认纵向溢出
1
2
3
overflow: ;
overflow-x: ;
overflow-y: ;

取值

visiable：缺省值，溢出部分可见
hidden：溢出部分隐藏
scroll：不管是否溢出，都有滚动条
auto：溢出就有滚动条，不溢出就没有滚动条

盒子模型（Box Model）

盒子尺寸计算方式

1
box-sizing: ;

取值

content-box：缺省值，内容盒模型
border-box：边框盒模型

内容盒模型（Content-Box）

  • 元素在页面上实际占地空间的计算方法
    • 元素实际占地宽度=左外边距（margin-left）+左边框（border-left-width）+左内边距（padding-left）+内容区域宽度（width）+右内边距（padding-right）+右边框（border-right-width）+右外边距（margin-right）
    • 元素实际占地高度=上外边距（margin-top）+上边框（border-top-width）+上内边距（padding-top）+内容区域高度（height）+下内边距（padding-bottom）+下边框（border-bottom-width）+下外边距（margin-bottom）

边框盒模型（Border-box）

  • 如果设置了width和height，width和height的尺寸会根据padding和border的增大而减小

  • 元素在页面上实际占地空间的计算方法

    • 元素实际占地宽度=左外边距（margin-left）+内容区域宽度（width）+右外边距（margin-right）
    • 元素实际占地高度=上外边距（margin-top）+内容区域高度（height）+下外边距（margin-bottom）

内容宽高

  • 宽的缺省值为auto，由浏览器自动计算
1
2
width: ;
height: ;

取值

以px为单位的数字
以%为单位的数字，相对于父元素的百分比
auto：浏览器自动计算

最大宽高

  • 无论内容多少，宽高都小于或等于最大宽高
1
2
max-width: ;
max-height: ;

最小宽高

  • 无论内容多少，宽高都大于或等于最小宽高
1
2
min-width: ;
min-height: ;

边距

  • 自带内外边距的元素：h1~h6、p、body、ol、ul、dl、pre

外边距

  • 外框以外的距离（元素与元素之间的距离）
  • 如果行内元素定义了上下外边距，则不生效
1
2
3
4
5
6
margin: ;

margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

取值，缺省值为8px

可以包含负数的，以px或%为单位的数字
auto：自动设置外边距，必须左右外边距一起用，块级元素本身水平居中，上下外边距auto无效

简写
一个参数
1
margin: 上下左右;
两个参数
1
margin: 上下 左右;
三个参数
1
margin: 上 左右 下;
四个参数
1
margin: 上 右 下 左;

内边距

  • 外框与内容区域之间的距离
  • 如果行内元素定义了上下内边距，则看起来被撑起来了，实际上不占用空间，而左右内边距会撑起来并且占用空间
1
2
3
4
5
6
padding: ;

padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

取值

可以包含负数的，以px或%为单位的数字
padding没有auto这个值

简写
一个参数
1
padding: 上下左右;
两个参数
1
padding: 上下 左右;
三个参数
1
padding: 上 左右 下;
四个参数
1
padding: 上 右 下 左;

边框

  • 如果行内元素定义了上下边框，则看起来被撑起来了，实际上不占用空间，而左右边框会撑起来并且占用空间

  • 通过边框绘制图形：https://css-tricks.com/the-shapes-of-css

简写

  • 顺序任意
1
border: width style color;

取值

width：边框的粗细（部分浏览器不支持小数）
style：边框的样式

solid：实线（默认缺省值）
dashed：线条虚线
dotted：点点虚线
double：双实线
insert：上左深色，下右浅色
outset：上左浅色，下右深色
groove：凹陷效果
ridge：凸显效果
none：无边框，等同于border-width: 0;

color：边框颜色，合法颜色值

单边设置

1
2
3
4
border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;

单属性设置

1
2
3
border-width: ;
border-style: ;
border-color: ;

单边单属性设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
border-top-width: ;
border-top-style: ;
border-top-color: ;

border-right-width: ;
border-right-style: ;
border-right-color: ;

border-bottom-width: ;
border-bottom-style: ;
border-bottom-color: ;

border-left-width: ;
border-left-style: ;
border-left-color: ;

外轮廓

  • 边框外面的一根线，不占据盒子尺寸

简写

1
outline: width style color;

取值

width：边框的粗细（部分浏览器不支持小数）
style：边框的样式

solid：实线（默认缺省值）
dashed：线条虚线
dotted：点点虚线
double：双实线
insert：上左深色，下右浅色
outset：上左浅色，下右深色
groove：凹陷效果
ridge：凸显效果

color：边框颜色，合法颜色值

单边设置

1
2
3
4
outline-top: width style color;
outline-right: width style color;
outline-bottom: width style color;
outline-left: width style color;

单属性设置

1
2
3
outline-width: ;
outline-style: ;
outline-color: ;

单边单属性设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
outline-top-width: ;
outline-top-style: ;
outline-top-color: ;

outline-right-width: ;
outline-right-style: ;
outline-right-color: ;

outline-bottom-width: ;
outline-bottom-style: ;
outline-bottom-color: ;

outline-left-width: ;
outline-left-style: ;
outline-left-color: ;

清除外轮廓

1
outline: 0;
1
outline: none;

盒子阴影

单个阴影

1
2
3
4
box-shadow: length;
box-shadow: length color;
box-shadow: inset length;
box-shadow: inset length color;

取值

length：阴影尺寸由2-4个值组成，都是以px为单位的数字

offset-x：水平方向的偏移量
offset-y：垂直方向的偏移量
blur-radius：阴影的尺寸
spread-radius：阴影的模糊距离，数值越大越模糊

color：阴影的颜色，缺省值是color属性设置的前景色，如果没有设置默认为黑色
inset：设置是否为内部阴影，值为inset表示是内部阴影

阴影尺寸为两个值
1
box-shadow: offset-x offset-y;
阴影尺寸为三个值
1
box-shadow: offset-x offset-y blur-radius;
阴影尺寸为四个值
1
box-shadow: offset-x offset-y blur-radius spread-radius;

多个阴影

在W3C文档中，#表示以空格分隔多个值

1
2
box-shadow: length spread color,
            length spread color;

边框倒角（圆角）

单角设置

一个值
1
2
3
4
border-top-left-radius: 横向和纵向圆角;
border-top-right-radius: 横向和纵向圆角;
border-bottom-left-radius: 横向和纵向圆角;
border-bottom-right-radius: 横向和纵向圆角;
两个值
1
2
3
4
border-top-left-radius: 横向圆角 纵向圆角;
border-top-right-radius: 横向圆角 纵向圆角;
border-bottom-left-radius: 横向圆角 纵向圆角;
border-bottom-right-radius: 横向圆角 纵向圆角;

简写

一个值
1
border-radius: 四个角同时设置;
四个值
1
border-radius: 左上角 右上角 右下角 左下角;

外边距的传递与边框属性的重写问题

上下外边距的传递

  • 上外边距的传递：如果子元素定义了上外边距（margin-top），则子元素的上外边距（margin-top）会传递给父元素的上外边距（margin-top）
1
2
3
.son {
  margin-top: 1px;
}
  • 下外边距的传递：如果子元素定义了下外边距（margin-bottom），且父元素的内容高度（height）设置为自动（auto），则子元素的下外边距（margin-bottom）会传递给父元素的下外边距（margin-bottom）
1
2
3
4
5
6
7
.father {
  height: auto;
}

.son {
  margin-bottom: 1px
}

上下边框属性的重写

  • 上边框属性的重写：如果子元素定义了上边框（border-top），则子元素的上边框（border-top）会重写父元素的上边框（border-top）
1
2
3
.son {
  border-top: 1px;
}
  • 下边框属性的重写：如果子元素定义了下外边距（border-bottom），且父元素的内容高度（height）设置为自动（auto），则子元素的下边框（border-bottom）会重写父元素的下边框（border-bottom）
1
2
3
4
5
6
7
.father {
  padding-top: 1px;
}

.son {
  /* margin-top: 1px; */
}

解决

方法一
  • 不给子元素设置margin而时改为给父元素设置padding
1
2
3
4
5
6
7
.father {
  height: auto;
}

.son {
  border-bottom: 1px;
}
方法二
  • 设置父元素的边框就能解决外边距的传递与边框属性的重写
1
border: 1px solid transparent;
方法三
  • 触发父元素的块级格式化上下文（Block Formating Context）
1
overflow: auto;

外边距的折叠问题

上下外边距的折叠

  • 兄弟元素中，兄元素的下边距与弟元素的上边距会产生折叠（collapse），折叠后上下外边距的最终值为上下外边距的最大值

解决

  • 只设置一次上下边距
1
2
3
4
5
6
7
.brother-1 {
  /* margin-bottom: 1px; */
}

.brother-2 {
  margin-top: 2px;
}

行内元素的外边距设置

行内元素居左显示
  • 右外边距默认值虽然为0，但是如果是行内元素，且设置了内容宽度，则右外边距会被覆盖为占满父元素右侧
1
2
3
margin-right: 0;
display: inline;
width: 10px;
行内元素居中显示
  • 但是如果是行内元素，且左右外边距设置为自动（auto），则左右外边距会占满父元素左右侧
1
2
3
margin: 0 auto;
display: inline;
width: 10px;

行内元素的对齐方式

  • 行内元素相对于行内盒的对齐方式
  • 在行内元素上设置对齐方式

行盒（Line Box）：如果一个块级元素没有高度，那么由行盒的高度决定，行盒的用途是包裹元素
基线：如果是行盒内的文本，则基线是文本底部偏上一点，如果是行盒内的行内块中的文本，则基线是行内块的最后一行文本的底部偏上一点

1
vertical-align: ;

取值

baseline：缺省值，基线对齐
top：行盒顶部对齐
middle：居中对齐
bottom：行盒底部对齐

背景

背景颜色

1
background-color: ;

背景图片

  • 使用背景图片可以让元素内部的子元素，堆叠显示在背景图上，而img标签，默认不能堆叠显示
  • 背景图片会覆盖背景颜色
  • 只有具有宽高的块级元素才能正常显示背景图片

单张背景图片

1
background-image: url();

多张背景图片

  • 第一张图片会放在最前面
1
background-image: url(), url();

背景图片的位置

一个值

  • 只设置水平方向的值（left、right）时，垂直方向自动居中
  • 只设置垂直方向的值（top、bottom）时，水平方向自动居中
1
background-position: ;

取值

center：水平居中，垂直居中
left：水平居左，垂直居中
right：水平居右，垂直居中
top：水平居中，垂直居上
bottom：水平居中，垂直居下

两个值

1
background-position: x y;

取值

x的取值

正数：向右偏移
负数：向左偏移
left：居左
center：居中
right：居右

y的取值

正数：向下偏移
负数：向上偏移
top：居上
center：居中
bottom：居下

背景图片的尺寸

1
background-size: ;

取值

一个值：同时控制横纵
两个值：分别控制横纵
auto：缺省值，以图片原本的尺寸显示
cover：覆盖和填充。保持图片宽高比，让背景图充满整个容器，哪怕图片显示不完全，也要充满容器
contain：包含。保持图片宽高比，让容器显示完整的图片，哪怕容器有空白区域，也要包含完整的图片

背景图片的平铺

1
background-repeat: ;

取值

repeat：缺省值，平铺
no-repeat：不平铺
repeat-x：水平轴平铺
repeat-y：垂直轴平铺

背景图片的附加效果

1
background-attachment: ;

取值

scroll：缺省值，背景图片位置会相对页面固定，不会滚动
local：背景图片位置会随着内容的滚动一起滚动
fixed：背景图片位置会相对视口固定，窗口滚动，背景图位置不变，但是只能在原容器内显示（如果背景图设置了fixed，那么background-position会根据浏览器窗口定位）

简写

1
2
3
4
5
6
background: color;
background: color url;
background: color url position-x position-y;
background: color url position-x position-y/size-x size-y;
background: color url position-x position-y/size-x size-y repeat;
background: color url position-x position-y/size-x size-y repeat attachment;

背景的起源位置

1
background-origin: ;

取值

border-box：从外边框开始起源
padding-box：从内边框开始起源（缺省值）
content-box：从内容区域开始起源

背景尺寸的裁切

1
background-clip: ;

取值

border-box：从外边框开始裁切
padding-box：从内边框开始裁切
content-box：从内容区域开始裁切
-webkit-text：图片置入文本内部（有兼容问题，需要加浏览器私有前缀，文本要加透明度）

文本

文本样式

1
font-style: ;

取值

normal：正常（缺省值）
italic：斜体，找到字体中倾斜的字体进行展示
oblique：倾斜，不论字体中有没有倾斜的字体都强制倾斜

小型大写字母

1
font-variant: small-caps;

文本加粗

1
font-weight: ;

取值

lighter：最细
normal：缺省值，正常，值为400
bold：较粗，值为700
bolder：最粗
不带单位的数字：必须是100的倍数，最小值是1，最大值是1000

文本尺寸（文本大小）

1
font-size: ;

行高

  • 两行文字基线（Baseline）之间的距离，实际上就是行盒（Line Box）的高度
  • 文本默认会在行高居中显示
  • 行间距 = 行高 - 文本高度
1
line-height: ;

取值

以px为单位的数字
无单位数字，代表行高是字号的倍数

文本字体

  • 浏览器会选择列表中第一个操作系统中已安装的字体，或刚刚从服务器上下载的字体
1
font-family: "字体名称";
1
font-family: "字体名称", "字体名称";

从服务器上下载字体

1
2
3
4
5
6
7
8
@font-face {
  font-family: 自定义名称;
  src: url();
}

body {
  font-family: 自定义名称;
}
  • 指定相同字体的多种格式可以防止浏览器兼容性问题
1
2
3
4
5
6
7
8
@font-face {
  font-family: 自定义名称;
  src: url(), url();
}

body {
  font-family: 自定义名称;
}
指定字体格式

传送门

format("truetype")：OpenType字体
format("embedded-opentype")：Embedded OpenType字体
format("woff")：Web Open Font Format字体
format("svg")：SVG 字体

1
2
3
4
5
6
7
8
@font-face {
  font-family: 自定义名称;
  src: url() format();
}

body {
  font-family: 自定义名称;
}

简写

  • 前三个属性没有顺序要求，并且都可以省略
  • line-height可以省略
1
font: style variant weight size/line-height family;
1
font: style variant weight size family;
1
font: size family;

文本线条修饰

1
text-decoration: ;

取值

none：没有线条修饰，去除超链接下划线
underline：缺省值，下划线
overline：上划线
line-through：删除线

文本颜色

  • 通过设置前景色修改文本及修饰线颜色
1
color: ;

英文大小写转换

1
text-transform: ;

取值

none：缺省值，不转换
capitalize：所有单词首字母大写
uppercase：全部大写
lowercase：全部小写

文本首行缩进

1
text-indent: ;

取值

2em：字体的2倍

文本对齐方式

  • 定义行内元素或行内块元素如何相对它的父元素水平对齐
1
text-align: ;

取值

left：缺省值，居左对齐
center：居中对齐
right：居右对齐
justify：两端对齐，最后一行不生效

强制设置最后一行文本对齐方式

1
text-align-last: ;

字母间距

1
word-spacing: ;

单词间距

1
letter-spacing: ;

文本阴影

单个阴影

1
2
text-shadow: length;
text-shadow: length color;

取值

length：阴影尺寸由2-3个值组成，都是以px为单位的数字

offset-x：水平方向的偏移量
offset-y：垂直方向的偏移量
blur-radius：阴影的尺寸

color：阴影颜色，缺省值是color属性设置的前景色，如果没有设置默认为黑色

阴影尺寸为两个值
1
text-shadow: offset-x offset-y;
阴影尺寸为三个值
1
text-shadow: offset-x offset-y blur-radius;

多个阴影

1
2
text-shadow: length color,
             length color;

文本溢出处理

  • 只有在overflow设置的不是visible时，text-overflow才会生效
1
text-overflow: ;

取值

clip：缺省值，裁剪文本内容，超出部分直接省略，有可能将一个字符裁剪为半个字符
ellopsis：裁剪文本内容，超出部分显示省略号

单词的自动换行方式

1
word-break: ;

取值

normal：缺省值，使用浏览器默认换行规则
break-all：允许在单词内换行
keep-all：只能在半角空格或连字符处换行，主要用于中文、日文、韩文

1
word-wrap: ;

取值

normal：缺省值，只在允许的断字点换行
break-word：可以在长单词或者url中间换行

段落的自动换行方式

  • 设置空白处理和换行规则
1
white-space: ;

取值

normal：缺省值，允许自动换行，多个空格会合并为一个空格
nowrap：不自动换行，多个空白符会合并为一个空格
pre：不自动换行，多个空白符不会合并为一个空格
pre-wrap：允许自动换行，多个空白符不会合并为一个空格
pre-line：允许自动换行，多个空格会合并为一个空格，但保留换行符

列表

列表项的标记类型

1
list-style-type: ;

取值

decimal：有序列表缺省值，数字
disc：无序列表缺省值，实心圆
circle：空心圆
square：方块
low-roman：小写罗马数字
upper-loman：大写罗马数字
low-alpha：小写字母
upper-alpha：大写字母
none：无标记
inherit：继承父元素设置

列表项的标记位置

1
list-style-position: ;

取值

outside：默认值。保持标记位于文本的左侧，列表项目标记位置在文本，且环绕文本，不根据标记对齐
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
inherit：继承父类的list-style-position设置

列表项的标记图片

1
list-style-image: ;

取值

url：图像的路径
none：默认无图像显示
inherit：继承父类的list-style-position设置

简写

1
list-style: type position image;

表格

表格边框

  • 只会设置最外层的最大边框
1
table: ;

表格单元格数据的垂直对齐方式

1
vertical-align: ;

取值

top
middle
bottom

表格边框的分离和合并

1
border-collapse: ;

取值

separate：缺省值，表格边框分离状态
collapse：表格边框合并状态

表格边框的间距

  • 表格边框是分离状态时才能设置表格边框的间距
1
border-spacing: ;

取值

一个值，设置水平和垂直的间距
两个值，第一个是水平，第二个是垂直

表格的显示规则

  • 用来设置浏览器渲染表格的方式
1
table-layout: ;

取值

auto：缺省值，自动表格布局，td/th的尺寸实际上由内容决定，内容比尺寸大，按内容显示，内容比尺寸小，按尺寸显示，现存入内存，再一次性渲染
fixed：固定表格布局，不管内存多大，都按照设置的尺寸显示，不存入内存，直接渲染

表单

文本域

允许手动拉伸

1
resize: ;

取值

both：缺省值，允许水平和垂直方向拉伸
none：不允许拉伸
horizontal：只允许水平方向拉伸
vertical：只允许垂直方向拉伸

形变（transform）

  • 可以指定一个形变函数（transform function）
1
transform: 形变函数();
  • 也可以指定多个形变函数，多个形变函数用空格隔开

在W3C文档中，+表示以空格分隔多个值

1
transform: 形变函数() 形变函数();

设置原点

两个值

  • 把原点放在指定x轴、y轴上
1
transform-origin: x y;

取值

x

left：最左侧
center：缺省值，居中
right：最右侧
以px或%为单位的数字

y

top：最顶部
center：缺省值，居中
bottom：最底部
以px或%为单位的数字

三个值

  • 把原点放在指定x轴、y轴、z轴上
1
transform-origin: x y z;

取值

以px或%为单位的数字
关键字：left/center/right、top/center/bottom

形变函数

2D图形变换

平移
  • 改变元素的位置
1
transform: ;

取值，如果是百分比，则相对于自身宽高，正数为正方向偏移，负数为负方向偏移

translate(x)：指定元素在x轴上的平移偏移量
translateX(x)：指定元素在x轴上的平移偏移量
translateY(y)：指定元素在y轴上的平移偏移量
translate(x, y)：同时设置x轴和y轴的平移偏移量

缩放
  • 改变元素的大小
1
transform: ;

取值，小于-1为翻转并放大，-10为缩小并翻转，0为不缩放，01缩小，大于1为放大

scale(x)：指定元素在x轴上的缩放偏移量
scale(x)：指定元素在x轴上的缩放偏移量
scaleY(y)：指定元素在y轴上的缩放偏移量
scale(x, y)：同时设置x轴和y轴的缩放偏移量

旋转
  • 改变元素的角度
1
transform: ;

取值，正数为顺时针旋转，负数为逆时针旋转

rotate(angle)：指定元素相对于原点的旋转角度，rotate()函数是rotateZ()函数的简写

倾斜
  • 让元素向着x轴倾斜，实际上改变的是y轴的角度
1
transform: ;

取值，正数为顺时针倾斜，负数为逆时针倾斜

skew(x)：指定元素在x轴上的倾斜偏移量
skew(x, y)：同时设置x轴和y轴的倾斜偏移量

3D图形变换

透视距离（景深）
  • 父级元素通常需要景深属性，表示观众距离场景的距离
1
perspetive: ;
既为舞台又为演员
1
transform-style: preserve-3d;
平移
1
transform: ;

取值

translateX(x)：x轴方向的平移，正数向右，负数向左
translateY(y)：y轴方向的平移，正数向下，复数向上
translateZ(z)：z轴方向的平移，正数放大，负数缩小

旋转
1
transform: ;

取值

rotateX(x)：以x轴为中心轴旋转
rotateY(y)：以y轴为中心轴旋转
rotateZ(z)：以z轴为中心轴旋转
rotate3D(x, y, z, n)：以x轴、y轴、z轴为中心轴旋转

过渡（transition）

  • 告诉浏览器绘制元素初始化状态和最终状态之间的所有变化

设置进行过渡效果的属性

  • 可以指定一个属性
1
transition-property: 属性名;
  • 也可以指定多个属性，多个属性之间用,隔开
1
transition-property: 属性名, 属性名;

取值

none：缺省值，所有属性都不会进行过渡效果
all：所有支持过渡效果的属性都会进行过渡效果
属性名：支持过渡的css属性：大多数取值为数值的属性、取值为颜色值的属性、阴影相关的属性、形变相关的属性

过渡效果的持续时间

1
transition-duration: ;

取值：单位秒（s）或毫秒（ms）

过渡效果的速率

1
transition-timing-function: ;

取值

ease：慢开，加速，慢关（缺省值）
linear：匀速（常用）
ease-in：慢速开始
ease-out：慢速结束
ease-in-out：慢开，先加速，后减速，慢关
cubic-bezier()：贝塞尔曲线

过渡效果的延迟执行时间

1
transition-delay: ;

简写

单个过渡

1
transition: duration;
1
transition: property duration timing-function delay;

多个过渡

1
2
transition: property duration timing-function delay,
            property duration timing-function delay;

全部元素进行过渡

1
transition: all duration timing-function delay;

动画（animation）

  • 多个过渡效果组成动画

定义动画

  • 定义动画，设置关键帧
1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes 动画名称 {
  0% {
    css样式
  }
  
  50% {
    css样式
  }
  
  100% {
    css样式
  }
}
  • from关键字表示0%，to关键字表示100%
1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes 动画名称 {
  from {
    起始状态css样式
  }

  50% {
    css样式
  }
  
  to {
    截止状态css样式
  }
}

调用动画

设置调用动画的名称

1
animation-name: 动画名称;

设置调用动画的执行时间

1
animation-duration: ;

设置调用动画的时间曲线函数

1
animation-timing-function: ;

取值

ease
linear
ease-in
ease-out
ease-in-out

设置调用动画的延迟

  • 只能设置第一次动画的延迟
1
animation-delay: ;

设置调用动画的执行次数

1
animation-iteration-count: ;

取值

通过无单位的数值指定次数
infinite：无限次

设置调用动画的播放顺序

1
animation-direction: ;

取值

noermal：从0%帧播放到100%帧
reverse：从100%帧播放到0%帧
alternate：从0%帧播放到100%帧，再从100%帧播放到0%帧，如此往复

动画的帧填充

1
animation-fill-mode: ;

取值

none：缺省值，动画播放完成，渲染动画没有播放时的样式
forwards：动画播放完成，渲染100%帧时的样式
backwards：动画播放完成，渲染0%帧时的样式

动画的暂停

1
animation-play-state: ;

取值

running：缺省值，继续
forwards：暂停

简写方式

单个动画
1
animation: name;
1
animation: name duration timing-function delay iteration-count direction fill-mode;
多个动画
1
2
animation: name duration timing-function delay iteration-count direction fill-mode,
           name duration timing-function delay iteration-count direction fill-mode;

动画的播放和暂停

1
animation-play-state: ;

取值

paused：暂停
running：播放

动画的兼容性问题

  • 如果需要兼容低版本浏览器，需要在动画声明的时候加前缀
1
2
3
4
5
@keyframes 动画名称 {}
@-webkit-keyframes 动画名称 {}
@-ms-keyframes 动画名称 {}
@-moz-keyframes 动画名称 {}
@-o-keyframes 动画名称 {}

光标（鼠标指针）

1
cursor: pointer;

取值

auto：根据情景自动设置
default：小箭头
pointer：小手
text：文本输入光标
none：不现实光标

完成

参考文献

哔哩哔哩——web前端小清风
哔哩哔哩——前端开发专业教程