一篇学习CSS的笔记

鬼多不菜2025-06-01 23:16

一、简介

Cascading Style Sheets简称CSS，中文翻译为层叠样式表。当HTML被发明出来初期，不同的浏览器提供了各种各样的样式语言给用户控制网页的效果，HTML包含的显示属性并不是很多。但是随着各种使用者对HTML的需求，HTML添加了大量显示功能，以至于变得十分臃肿。随后CSS便诞生了。

CSS是一种用来表现HTML等文件样式的计算机语言。仅有HTML的网页显示效果往往简陋不堪到难以入目。因此CSS的与HTML就好像人类的血肉和骨架一样，没有了CSS的装饰HTML就像是没有了血肉的骨架一样没有了营养。

二、CSS引入方式

在实际编程中，将CSS引入到HTML一般有三种方式：内嵌式、外链式、行内式。

内嵌式：将CSS代码写到HTML中的style标签中。style标签的位置一般为head标签内部，与title同级，在其下方。

cpp 复制代码 
<head>
   
    <title>Document</title>
    <style>
        /* CSS代码 */
    </style>
</head>

外链式：CSS代码写到单独的.css文件中，通过原HTML中的link标签与其联系起来。link标签中的rel属性代表HTML与连接文件的关系，而stylesheet属性值代表关系为样式表。其href属性中要填入.css文件的路径。

css 复制代码 
<head>
    
    <title>Document</title>
   <link rel="stylesheet" href="地址">
</head>

行内式：CSS代码分散的写到个个标签的style属性中。·这样的CSS代码的作用范围与该标签范围保持一致，不会扩散到其他的标签。一般配合JS使用。

html 复制代码 
 <div style="height: 10; width: 10;">这有一个div标签 </div>

三、基础选择器

要给HTML添加样式，首先就要确定样式的作用范围，具体上就是作用在哪些个标签上。CSS就是通过选择器来确定CSS的作用范围的。基础的选择器有四类：

标签选择器：标签选择器针对某一类标签，统一给该标签添加相应的样式。无论处于哪一级，只要标签与标签选择器选中的标签类型相符合，就会添加相应的样式。标签选择器结构： 标签名{相应CSS}

html 复制代码 
 <style>
        div{
            /* 相应CSS代码 */
        }
    </style>

类选择器：如果想要针对具体的某个标签，可以使用类选择器。所有的HTML标签都有class属性，class属性的属性值被叫做类名。类名可以有数字、字母、下划线、中划线组成，但不能有中划线或者数字开头。一个标签可以有多个类名，类名之间用空格隔开。类名可以重复，一个类选择器可以选中多个标签。类选择器结构： .类名｛相应CSS｝

html 复制代码 
<!DOCTYPE html>
<head>
    <title>Document</title>
    <style>
       .onlydiv{
        /* 相应CSS */
       }
    </style>
</head>
<body>
   <div class="onlydiv">666</div>
</body>
</html>

id选择器：id选择器也用于选中单独的一个标签。每个HTML标签都有id属性，id属性属性值设定规则与类名相似。当不同的是，id属性值就像人的身份证号一样不可以重复，且一个标签仅能有一个id属性值。也就是说，一个id选择器只能选中一个标签。结构：#id属性值{相应CSS}

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>
    <style>
       #onlydiv{
        /* 相应CSS */
       }
    </style>
</head>
<body>
   <div id="onlydiv"></div>
</body>
</html>

通配符选择器：通配符选择器可以选中页面中的所有标签。结构：*{相应CSS}

css 复制代码 
 *{
        /* 相应CSS */
       }

四、文字和文本样式

CSS同样是通过各种属性来实现各种表现的。不过显示上与HTML属性略有不同。一般形式为 属性名:属性值;

css 复制代码 
   height:10px;

1.字体样式

字体大小 font-size：取值为数字+px。单位不能省。一般默认字体大小为16px。

css 复制代码 
font-size: 10px;

字体粗细 font-weight：取值既可以是关键字，也可以是纯数字。使用关键字取值可以取值normal（正常）或者bold（加粗）。也可以使用数字取值，其中normal对应400，bold对用700。

css 复制代码 
font-weight: 500;
font-weight: normal;

字体样式 font-style：取值为关键字，normal（默认），itailc（倾斜）。

css 复制代码 
font-style: italic;

