CSS-知识点

最新推荐文章于 2025-08-11 22:07:06 发布

原创最新推荐文章于 2025-08-11 22:07:06 发布 · 839 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

CSS负责页面样式。

选择器

选择器写法

选择器{

属性:属性值;

属性:属性值;

}

选择器属性

属性	解释
width	宽
height	高
background-color	背景颜色
font-size	文字大小
text-align	内容水平对齐方式
text-indent	首行缩进
color	文字颜色

基础选择器

css样式的引入

内部样式表（不推荐使用）：

将style标签写到html的head标签中叫做内嵌式写法

内联样式表：

直接将css样式写到标签中

外部样式表（最常用）：

通过link标签引入css文件（后缀：.css）

基础选择器类型

基础选择器分类

1. id选择器 对应#

2. class 类选择器 对应 .

3.标签选择器对应的就是标签

基础选择器介绍

（1）标签选择器

页面所有标签都会执行css的样式

（2）类选择器

class="类选择器名称"

谁调用谁生效，多个标签可以调用同一个类选择器。一个标签可以使用多个class选择器，但是一个标签中只能有一个class。使用多个class选择器时，中间使用空格隔开

class选择器命名规范：

class选择器可以使用字母、下划线、横线开头，不能使用数字、特殊符号开头，

不推荐使用css定义过的关键字进行命名

可以使用汉字命名（但是不推荐使用）

（3）id选择器

具有唯一性，id具有唯一值，一个标签不能调用多个id，一个id只能被一个标签使用，一般配合JS使用

（4）通配符选择器

*{属性：属性值}

一般用于页面初始化

复合选择器

概念：两个或两个以上的基础选择器通过不同的方式进行连接

交集选择器

标签名+class选择器（或者标签+id选择器）

标签中有联合的这个class类或者id才会执行

例：p.text（p标签里面需要有class类名为text的class类才会执行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.text{
            color: pink;
        }
    </style>
</head>
<body>
    <!-- 会执行 -->
    <p class="text">段落标签</p>
    <!-- 不会执行 -->
    <p>段落标签</p>
</body>
</html>

后代选择器

写法与交集选择器不同点在于标签名后面需要加上一个空格，表示这个标签的子标签中有这个类名才会执行。文本属性会继承父级

例：p .text（p标签的子标签里面有class类名为text的class类才会执行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p .text{
            color: pink;
        }
    </style>
</head>
<body>
    <!-- 不会执行 -->
    <p class="text">段落标签</p>
    <!-- 会执行 -->
    <p>
        <span class="text">span标签</span>
    </p>
</body>
</html>

子代选择器（亲儿子选择器）

只对子标签生效

标签名1>标签名2（标签2是标签1的子标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p>span{
            color: pink;
        }
    </style>
</head>
<body>
    <p>
        <!-- 会执行 -->
        <span>span标签</span>
        <!-- 不会执行 -->
        <p>段落标签</p>
    </p>
</body>
</html>

并集选择器

多个标签同时使用同一种样式，可以使用并集选择器，标签名之间使用逗号隔开

例：p,span,.text{ } (p标签，span标签和包含class名为text的class类)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,span,.text{
            color: pink;
        }
    </style>
</head>
<body>
    <!-- 会执行 -->
    <p>段落标签</p>
    <!-- 会执行 -->
    <span>span标签</span>
    <!-- 会执行 -->
    <div class="text">盒子</div>
    <!-- 不会执行 -->
    <h1>一级标题</h1>
</body>
</html>

属性选择器

input标签常用

例：input[type=text] input[type=password]

例：标签名[class]{ } 只要p标签中有class类的都会执行

标签名[class=*aa]{ } 只要p标签中class命名中包含aa的都会执行

标签名[class^=aa]{ } 表示p标签中class类名中以aa开头的都会执行

标签名[class$=aa]{ } 表示p标签中class类名中以aa结尾的都会执行

伪类选择器

一般针对a标签

a:link{ } 链接默认状态（现在没用了）

a:visited{ } 表示链接访问之后的状态（基本不用）表示浏览器访问过该链接

a:active{ } 链接点击瞬间的状态

a:hover{ } 鼠标移入之后显示的状态

hover可以使用到任意标签中（常用）

