CSS常用属性速查手册

文章目录

一、CSS常用属性
- [1.1 字体、背景](#1.1 字体、背景)
- [1.2 盒子、容器、布局相关](#1.2 盒子、容器、布局相关)
- [1.3 表单、字体图标、过度、平面转换、渐变](#1.3 表单、字体图标、过度、平面转换、渐变)
- [1.4 过渡渐变、对其、透明度、光标](#1.4 过渡渐变、对其、透明度、光标)
二、CSS基础
- [2.1 CSS引入方式](#2.1 CSS引入方式)
- [2.2 CSS选择器](#2.2 CSS选择器)
- - [2.2.1 基础选择器（标签、类、id）](#2.2.1 基础选择器（标签、类、id）)
  - [2.2.2 复合选择器（后代、子代、并集、交集、伪类）](#2.2.2 复合选择器（后代、子代、并集、交集、伪类）)
  - [2.2.3 结构伪类选择器（可对列表的某一个）](#2.2.3 结构伪类选择器（可对列表的某一个）)
  - [2.2.4 伪元素选择器](#2.2.4 伪元素选择器)
- [2.3 CSS特性](#2.3 CSS特性)
- [2.4 Emmet写法（编码提速）](#2.4 Emmet写法（编码提速）)

一、CSS常用属性

1.1 字体、背景

文字相关属性

行高与盒子一样时，会自动垂直居中，仅限一行文字

属性	含义
font-size	大小
color	颜色（常见方式：`red`，`rgb(r,g,b)`，`rgba(r,g,b,a)`，`#RRGGBB`）
font-weight	粗细 (`bold`：加粗（相当于700），`normal`：不加粗（相当于400），具体值：400）
font-style	斜体 (`normal`正常，`italic`倾斜）
line-height	行高（`数字+px`或`数字`，数字为当前font-size倍数）
font-family	字体族 (`fontfamily:Microsoft Yahei， Heiti SC, tahoma, arial, sans-serif，楷体`）
font	复合属性（`font: italic 700 30px 楷体`：是否倾斜加粗行高字体（必须按顺序写，行高和字体必填））
text-align	对其方式（`center`居中，`left`左对齐，`right`右对齐，也可用于图片居中）
text-decoration	修饰线（`none`无下划线，`nderline`下划线，`line-through`删除线，`overline`上划线）
text-indent	文字首行缩进（`t数字+px`或`数字+em`，1em为当前标签字号大小）

背景属性

背景图默认是平铺效果，尺寸不够会复制（background-image: url();）

属性	含义
background-color	背景色
background-image	背景图 `background-image:linear-gradient(to 方向，颜色1 终点位置，颜色2 终点位置，...)`：渐变，方向可写`to方向`或`角度`，终点可写百分比 `background-image:linear-gradient(半径 at 圆心位置，颜色1 终点位置，颜色2 终点位置，...)`：径向渐变，半径可为两条圆心位置可为像素、百分比、方向名词
background-repeat	背景图平铺方式（不平铺只展示一张，且图片太小不会自适应div大小） (`repeat`平铺（默认效果），`no-repeat`不平铺，`repeat-x`水平方向平铺，`repeat-y`垂直方向平铺)
background-position	背景图位置（`left`左侧，`right`右侧，`center`居中，`top`顶部，`bottom`底部，`数字+px`）（也可以坐标`background-position:52px;`、 `background-position:52px center;`）
background-size	背景图缩放（`cover`：等比例缩放，可能图片部分区域看不到，`contain`：等比例缩放，盒子可能存在空白区域）（`百分比`：根据盒子计算图片大小、`数字+单位`）
background-attachment	背景图固定（`fixed`：背景不随元素内容滚动）
background	背景图复合属性（`背景色背景图背景图平铺方式背景图位置/缩放背景图固定`，不区分顺序）

1.2 盒子、容器、布局相关

显示模式属性

块级：独占一行，宽度默认是父级的100%，添加宽度属性生效
行内块 ：一行共存多个，尺寸有内容撑开，加宽高生效
行内元素：一行共存多个，尺寸有内容撑开，加宽高不生效

属性	含义
display	显示方式（一行或多行展示，`none`：隐藏，`block`：块级，`inline-block`：行内块，`inline`：行内）

设置鼠标悬停样式使用:hover （超链接与此类似的还有:link：访问前，:visited：访问后，:hover ：鼠标悬停，:active：点击时，如果都设置上，按LVHA顺序写）
xxx:hover { xxx: xxx}

这个左右高度如果不一样，可能会出现对其不一致，可以使用如下属性设置对其方式vertical-align: top;

盒子模型

属性	含义
width	宽度
height	高度
padding	内边距（出现在内容与盒子边缘之间）（单方向属性：`padding-top`,`padding-right`,`padding-bottom`,`padding-left`）
border	外框线（`border: 1px solid #000;`，`solid`：实线，`dashed`：虚线，`dotted`：点线）（单方向属性：`border-top`,`border-right`,`border-bottom`,`border-left`）
margin	外边距（出现在盒子外面）（`margin:0px auto`：上下为0，左右居中，一定要有宽度）（单方向属性：`margin-top`,`margin-right`,`margin-bottom`,`margin-left`）
list-style	去掉列表的项目符号
overflow	控制溢出显示方式（`hidden`：溢出隐藏，`scroll`：溢出滚动（无论是否溢出都先森滚动条位置），`auto`：溢出滚动（溢出才显示滚动条位置））
border-radius	圆角（属性值为圆角半径，数字+px、百分比，可填入4个值为4个角）
box-shadow	阴影效果（属性值：x轴偏移量，y轴偏移量，模糊半径，扩散半径，颜色，内外阴影）（`box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5) inset;` 默认外阴影，内阴影为inset）

浮动

属性	含义
float	浮动（让块元素水平排列）（属性值：`left`：左对齐，`right`：右对齐）

浮动特点 ：

浮动后的盒子顶对齐

浮动后的盒子具备行内块特点

父级宽度不够，浮动的子级会换行

浮动后的盒子脱标
当父级无高度，子级浮动时，子级无法撑大父级高度，父级高度为0，导致结构混乱，解决方案如下：

法一：父元素内容的最后添加一个块级元素，设置css属性clear: both；

法二：单伪元素法，父级设置.clearfix::after {content: ""; display: block; clear: both;}

法三：双伪元素法，父级设置.clearfix::before, clearfix::after {content: ""; display: table;}, clearfix::after clear: both;}（before解决外边距塌陷问题）

法四：overflow属性，父元素添加css属性overflow:hidden

flex布局

Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力，Flex布局不会产生浮动布局中脱标现象，布局网页更简单灵活

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

组成部分：弹性容器，弹性盒子，主轴默认水平方向（子级默认沿着主轴方向排列，父级宽度不够，子级自动压缩），侧轴/交叉轴默认垂直方向

属性	含义
display: flex	创建flex容器
justify-content	主轴对齐方式（`flex-start`：默认起点位置对齐，`flex-end`：终点对齐，`center`：主轴居中对齐）（`space-between`：主轴均匀排列，空白区域在盒子中间）（`space-around`：主轴均匀排列，空白区域在盒子两侧）（`space-evenly`：主轴均匀排列，盒子与两侧都有空白区域）
align-items	侧轴对其方式（父级设置）（`stretch`：盒子沿侧轴线拉伸值铺满容器，`center`：侧轴居中排列，`flex-start`：启动排列，`flex-end`终点排列）
align-self	某个弹性盒子侧轴对其方式（子级设置）（同上）
flex-direction	修改主轴方向（`row`：水平从左到右，`row-reverse`：从右到左，`column`：从上到下，`column-reverse`：从下到上）
flex	弹性伸缩比（`flex:1`,控制盒子占用容器剩余的份数）
flex-wrap	弹性盒子换行（wrap：换行，nowrap：不换行）
align-content	行对其方式（属性值同`justify-content`）

定位

灵活改变盒子在网页中的位置，可用于多个标签显示在一起

属性	含义
pisition:relative	相对定位（参考原来位置偏移，不脱标，占位，显示模式特点不变）
position:absolute	绝对定位（子绝父相，脱标不占位，参考最佳已定位的祖先元素，宽高生效，具备行内块特点）
position:fixed	固定定位（固定在界面上不动，脱标，不占位）
left/right/top/bottom	各方向偏移量
transform:translate(-50%, -50%)	挪动位置
z-index	设置定位元素的显示顺序（取值整数，值越大，越靠上）

1.3 表单、字体图标、过度、平面转换、渐变

表单输入框相关

属性	含义
outline:none	去掉表单控件的焦点框（点击时的外框）
::placeholder	输入框预填文字样式

字体图标

展示的是图标，本质是字体，可以通过css顺序修改大小颜色等，图标库地址为https://www.iconfont.cn，可以在该图标库中下载对应图标放到项目中使用，也可以将自己画的图上传至网站转化为图标，然后下载放到项目中使用，使用方法如下

html 复制代码

<link ref="stylesheet" href="./iconfont/iconfont.css">

.iconfont {
	font-size: 20px;
	color: orange;
}

<span class="iconfont icon-xxx"></span>

过度、平面转换、渐变

属性	含义
transition	过渡（`transition：过度的属性花费时间`，元素在不同状态切换时添加过度效果，如鼠标悬停时字体大小变化）（过度属性可写具体`css属性`，也可以为`all`为所有属性，设置给元素本身）
transform	平面转换改变盒子在平面内的形态（位移、旋转、缩放、倾斜），`配合transition使用` (属性值：`translate(800px)`平移（像素、百分比，可写两个数），`rotate(360deg)`旋转) (`scale(2)`放大缩小（可写两个数两个方向）`skew(180deg)`倾斜) （注：旋转会改变坐标轴方向，多重转换以第一种转换的坐标轴为准）
transform-origin	改变旋转原点 `属性值：水平远点位置垂直原点位置`，值可以为方向（left/top/right/bottom/center）、像素、百分比
linear-gradient	渐变 `background-image:linear-gradient(to 方向，颜色1 终点位置，颜色2 终点位置，...)`方向可写`to方向`或`角度`，终点可写百分比
linear-gradient	径向渐变 `background-image:linear-gradient(半径 at 圆心位置，颜色1 终点位置，颜色2 终点位置，...)`半径可为两条圆心位置可为像素、百分比、方向名词

1.4 过渡渐变、对其、透明度、光标

其他属性

属性	含义
vertical-align	垂直对齐方式（`baseline`：基线对齐（默认），`top`：顶部对齐，`middle`：居中对齐，`bottom`：底部对齐）
opacity	透明度（值为0-1）
cursor	光标类型（`default`：默认箭头，`pointer`：小手，`text`：工字型，`move`：十字光标）

二、CSS基础

CSS是层叠样式表（Cascading Style Sheets），是一种样式表语言，用来描述HTML文档的呈现（美化内容），CSS基本语法如下：

html 复制代码

选择器{
	CSS属性1：CSS属性值1;
	CSS属性2：CSS属性值2;
}

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS样式</title>
    <!-- CSS代码 -->
    <style>
        p {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
    <body>
        <p>CSS样式效果</p>
    </body>
</html>

2.1 CSS引入方式

CSS引入方式 ：有三种引入方式，分别为行内式、内嵌式、外链式

行内式：直接写在标签内

html 复制代码

<body>
    <!-- 行内式 -->
    <div style="width: 100px; height: 100px; background: red">行内式</div>
</body>

内嵌式：写在标签头部的style中

html 复制代码

<head>
    <style type="text/css">
        /* 作用于所有body里面的div标签 */
        div {
            width: 100px;
            height: 100px;
            background:red;
        }
    </style>
</head>
<body>
    <div>内嵌式</div>
</body>

外链式：将CSS代码单独使用一个.css文件，在head标签内使用link标签引入

html 复制代码

<head>
    <!-- link引入外部样式表   rel：关系，样式表 -->
    <!-- 引入存在相同的，后引入的会覆盖先引入的 -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div>外链式</div>
</body>

在CSS/main.css中写入如下内容

css 复制代码

div{
    width: 100px;
    height: 100px;
    background:red;
}

2.2 CSS选择器

CSS选择器有多种，直接使用为标签选择器（p {}），点开头为类选择器（.red {}），#开头为id选择器（#id名 {}），层级选择器可几种嵌套使用，空格隔开（.red p {}，red类中的所有p标签）

2.2.1 基础选择器（标签、类、id）

标签选择器

像上面CSS的引入就是使用的标签选择器，使用标签开头如，div、p等

html 复制代码

<head>
    <style type="text/css">
        /* 作用于所有body里面的div标签 */
       div {
            width: 100px;
            height: 100px;
            background:red;
        }
    </style>
</head>
<body>
    <div>内嵌式</div>
</body>

类选择器

根据类名来选择标签，以.开头，一个类选择器可以应用于多个标签上，一个标签也可以使用多个类选择器，多个类选择器使用空格分隔

html 复制代码

<head>
    <style type="text/css">
       .box{
            width: 100px;
            height: 100px;
        }
        .background{
            background:red;
        }
    </style>
</head>
<body>
    <div class="box background">类选择器</div>
</body>

id选择器

根据id选择标签，以#开头,元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用

html 复制代码

<head>
    <style type="text/css">
       #box {
            width: 100px;
            height: 100px;
            background:red;
        }
    </style>
</head>
<body>
    <p id="box">id选择器</p>
</body>

2.2.2 复合选择器（后代、子代、并集、交集、伪类）

层级选择器(后代选择器)

根据层级关系选择后代标签，以选择器1 选择器2开头（这里可以是标签名，也可以是类名），定义层级标签的子标签样式（标签之间不一定是父子关系，也可以是祖孙关系）

层级选择器(子代选择器)

根据层级关系选择子代标签，以选择器1 > 选择器2开头（这里可以是标签名，也可以是类名），定义层级标签的子标签样式（标签之间一定是父子关系）

html 复制代码

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 定义div标签的P标签样式，使用标签名 */
       div p{
            width: 100px;
            height: 100px;
            background:red;
        }
        /* 定义con类中的pink类样式，使用类名 */
        .con > .pink{
            width: 100px;
            height: 100px;
            background:red;
        }
    </style>
</head>
<body>
    <!-- 只有div内部的p标签才有该样式 -->
    <div>
        <p>层级选择器</p>
        <p>层级选择器</p>
    </div>
    <div class="con">
        <a href="#" class="pink">层级选择器</a>
    </div>
</body>

并集选择器

根据组合的选择器选择不同的标签，以，分割开,如果有公共的样式设置，可以使用组选择器

html 复制代码

<head>
    <style type="text/css">
        /* 相同样式可以组合定义，用逗号隔开 */
       .box1, .box2{
            width: 100px;
            height: 100px;
        }
        /* 不同样式单独定义 */
        .box1{
            background:red;
        }
        .box2{
            background:gold;
        }
    </style>
</head>
<body>
    <p class="box1">组选择器</p>
    <p class="box2">组选择器</p>
</body>

交集选择器

选中同事满足多个条件的元素，比如同时满足某个标签属于某个类（选择器1选择器2{}，选择器中间没有任何符号）

html 复制代码

<head>
    <style type="text/css">
        /* 作用于  选择器1 */
       p.box{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <p class="box">选择器1</p>
    <p>选择器2</p>
    <div class="box">选择器3</p>
</body>

伪类选择器

用于向选择器添加特殊的效果,以:分割开，当用户和网站交互的时候改变显示效果可以使用伪类选择器，比如像下面代码，当鼠标不在box1范围内是red颜色，当鼠标移动到box1内，背景颜色变成了gold颜色

html 复制代码

<head>
    <style type="text/css">
       .box1{
            width: 100px;
            height: 100px;
            background:red;
        }
        /* hover表示鼠标悬浮 */
        .box1:hover{
            background:gold;
        }
    </style>
</head>
<body>
    <p class="box1">伪类选择器</p>
</body>

2.2.3 结构伪类选择器（可对列表的某一个）

根据元素结构关系查找元素

选择器	说明
E:fitst-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素（第一个元素N为1）

nth-child（公式）：根据元素的结构关系查找多个元素

li:nth-child(2n) {}

功能	公式
偶数标签	2n
奇数标签	2n+1; 2n-1
5的倍数	5n
第5个以后的	n+5
第5个一起的	-n+5

2.2.4 伪元素选择器

创建虚拟元素（伪元素），用来摆放装饰性的内容

必须设置content: " "属性用来设置伪元素内容，如果没有则引号留空即可

伪元素默认是行内显示模式

权重和标签选择器相同

选择器	说明
E::before	在E元素`里面最前面`添加一个伪元素
E::after	在E元素`里面最后面`添加一个伪元素

html 复制代码

div::before {
	content: "老鼠"
}
div::after {
	content: "大米"
}

<div>爱</div>

展示内容为：老鼠爱大米

2.3 CSS特性

继承性

子级默认继承父级的文字控制属性，如果子级标签有自己的样式，则自己的生效

层叠性

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性

不同的属性会叠加：不同的CSS属性都生效

html 复制代码

<style type="text/css">
    /* color被下面的覆盖，height生效 */
   div {
        color: red;
        height: 100px;
    }
    /* color覆盖上面的，background生效 */
    div {
        color: green;
        background:gold;
    }
</style>

优先级

当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

优先级高的生效

通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important （提高优先级：color:red !important）

（选中范围越大，优先级越低）

html 复制代码

<style type="text/css">
    /* color被下面的覆盖，height生效 */
   div {
        color: red;
        height: 100px;
    }
    /* color覆盖上面的，background生效 */
    .box {
        color: green;
        background:gold;
    }
</style>

<div class="box">标签</div>

如果是复合选择器，则需要全权重叠加计算
规则：（行内样式，id选择器个数，类选择器个数，标签选择器个数）

从左向右依次选个数，同一级个数多的优先级高，如果个数相同，则向后比较

!important权重最高

继承权重最低

2.4 Emmet写法（编码提速）

代码的简写方式，输入缩写，VS Code会自动生成对于的代码

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

说明	标签结构	Emmet
类选择器	`<div class="box"></div>`	标签名.类名
id选择器	`<div id="box"></div>`	标签名#id名
同级标签	`<div></div><p></p>`	div+p
父子级标签	`<div><p></p></div>`	div>p
多个相同标签	`<span></span><span></span><span></span>`	span*3
有内容的标签	`<div>内容</div>`	div{内容}