字体类型 font-family：字体大概分为三类：无衬线字体sans-serif（笔画均匀，没有笔锋），衬线字体serif（粗细不均，有笔锋），等宽字体monospace（每个字母或者宽度所占的宽度相同）。Windows默认微软雅黑就属于无衬线字体。取值时使用字体名。一般实际开发中，一般写入多个值，用逗号隔开。这样如果第一种字体无法生效时可以有其他的选择，而不至于无法显示。也可以使用字体大类，这样可以避免系统因某些字体缺失而无法显示。

css 复制代码 
font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif !important;\\B站

font系列连写：font：style weight size family；其中前两个属性可以省略，省略的话设定为默认值（如果先单独设定属性再连写，单独设置的将会被层叠起来）。

css 复制代码 
font: italic 500 5px Microsoft YaHei;

2.文本样式

文本缩进 text-indent：取值有两种，可以为数字+px，也可以为数字+em。1em等于当前文本的字体大小（font-size）值。如果想要缩进两个字的大小，仅需取值为2em即可。

css 复制代码 
text-indent: 16px;
text-indent: 2em;

文本水平对齐方式 text-align：值有三种：left（左对齐）、center（居中）、right（右对齐）。也使图片居中，仅需对其父元素使用text-align标签。

css 复制代码 
text-align: center;

文本修饰 text-decortation：underline（下划线），line-through（删除线），overline（上划线），none（无修饰线，常用于清除a标签默认的下划线）。

css 复制代码 
text-decoration: underline;

行高 line-height：可以使用像素单位，也可以使用纯数字。使用像素单位代表精确的行高，纯数字代表其font-size字号的倍数。line-height可以与font复合属性连写（font：style weight size/line-height family;），与size使用 " / " 隔开。使用复合属性连写需要注意覆盖问题。line-height也可被用来使单行文字垂直居中。只需要让行高的值和weight属性值相等即可。

css 复制代码 
line-height: 1;

垂直对齐方式vertical-align:

属性值 效果
baseline 基线对齐（默认）
top 顶部对齐
middle 中线对齐
bottom 底线对其

3.颜色常见取值方法

在一些以颜色为属性值的属性使用中，常常需要对颜色有准确的选择。这时候就需要使用相对更加精确的颜色表示方法。

关键字表示：使用预定义的颜色名，一般为对应的英文名，如 red，green，blue，yellow等。

css 复制代码 
background-color: blue;

rgb表示法：使用红绿蓝三原色表示， 每项的取值范围为0~255。rgb(0,0,0)，rgb(255,57,34)等。

css 复制代码 
background-color: rgb(22, 33, 44);

rgba表示法：使用红绿蓝三原色+透明度，透明度的取值范围为0~1。rgba(23,56,89,0.7)

css 复制代码 
background-color: rgba(11, 22, 33, 0.5);

十六进制表示法（最常使用）：使用十六进制数字表示。以#开头，每两位为一组，分别表示红绿蓝三种颜色。如果三组中的两位数都各自相同，那么每组两个就可以简写为一个。如"#ff0044"="#f04"，"#009988"="#098"。

css 复制代码 
background-color: #333;

五、选择器进阶

在相对复杂的应用场景中，基础选择器并不能够满足开发者的需要。因此利用标签之间的关系和用户鼠标的位置关系更为精确的确定css标签的作用范围。

1.后代选择器

根据HTML标签之间的嵌套关系，来选择父元素后代中符合条件的元素。

语法：选择器1 选择器2｛css｝

选择器之间用空格隔开，表示在选择器选中的范围内选中满足选择器2的范围。

2.子代选择器

选中某元素的子代元素。即选中最近的子极。

父选择器>子选择器{css}

3.并集选择器

选中多种标签设置设置相同样式。

选择器1，选择器2{css}

4.交集选择器

选中同时满足多个条件的元素。

标签.类名{css}

5.hover伪类选择器

伪类指定是元素的状态，选中元素在符合的状态下的样式来进行设置。

鼠标悬停状态 选择器:hover {css}

①链接伪类

针对链接的伪类有四种：

选择器 选中状态
: link 访问前
: visited 访问后
: hover 鼠标悬停时
: active 点击时

在对这四种状态的样式进行设置的时候，需要按照固定顺序。即访问前>访问后>鼠标悬停时>点击时。

②结构伪类选择器

根据元素的结构关系来查找元素。用于多个相同标签同级排列时选中其中某个。

选择器 选中
E: first-child 第一个E元素
E: last-child 最后一个E元素
E: nth-child(N) 第N个E元素
css 复制代码 
ul li:first-child{
            background: url(路径) no-repeat fixed 0 0/0 0;
        }