a:focus{ } 获取焦点之后的状态

文本元素

文本元素属性

（1）改变文字大小：font-size

（2）文字粗细：font-weight

100-300一类（lighter）400-500一类（normol） 600-900一类（bold/bolder）

（3）字体样式：font-style

italic 字体倾斜

（4）文本修饰：text-decoration

line-throuht 删除线

underline 下划线

none 没有

取消a标签默认下划线（常用）：

a { text-decoration: none; }

（5）文本居中

水平居中：text-align:center

垂直居中：line-height:具体高度

使文本内容在多少高度内居中（设置文本元素在多少像素内居中）

（6）选择字体：font-family

属性	解释
font-size	文字大小
font-weight	文字粗细
font-style	字体样式
text-decoration	文本修饰
line-height	行高/垂直居中
text-align	文本水平位置
font-family	字体

元素及其转换

元素类型

（1）块级元素

独占一行、可以设置宽高

例：div标签 p标签 h标签 li标签

（2）行内元素

不独占一行、不可以设置宽高

例：span标签 a标签 i标签 s标签 u标签 b标签

（3）行内块级元素

不独占一行、可以设置宽高

例：img标签 input标签

转换元素属性

display: inline;

inline行内元素 block块级元素 inline-block行内块级元素 none隐藏

css三大特性

css三大特性分别为：层叠性、继承性和优先级

（1）层叠性

执行的顺序和调用class样式没有关系，取决于css样式表的书写顺序，执行写在后面的（因为代码从上往下识别，下面的会把上面的覆盖）

（2）继承性

发生前提是嵌套

文字颜色、文字大小、字体、字体粗细、文字风格、行高可以继承

特殊情况：

h系列标签不能继承文字大小

a标签不能继承文字颜色

（3）优先级

范围越小，优先级越高

优先级由低到高：

默认样式>标签选择器>类选择器（class）>id选择器>行内样式（内联样式）> !important

背景

背景属性

（1）背景颜色

background-color

（2）背景图片

background-image:url('图片相对路径')

（3）背景图片平铺

background-repeat

repeat平铺 no-repeat不平铺 repeat-x横向平铺 repeat-y纵向平铺

（4）背景定位属性

background-position:参数1 参数2

left right top bottom

背景定位属性有两个值：第一个值是水平方向，第二个值是垂直方向，如果只设置一个值，另外一个默认是center

定位属性可以设置预定值，还可以设置像素，第一个表示距离左边，第二个值表示距离上边

（5）背景滚动

background-attachment：scroll（滚动）或者fixed（固定）

（6）背景属性连写方式

background:url('图片相对路径') no-repeat 定位参数1 定位参数2

连写属性中属性值顺序不做要求，每个属性之间用空格隔开

（7）背景大小

background-size:参数1 参数2;

参数1代表宽，参数2代表高，可以使用百分比也可以使用像素（背景图片的等比例放大缩小）

属性	解释
background-color	背景颜色
background-image	背景图片
background-position	背景定位
background-repeat	背景平铺
background-attachment	背景是否滚动（scroll或fixed）
background-size	背景大小

改变层级关系

z-index（图片叠加时使用）

谁大谁在上面，默认值为0

盒子模型

行高

浏览器默认16px

行高=文字高度+上下边距

行高单位：

（a）像素 px （常用）

（b）相对长度单位em

（c）百分比%

（d）不带单位

除了像素（px）外，行高都是与文字大小的乘积

行高单位	文字大小	行高(转换为px)
20px	20px	20px
2em	20px	40px
200%	20px	40px
2	20px	40px

em和%的行高是和父元素文字大小相乘，不带单位时是与子元素文字大小相乘

em特点：em是以字为单位，1em占一个字符的宽度，大小随字符字号改变而改变，继承父级元素字体大小

边框

（1）边框样式

border-style

实线solid 虚线dashed 点线dotted

（2）边框粗细

border-width

（3）边框颜色

border-color

（4）连写形式

例：border:1px solid red;

可以省略颜色和大小，默认黑色和1px，但是样式必须写，不能省略，书写顺序不做要求，边框尺寸会影响盒子大小，边框设置了上下左右都会改变如果只想改变某一条边，将border改为border-top形式（top上 bottom下 left左 right右）