③伪元素选择器

创建虚拟元素，常用来摆放装饰性内容。 伪元素选择器允许在选中元素的特定部分保持不同于元素本身的样式，就像在元素中嵌套了元素一样，但实际上还是在一个元素上。

伪元素选择器 说明
E : : before 在E元素里面前面部分添加一个伪元素
E : : after 在E元素里面末尾部分添加一个伪元素

伪元素选择器必须设置content属性，用来设置伪元素的内容，如果没用内容，使用引号留空即可。 伪元素的默认显示模式是行内显示模式。权重和标签选择器相同。

css 复制代码 
  div::after{
            content: "你好";
        }

6.Emmet语法

Emmet是一种代码的简写方式。帮助程序员快速书写代码。

Emmet 结果
标签名.类名 例：div.box <div class="box"></div>
标签名#id名 例： div#9527 <div id="9527"></div>
标签1+标签2 例：div+span <div></div> <span></span>
父标签>子标签 例：div>p <div> <p></p> </div>
标签名*个数 例：div*2 <div></div> <div></div>
标签名{文本} 例：div{我爱上班} <div>我爱上班</div>

对于CSS而言，属性可以简写，属性数值可以直接与属性连接，属性之间用+连接。

css 复制代码 
//w100+h100
 width: 100px;
 height: 100px;

六、背景属性元素

1.背景图片

css 复制代码 
background-image: url(图片路径);

背景图片默认平铺，就是如果图片大小不足以填满背景就使用多张图片拼接填充。可以使用background-repeat属性来控制背景图片的平铺方式。

属性值 平铺方式
no-repeat 不平铺
repeat 平铺
repeat-x 水平方向平铺
repeat-y 竖直方向平铺
css 复制代码 
background-repeat: no-repeat;

背景图片位置可以通过background-position来调整

css 复制代码 
background-position: center -100px;

第一个值为x轴位置，第二个值为y轴位置。值可以是方位名词也可以是对于左上角的距离。

方位名词 位置
left 右边
right 左边
center 中间
top 顶部
bottom 底部

2.背景图缩放

css 复制代码 
background-size: contain;
background-size: 100px 100px;
background-size:  100% 100%;

background-size属性值可以是关键字，可以是x-y方向像素大小，也可以是x-y方向的背景大小的百分比。

关键字 作用
contain 等比例缩放图片直到图片完全放入背景
cover 等比例缩放图片直到背景被图片完全覆盖

3.背景固定

固定住的背景图片不会随着鼠标的滚动而向上移动

css 复制代码 
background-attachment: fixed;
关键字 效果
scroll 滚动 默认
fixed 固定

4.background复合写法

包括背景色、背景路径、背景平铺方式、背景位置、背景缩放、背景固定。

css 复制代码 
background: url(路径) no-repeat fixed 0 0/0 0;

背景复合写法中的属性之间不分顺序，但是背景位置与背景缩放要用\连接。也就是说在复合写法中设置背景缩放就一定要设置背景位置，且在其前用\连接。

七、显式模式

显示模式就是标签的显示方式。显示模式可以简单分为三类：

显示模式 特点
行内显示 span 一行可以放置多个，宽度属性不生效，宽度由内容撑开
块级显示 div 独占一行，宽度默认为父级的100%，添加宽度属性生效
行内块显示 img 一行可以放多个，宽度属性生效，宽度也可以由内容撑开

显示模式转换

css 复制代码 
display: inline;

|-----|--------------|
| 行内 | inline |
| 块 | block |
| 行内块 | inline-block |

八、css三大特性

1.层叠性

相同的属性，后面的css属性覆盖前面的css属性。不同的属性都会生效。

2.优先级

优先级也叫权重。当多个选择器对同一标签属性设置时，通过比较不同选择器之间的权重来确定哪种选择器的属性会生效。

对于单个选择器来讲，选择器优先级高的样式生效。

通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important。

选择器选中的范围越大，选择器的优先级越低。

对于选择器叠加作用时，通过比较权重来确定那种选择器属性生效。规则就是从权重最高位开始，比较同一级权重的选择器个数，如果个数相同，就向后比较下一级权重。

| 选择器 | 继承/通配符 | 标签选择器 | 类选择器 | id选择器 | 行内样式 | !important |

权重 0 1 10 100 1000 无穷

3. 继承

子代会继承父代的样式。

九、 盒子模型

盒子模型是CSS中的一种思维模型。CSS假定所有的HTML文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，将其看作是一个盒子。

盒子由内容区域、内边框、边框线、外边框组成。

width、height等属性是对内容生效的，盒子大小=内容大小+（内边距大小+边框线粗数+外边距大小）*2。也就是说盒子大小是外增的。如果想要自动固定盒子大小可以通过box-sizing属性：

css 复制代码 
box-sizing: border-box;\\內减

內减时width、height属性对应盒子整体大小。

1.边框线

边框线通过border属性设置边框线粗细、线条样式、线条颜色，给值不分先后顺序。

属性值 线条样式
solid 实线
dashed 虚线
dotted 点线
css 复制代码 
border: 1px solid #000;\\粗细、线条样式 、线条颜色

如果细分，边框实际上由四条边组成。CSS可以具体的对单边进行样式设置。四条边分别对应四个属性：border- 方位名词。取值与border属性相同。

css 复制代码 
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
2.内边距

内边距通过padding属性和padding-方位名词来设置内边距宽度。

css 复制代码 
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;

除了上面这种单值写法，padding属性也可以多值书写。

css 复制代码 
padding: 10px 11px;\\上下10px 左右11px
padding: 10px 11px 12px;\\上10px 左右11px 下12px
padding: 10px 11px 12px 13px;\\上10px 右11px 下12px  左13px
3.外边距

外边距通过margin属性来设置，使用方法与padding属性相同。

css 复制代码 
margin: 10px 11px 12px 13px;
margin: 10px 11px 12px;
margin: 10px 11px;
margin: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

margin属性也常被用于标签的水平居中。

css 复制代码 
margin-right: auto;
margin-left: auto;
4.清除默认样式

很多标签都有其默认的内外边距，如果忽视的话在开发中很容易造成结果与设计不符。因此在开发时一定要确保默认样式的清除。

css 复制代码 
  *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

在开发中，列表前面的

一般也是不要的。

css 复制代码 
 li{
            list-style: none;
        }
5.元素溢出

盒子中的元素大小大于盒子本身大小的话，多余的部分会溢出盒子显示。

可以通过overflow属性设置溢出的样式。

属性值 效果
hidden 隐藏溢出的部分
scroll 溢出的部分可以滚动滚动条查看，无论是否溢出都显示滚动条
auto 溢出的部分滚动查看，溢出时才显示滚动条
css 复制代码 
div{
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
6. 合并现象

垂直排列的兄弟元素，上下的margin会合并，只有值较大的margin会生效。

7.坍塌问题

父子级的标签，子级添加上外边距会产生塌陷问题，父子级一起向下移动。

解决方法：

  • 取消子级margin，父级设置padding代替。
  • 父级设置overflow: hidden
  • 父级设置border-top
8.圆角边框

使用border-radius属性可以设置元素外边框为圆角。属性值可以是百分比，也可以是像素。

css 复制代码 
border-radius: 50px;
border-radius: 50%;\\标准圆

多值写法

css 复制代码 
border-radius: 10px 20px 30px 40px;\\左上10 右上20 右下30 左下40
border-radius: 10px 20px 30px;\\左上10 右上左下20 右下30
border-radius: 10px 20px;\\左上右下10 右上左下20
border-radius: 10px;\\10px
9.盒子阴影

使用box-shadow属性可以设置阴影效果。

css 复制代码 
box-shadow: x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影;
box-shadow: 10px 10px 3px 1px rgba(0,0,0,.4);

x轴偏移量和y轴偏移量必须给值，其他可以省略。内外阴影默认外阴影，内阴影给值inset。

十、浮动

1.标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则。标准流是一种规则，例如行内元素就是一行放多个，块元素就是独占一行。

2.浮动

标准流是一种规则，但并不意味着必须遵循。块级标签独占一行，我们却有方法让其水平排列。浮动就是一种让块元素水平排列的方法。浮动的本质作用实际上是用于图文混排。

css 复制代码 
float: left;\\左浮动
------------------------------------------------
float: right;\\右浮动
  • 浮动可以让盒子脱离标准流，不占用标准流的位置。就好像漂浮到了盒子上方，它们下面依然可以放置标准流，但是重叠的部分会被浮动的标签遮掩。
  • 脱离标准流后自动具备行内块的特点，即一行可以放多个，宽高都生效。
  • 当相邻两浮动高不同时，顶部对齐。
  • 左浮动元素与盒子左侧顶部对齐，右浮动元素与盒子右侧顶部对齐。
3.清除浮动

浮动元素并不会占用标准流的位置，当然也就不能撑开父级盒子的高度（没有设置父级高度）。如果父级盒子内元素全部浮动，那么父级盒子后面的盒子布局就会混乱。因此常常需要解决浮动带来的这种问题。清除浮动使用clear属性。

额外标签法

在父元素内容最后添加一个块级元素，设置CSS清除浮动。

css 复制代码 
<html>
<head>
    
    <title>Document</title>
    <style>
        son1 son2{
            width: 100px;
            height: 100px;
            float: left;
        }
        clearbox{
            clear: both;
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="clearbox"></div>
    </div>
</body>
</html>

单伪元素法

在父元素未添加伪元素清除浮动。

css 复制代码 
<html>

<head>
    
    <title>Document</title>
    <style>
        .box::after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="firstcontent"></div>
        <div class="secondcontent"></div>
    </div>
</body>
</html>

双伪元素法

在父元素首未添加伪元素，并在尾部伪元素清除浮动。

css 复制代码 
<html>

<head>
    
    <title>Document</title>
    <style>
        .box::before,
        .box::after{
            content: "";
            display: table;
        }
        .box::after{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="firstcontent"></div>
        <div class="secondcontent"></div>
    </div>
</body>
</html>

十一、Flex

Flex布局也叫做弹性布局，是浏览器倡导的布局模型，适合结构化布局，有着强大的空间分布和对其能力。而且Flex布局没有浮动中的脱标现象，更加的简单灵活。

Flex布局通过父元素控制边界，父元素中的子级元素全部为Flex布局内容，不再区分行内或块显示模式，自动的挤压或拉伸。

在Flex布局下，

  • 表明边界的父级叫做弹性容器（flex container)
  • 被父级包裹的各个子级叫做弹性盒子（flex item)
  • 默认水平方向为主轴（main axis）
  • 默认垂直方向为交叉轴（corss axis）
  • 主轴左侧默认为主轴起点（main start)，右侧为终点(main end)。交叉轴顶部默认为轴起点(corss start)，底部默认为轴终点(cross end)。