内外边距

内边距 padding

盒子以内的距离，称为内边距，内边距也会改变盒子的大小

一般情况：盒子尺寸=width+padding*2+border*2

例：padding:20px

如果设置一个值，表示上下左右

如果设置两个值，表示上下、左右

如果设置三个值，表示上、左右、下

如果设置四个值，表示上、右、下、左（顺时针）

如果只想设置一条边，padding-top形式（top、left、bottom、right）

外边距 margin

盒子以外的距离，称为外边距

设置值的情况与内边距padding一样

margin: 0 auto; 表示上下没边距，左右自动，就是盒子居中

overflow

（1）默认值内容不会被修剪超出的内容会呈现在元素框之外

overflow:visible;

（2）内容会被修剪超出部分会隐藏

overflow:hidden;

（3）内容会被修剪超出部分会隐藏但是浏览器会显示滚动条用于查看被隐藏的内容

overflow:scroll;

overflow-x:scroll;
overflow-y:scroll;

横向滚动条 overflow-x:scroll;
纵向滚动条 overflow-y:scroll;

（4）浏览器自动显示滚动条

overflow:auto;

定位

CSS布局的手段之一

文档流<浮动流<定位流

（1）静态定位

position:static;

静态定位，相当于回归文档流，一般不用

（2）绝对定位

position:absolute;

特点:

元素使用绝对定位后不占据原来的位置（脱标）

元素使用绝对定位，位置基于浏览器出发

嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发

嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发

给行内元素使用绝对定位后，转换为行内块（不推荐使用，推荐使用display:inline-block;）

注意点：

使用定位必须要给定位的位置 left、right、top、bottom

通常不单独使用，配合相对定位使用

使用绝对定位，坐标原点取决于妒父级是否使用相对定位，如果没有会一级一级往上那个找，如果都没有最后会找到body

（3）相对定位

position:relative;

特点：

使用相对定位，位置从自身出发

同样也有left/right top/bottom属性

还占据原来位置

子绝父相：子元素绝对定位，父元素相对定位

行内元素使用相对定位不能转行内块元素

给父级一个相对定位，子元素一个绝对定位，那么子元素设置的left/right top/bottom属性就由相对浏览器变为相对父级

（4）固定定位

position:fixed;

特点：

元素使用绝对定位后不占据原来的位置（脱标）

元素使用固定定位后，位置基于浏览器出发

元素使用固定定位后，会转换为行内块（不推荐使用，推荐使用display:inline-block;）

（5）粘性定位

position:sticky;

相当于是相对定位和固定定位的结合体

特点：

默认行为：元素在文档流中占据原本的位置，类似于相对定位

触发粘滞：当滚动到粘性定位中设定的值时（如 top: 10px）元素变为固定定位，直到滚动到父级边界时恢复原状

核心属性：必须搭配 top、bottom、left、right中一个或者多个使用，来定义触发粘滞的阈值

粘性定位生效需要满足的条件:

（1）父级的宽高必须大于粘滞元素的宽高（否则没有滚动空间，粘滞效果无法触发）

（2）粘滞元素只能在其父级内固定（当父级完全滚出视口时，元素会跟随父级消失）

CSS补充

定位的盒子

定位的盒子居中：利用定位先向右走50%，然后再向左走盒子的一半（margin-left）

标签包含规范

div可以包含任何标签

p标签不能包含div、h系列列表

行内元素不要包含块元素

规避脱标流

（1）优先考虑标准流

（2）标准流解决不了使用浮动流

（3）浮动解决不了再使用定位流

图片和文字垂直方向的对齐方式

如果不设置，默认属性式

vertical-align:baseline;

vertical-align的垂直状态（top、bottom、center）

CSS可见性

overflow:hidden; 溢出隐藏

visibility:hidden; 隐藏元素、隐藏后元素占据原来的位置

display:none; 隐藏元素，隐藏后元素不占据原来的位置

display:block; 元素可见

display:none; 与display:block;配合js使用

页面初始化

（1）a标签去除下划线

a {

text-decoration:none;

}

（2）ul标签去除小圆点

ul {

list-style:none;

}

（3）页面去除初始边距（8px）

* {

padding:0;

margin:0;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
    
</body>
</html>