1. 属性

①display: flex

将父级弹性容器显示模式设定为flex,表明该范围为Flex应用区域。设置后子级自动挤压或拉伸。

②justify-content

主轴对齐方式

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

侧轴对齐方式

属性值 效果
stretch 弹性盒子沿侧轴被拉伸直到铺满容器
center 弹性盒子沿侧轴居中排列
flex-start 弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
④flex-wrap

弹性盒子换行

在Flex布局中，弹性盒子默认都在一行上排布，如果子级的宽度和超过了父级盒子，那么会自动均匀挤压到父级可以容纳的程度。使用flex-wrap属性可以让超出部分的弹性盒子换行，从而避免挤压，达到想要的效果。

属性值 效果
wrap 换行
nowrap 默认，不换行
⑤align-content

多行侧轴对齐，使用要求父级盒子有具体的高度。

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

对某个具体的弹性盒子设置侧轴对齐样式，作用于哪一个弹性盒子，就写于哪个盒子的CSS样式中。

| 属性值 | 效果 |
| flex-start | 默认值，弹性盒子从轴起点开始依次排列 |
| flex-end | 弹性盒子从终点向起点排列 |

center 弹性盒子沿侧轴居中排列
⑦flex-direction

修改主轴方向。

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

弹性伸缩比。作用于每个弹性盒子，属性值为整数。CSS可以通过flex的属性值将弹性容器分为flex属性值相加的份数，每个弹性盒子占的份数就是其对应的flex值。

十二、定位

定位是一种灵活改变盒子在网页中位置的方式。

定位可以大概分为两个步骤：

  1. 确定定位模式，是需要相对定位还是绝对定位。
  2. 设定边偏移，将盒子显示到需要的位置。

边偏移通过left、right、top、bottom属性来确定方位。

1.相对定位
css 复制代码 
position: relative;

相对定位的特点是不会脱离标准流，依旧占用原本盒子的位置。而且显示模式特点不变，块级元素相对定位依旧是块级，行内依旧是行内。相对于盒子原来的位置设定边偏移。

css 复制代码 
<!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>
     .box .first{
        position: relative;
        left: 200px;
        top: 200px;
        color: blue;
        height: 200px;
        width: 200px;
        background-color: red;
     }
     .box .second{
        color: red;
        height: 200px;
        width: 200px;
        background-color: blue;
     }
    </style>
</head>
<body>
    <div class="box">
       <div class="first">我要红色</div>
       <div class="second">我要蓝色</div>
    </div>
</body>
</html>
2.绝对定位
css 复制代码 
position: absolute;

绝对定位的特点是脱离标准流，不会占用原本的位置，显示模式体现为行内块。如果和盒子有继承关系的前辈们中有设定定位的，那么就依据有最近继承关系的前辈的位置来设定边偏移，如果前辈中没有，那么就依据浏览器的可视区设定边偏移。

3.子绝父相

在绝对定位的父级设置相对定位，这样就可以让绝对定位盒子相对于父级相对定位盒子设定位置，对绝对定位盒子进行有效的约束。

4.固定定位
css 复制代码 
position：fixed;

固定定位的特点是脱离标准流，不占用原来的位置，具有行内块的显示模式，依据浏览器窗口设定边偏移。固定定位的元素在网页滚动时不会改变位置。

5.粘性定位
css 复制代码 
position: sticky;
top: 0;

粘性定位必须与top、bottom、right、left属性配合使用，否则无效果。每当粘性定位元素随着浏览器的滑动到达边偏移设定的位置后，就会固定到该位位置。粘性定位并不会脱离标准流，依然占据原有位置。

6.层级

多个元素聚集在同一位置时会发生遮盖，这时层级高的显示，低的被遮盖。默认都有定位的情况下，后书写的覆盖先书写的。但是我们可以通过堆叠层级属性z-index设定定位元素的层级，改变定位元素的显示顺序。属性值为整数，数值越大，层级越高。

css 复制代码 
 z-index: 2;

十三、精灵技术

CSS精灵（CSS Sprites)，是一种网页图片的处理方式。就是把网页中一些固定的背景图片拼接到一张图片上，使用background-position属性精准定位出背景图片的位置。例：

精灵图可以减少服务器的请求次数，减轻服务器的压力。

十四、字体图标

字体图标是一种看着像图标的字体。网页中有一些简单的小图标使用字体图标来显示，可以使得网页更加的灵活。因为字体图标本质上还是一种字体，可以通过相关属性设置大小颜色等样式。

阿里巴巴字体库网址：iconfont-阿里巴巴矢量图标库

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>
    <link rel="stylesheet" href="./font_4934815_m04pwjy1n6/iconfont.css">
    <style>
    </style>
</head>
<body>
    <span class="iconfont icon-anquanbaozhang"></span>
</body>
</html>

十五、过渡 transition

使用transition属性可以为一个元素在不同状态之间切换的时候添加过渡效果。

css 复制代码 
transition: all 0.3s;
//第一个元素值为过渡效果的属性，一个为过渡效果的时间
//如果设置多个属性过渡效果，可以使用逗号隔开，如果全部属性都设置过渡效果可以使用all
transition: weight 0.3s,
            height 0.3s;

十六、透明度 opacity

设置整个元素的透明度（包含背景和内容）。属性值在0~1之间。0为完全透明，1为完全不透明。

cpp 复制代码 
opacity: 0.3;

十七、光标类型 cursor

鼠标悬停在元素上时的指针显示样式。

属性值 效果
default 箭头(默认)
pointer 小手，提示可点击
text 工字形，提示可以选择文字
move 十字光标，提示可以移动
相关推荐
黑客飓风10 分钟前
JavaScript 性能优化实战大纲
前端·javascript·性能优化
JH30731 小时前
Maven的三种项目打包方式——pom，jar，war的区别
java·maven·jar
emojiwoo1 小时前
【前端基础知识系列六】React 项目基本框架及常见文件夹作用总结（图文版）
前端·react.js·前端框架
带刺的坐椅2 小时前
轻量级流程编排框架，Solon Flow v3.5.0 发布
java·solon·workflow·flow·solon-flow
David爱编程2 小时前
线程调度策略详解：时间片轮转 vs 优先级机制，面试常考！
java·后端
张人玉2 小时前
XML 序列化与操作详解笔记
xml·前端·笔记
杨荧2 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
阿冲Runner3 小时前
创建一个生产可用的线程池
java·后端
YeeWang3 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
gnip3 小时前
Jenkins部署前端项目实战方案
前端·javascript·架构
热门推荐
01UV安装并设置国内源02DeepSeek更新！速览DeepSeek V3.1新特性03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04KGG转MP3工具|非KGM文件|解密音频05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）072025最新国内服务器可用docker源仓库地址大全（2025年8月更新）08阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践