CSS复习精选

编程入门行业动态更新时间:2024-10-13 10:26:45

CSS复习精选

CSS复习精选
一、选择器进阶
- - 1.1 后代选择器: 空格
  - 1.2 子代选择器: >
  - 1.3 并集选择器: ,
  - 1.4 交集选择器: 紧挨着（贴贴）
  - 1.5 伪类选择器
二、CSS三大特性
- 2.1 继承性
- 2.2 层叠性
- 2.3 优先级
- - - 2.3.1 特性：
    - 2.3.2 优先级公式：
    - 2.3.3 权重
三、元素显示模型
- - 3.1 块级元素
  - 3.2 行内元素
  - 3.3 行内快元素
四、盒子模型
- - 4.1 内容区域：content
  - 4.2 边框：border
  - - 4.2.1 边框（border）- 连写形式
    - 4.2.2 边框（border）- 单方向设置
  - 4.3 内边距
  - - 4.3.1 内边距（padding）- 连写
    - 4.3.2 内边距（padding）- 单方向设置
  - 4.4 外边距
  - - 4.4.1 外边距（margin）- 连写
    - 4.4.2 外边距（margin） - 单方向设置
  - 4.5 清除默认内外边距
  - - - 4.5.1 外边距正常情况
    - 4.5.2 外边距折叠现象 – ② 塌陷现象
    - 4.5.3 行内元素的margin和padding无效情况
  - 4.6 盒子模型最终计算公式：
五、结构伪类
- - 5.1 结构伪类选择器的易错点
六、标准流
七、浮动
- - - 7.1 浮动的作用
    - 7.2 浮动的特点
    - 7.3 清除浮动的方法
八、伪元素
九、定位
- - - 9.1 设置定位的方式
    - 9.2 静态定位
    - 9.3 相对定位
    - 9.4 绝对定位

CSS复习精选

主要是针对CSS重点，易难易错易混淆的CSS知识点整理，并不表明涵盖所有CSS知识

一、选择器进阶

目标：能够理解复合选择器的规则，并使用复合选择器在 HTML 中选择元素

1.1 后代选择器: 空格

作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2 { css }
结果：
在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
注意点：
1.后代包括：儿子、孙子、重孙子……
2.后代选择器中，选择器与选择器之间用空格隔开

<body><div class="father"><p>亲儿子</p><div><p>亲孙子</p></div></div><p>私生子</p>
</body>

        /* 在.father的后代中，找p标签 */.father p {color: red;}

此时亲儿子、亲孙子都变红（只要是同父辈，祖父辈都行）

1.2 子代选择器: >

作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1 > 选择器2 { css }
结果：
在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
注意点：
1.子代只包括：儿子
2.子代选择器中，选择器与选择器之前用 > 隔开

<body><div class="father"><p>亲儿子</p><div><p>亲孙子</p></div></div><p>私生子</p>
</body>

/* 子代选择器也称亲儿子选择器 */
.father>p {color: blue;}

此时只有亲儿子才会变蓝

1.3 并集选择器: ,

作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ，选择器2 { css }
结果：
找到选择器1 和选择器2 选中的标签，设置样式
注意点：
1.并集选择器中的每组选择器之间用逗号 “,” 分隔
2.并集选择器中的每组选择器可以是基础选择器或者复合选择器
3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性

<body><!-- 需求：把div，p标签和h2设置为红色（节省代码的方式） --><div>我是div</div><div>我也是一个div</div><p>我是p标签</p><p>我也是p标签</p><h1 class="red">我是一个h1标签</h1><h2>我是一个h2标签</h2>
</body>

  <style>div,p,.red {color: red;}</style>

此时只有h2没有变颜色其他都变色

1.4 交集选择器: 紧挨着（贴贴）

作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1选择器2 { css }
结果：
（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点：
1.交集选择器中的选择器之间是紧挨着的，没有东西分隔
2.交集选择器中如果有标签选择器，标签选择器必须写在最前面（例:p.red）

<body><!-- 需求：只让小可爱变红（不能改变html结构） --><!-- 解决：找到页面中，既是p标签，又有red这个类名的标签，设置样式 --><div class="red">小姐姐</div><p>小帅哥</p><p class="red">小可爱</p>
</body>

 <style>p.red {color: red;}</style>

此时只有小可爱变红

1.5 伪类选择器

注意事项：

a:link选择所有未被访问过的链接
2. a：visited选择所有已经被访问的链接
3. a:hover选择鼠标指针于其上的链接
4. a:active选择活动链接

记忆方法： lvha顺序开发 lv包包hao

    <style>/* 1、a:link选择所有未被访问过的链接 */a:link {color: #333;text-decoration: none;}a:visited {color: orange;}/* 鼠标经过的那个链接 */a:hover {color: skyblue;}/* 选择鼠标正在按下还没有弹起的链接 */a:active {color: green;}</style>

    <!-- lvha顺序开发 lv包包hao --><!-- 1、a:link选择所有未被访问过的链接2、a：visited选择所有已经被访问的链接3、a:hover选择鼠标指针于其上的链接4、a:active选择活动链接 --><style>/* 1、a:link选择所有未被访问过的链接 */a:link {color: #333;text-decoration: none;}a:visitted {color: orange;}/* 鼠标经过的那个链接 */a:hover {color: skyblue;}/* 选择鼠标正在按下还没有弹起的链接 */a:active {color: green;}</style>

二、CSS三大特性

2.1 继承性

2.1.1 特性：子元素有默认继承父元素样式的特点（子承父业）
2.1.2 可以继承的常见属性：
1.color
2.font-style、font-weight、font-size、font-family
3.text-indent、text-align
4.line-height
5.……
2.1.3 注意点：
可以通过调试工具判断样式是否可以继承(f12)
2.1.4 常见应用场景：
1.可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
2.直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

<body><div class="father">父亲<div class="son">儿子</div></div>
</body>

 <style>.father {color: red;font-style: italic;font-weight: 700;font-size: 30px;font-family: 楷体;text-indent: 2em;text-align: center;line-height: 100px;}</style>

style未对儿子设置样式，此时继承父亲的(子承父业)，效果如下：

2.1.5 继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
a标签的color会继承失效
• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
h系列标签的font-size会继承失效
• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
div的高度不能继承，但是宽度有类似于继承的效果
• 宽度属性不能基继承，但是div有独占一行的特性

<body><div class="father"><!-- 继承正常情况 --><div class="son">儿子</div><!-- 1、a标签的文字颜色会继承失效 --><a href="#">我是一个a标签</a><!-- 2、h系列标签的font-size会继承失效 --><h1>我是一个h1标签</h1><!-- 3、div标签的高度不能继承，但是宽度有类似于继承的效果 --><div class="son"></div></div>
</body>

   <style>.father {color: red;font-size: 20px;width: 400px;height: 400px;background-color: skyblue;}.son {width: 100px;height: 100px;background-color: orange;}</style>

此时,效果如下：

2.2 层叠性

2.1 特性：
1.给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2.给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
注意点：
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
1.如果给同一个标签设置了相同的属性，此时样式会层叠覆盖，写在最后的会生效
2.如果给同一个标签设置了不同的样式，此时样式会层叠叠加，共同作用在标签上

<body><p class="orange">我是一个文字</p>
</body>

<style>p {color: red;}p {/* font-size: 30px; */color: blue;}</style>

此时文字变蓝

2.3 优先级

2.3.1 特性：

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
同一个元素指定多个选择器，则会有优先级产生。
选择器相同，执行层叠性。
选择器不同，根据选择器权重进行。
优先级由若到强向下，注意权重数值。比较从左往右比较数值大小，权重叠加时永远只有叠加没有进位。

2.3.2 优先级公式：

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

注意点：
1.!important写在属性值的后面，分号的前面！
2.!important不能提升继承的优先级，主要是继承优先级最低！
3.实际开发中不建议使用 !important 。

<body><div class="father"><!-- 6、行内样式 --><p class="son" id="one">我是一个标签</p></div>
</body>

  <style>/* 7、!important 最强外挂 */p {/* color: purple !important; */}/* 5、id选择器 */#one {/* color: skyblue; */}/* 4、类选择器 */.son {/* color: orange; */}/* 3、标签选择器 */p {/* color: blue; */}/* 2、通配符选择器 */* {color: green;}/* 1、继承 */.father {color: red !important;}</style>

这里就不展示效果了，有需要自己复制代码逐一尝试

2.3.3 权重

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式： (0， 0，0， 0) 分别对应(行内式样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数)（每一级之间不存在进位）
查看权重小技巧：鼠标悬停在所需要查的，就会自动显示权重

注意：（上面自动显示权重公式的后三类，即ｉｄ，类，标签的个数），行内式写在标签的第一个，用style表示
比较规则：
1.先比较第一级数字，如果比较出来了，之后的统统不看
2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
3.……
4.如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
注意点：!important如果不是继承(继承最低），则权重最高，天下第一！
权重计算题解题步骤：

先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
通过权重计算公式，判断谁权重最高

注意点：
实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己

    <style>/* 针对span来说是继承--pass *//* 针对p 来说 可以选中 *//* 权重：（0,0,0,2） */div p {color: red;}/* 针对span来说是继承--pass *//* 针对[p]来说还是继承-pass *//* 权重：（0,0，1，0） */.father {color: purple;}/* 都是继承 子承父业 继承P */</style>
</head>
<body><div class="father"><p class="son"><span>文字</span></p></div>
</body>

解析：这题比较特殊，都是继承，不要真的就pass,虽然father的权重比p的高

三、元素显示模型

3.1 块级元素

属性：display：block
显示特点：
1.独占一行（一行只能显示一个）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
代表标签：
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

  <style>div {width: 200px;height: 200px;background-color: skyblue;}</style>
</head>
<body><div>我是div</div><div>我是div</div><div>我是div</div>
</body>

3.2 行内元素

属性：display：inline
显示特点：
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签：
a、span 、b、u、i、s、strong、ins、em、del……

  <style>span {width: 200px;height: 200px;background-color: skyblue;}</style>
</head>
<body><span>我是span</span><span>我是span</span><span>我是span</span>
</body>

3.3 行内快元素

属性：display：inline-block
显示特点：

一行可以显示多个
可以设置宽高

代表标签：
• input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
拓展1：HTML嵌套规范注意点
1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
2.p标签中不要嵌套div、p、h等块级元素
3.a标签内部可以嵌套任意元素
4.a标签不能嵌套a标签

  <style>input {width: 200px;height: 200px;background-color: skyblue;}img {width: 250px;height: 250px;}</style>
</head>
<body><!-- <input type="text"><input type="text"><input type="text"> --><img src="./images/1.jpg" alt=""><img src="./images/1.jpg" alt=""><img src="./images/1.jpg" alt="">
</body>

四、盒子模型

概念

页面中的每一个标签，都可看做是一个**“盒子”**，通过盒子的视角更方便的进行布局
浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域(margin）构成，这就是盒子模型

4.1 内容区域：content

作用：利用 width 和 height 属性默认设置是盒子内容区域的大小
属性：width / heigh
常见取值：数字+px

4.2 边框：border

作用：给设置边框粗细、边框样式、边框颜色效果

4.2.1 边框（border）- 连写形式

属性名：border
属性值：单个取值的连写，取值之间以空格隔开
如：border : 10px solid red;
快捷键：bd + tab

4.2.2 边框（border）- 单方向设置

场景：只给盒子的某个方向单独设置边框
属性名：border - 方位名词
属性值：连写的取

    div {width: 300px;height: 300px;background-color: skyblue;/* 1、单个属性 *//* border-width: 10px;border-style: solid;border-color: red; *//* 2、连写形式 *//* border: 10px solid blue; *//* border: 10px dotted orange; *//* 3、单方向设置 *//* border-top: 10px solid red; */border-bottom: 10px solid orange;}

4.3 内边距

作用：设置边框与内容区域之间的距离
属性名：padding
常见取值：

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！

4.3.1 内边距（padding）- 连写

属性名：padding
属性值：单个取值的连写，取值之间以空格隔开
如：padding : 10px 20px 30px;
注意事项：
1. 一个取值代表上右下左，例：padding: 1px;表示上右下左内边距为1px.
2. 两个值：padding: 1px 2px; 表示上下1px, 左右2px.
3. 三个值：padding: 1px 2px 3px; 表示上px, 左右内边距px, 下内边距为3px.
4. 四个值： padding: 1px 2px 3px 4px; 表示上、右、下、左内边距分别为: 1px， 2px, 3px 4px.

4.3.2 内边距（padding）- 单方向设置

场景：只给盒子的某个方向单独设置内边距
属性名：fpadding - 方位名词
属性值：数字 + px
内边距
１内容到边框的距离，是内容不是文字盒子的空白
２盒子独占一行时没有设置宽高，盒子不会撑大，默认占满
（拓展）不会撑大盒子的特殊情况
不会撑大盒子的特殊情况（块级元素）
如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

    div {width: 100px;height: 100px;background-color: pink;border: 1px solid #000;/* 1、padding的取值 *//* padding: 10px; *//* padding: 10px 20px; *//* padding: 10px 20px 30px; *//* padding: 10px 20px 30px 40px; *//* 2、padding的单方向取值 */padding-left: 20px;}

 <div>我是内容我是内容我是内容我是内容我是内容我是内容</div>

4.4 外边距

4.4.1 外边距（margin）- 连写

属性名：margin
属性值：单个取值的连写，取值之间以空格隔开
如：margin : 10px 20px 30px;
注意事项：
1. 一个取值代表上右下左，例：margin: 1px;表示上右下左内边距为1px.
2. 两个值：margin: 1px 2px; 表示上下1px, 左右2px.
3. 三个值：margin: 1px 2px 3px; 表示上px, 左右内边距px, 下内边距为3px.
4. 四个值： margin: 1px 2px 3px 4px; 表示上、右、下、左内边距分别为: 1px， 2px, 3px 4px.
作用：设置边框以外，盒子与盒子之间的距离
属性名：margin
常见取值：
记忆规则：从上开始赋值，然后(上右下左)顺时针赋值，如果设置赋值的，看对面的！！

4.4.2 外边距（margin） - 单方向设置

场景：只给盒子的某个方向单独设置外边距
属性名：margin - 方位名词
属性值：数字 + p

常见取值

   /* 去除浏览器默认的margin和padding */* {margin: 0;padding: 0;}.box {/* 转换成行内块元素 */display: inline-block;width: 200px;height: 200px;background-color: pink;/* 1、margin的取值 *//* margin: 10px; *//* margin: 10px 20px; *//* margin: 10px 20px 30px; *//* margin: 10px 20px 30px 40px; *//* 2、margin的单方向 */margin-left: 20px;}

4.5 清除默认内外边距

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……

   * {margin: 0;padding: 0;}

4.5.1 外边距正常情况

场景：水平布局的盒子，左右的margin正常，互不影响
结果：最终两者距离为左右margin的和
5.7 外边距折叠现象 – ① 合并现象
场景：垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：避免就好
• 只给其中一个盒子设置margin即可

   * {margin: 0;padding: 0;}div {/* 转换成行内块元素 */display: inline-block;width: 300px;height: 300px;}.red {background-color: red;margin-right: 100px;}.blue {background-color: blue;margin-left: 100px;}

  <div class="red"></div><div class="blue"></div>```

4.5.2 外边距折叠现象 – ② 塌陷现象

外边距塌陷针对块级元素

场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上
结果：导致父元素一起往下移动
解决方法：

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置overflow：hidden
转换成行内块元素
设置浮动

合并现象

   * {margin: 0;padding: 0;}div {width: 300px;height: 300px;}.red {background-color: red;/* margin-bottom: 200px; */}.blue {background-color: blue;margin-top: 200px;}

 <div class="red"></div><div class="blue"></div>

塌陷现象

  * {margin: 0;padding: 0;}.father {width: 400px;height: 400px;background-color: pink;/* border-top: 1px solid #000; *//* padding-top: 1px; *//* overflow: hidden; *//* display: inline-block; */float: left;}.son {width: 100px;height: 100px;background-color: blue;margin-top: 100px;}

  <div class="father"><!-- 我是一行文本 --><div class="son"></div></div>

4.5.3 行内元素的margin和padding无效情况

场景：给行内元素设置margin和padding时
结果：

水平方向的margin和padding布局中有效！
垂直方向的margin和padding布局中无效！

4.6 盒子模型最终计算公式：

盒子宽度 = 左右边框 + 左右padding + 内容宽度
盒子高度 = 上下边框 + 上下padding + 内容宽度

五、结构伪类

目标：能够使用结构伪类选择器在html中的定位
作用与优势：

作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素

选择器:
注意点:

    /* 1、找到第一个子元素，并且为li标签 */li:first-child {/* background-color: blue; */}/* 2、找到最后一个子元素，并且为li标签 */li:last-child {/* background-color: orange; */}/* 3、找到第3个子元素，并且为li标签 */li:nth-child(3) {/* background-color: pink; */}/* 4、找到倒数第3个子元素，并且为li标签 */li:nth-child(8) {/* background-color: green; */}li:nth-last-child(3) {background-color: red;}

5.1 结构伪类选择器的易错点

nth-child和nth-of-type区别：

nth-child → 直接在所有孩子中数个数
nth-of-type → 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数（这个主要是针对同级的子元素）

    /* 需求：需要找到第3个li标签 *//* 1、使用 :nth-child */li:nth-child(9) {/* background-color: red; */}/* 2、使用 :nth-of-type */li:nth-of-type(3) {background-color: orange;}</style>

<body><ul><li>我是第1个li</li><li>我是第2个li</li><div>狸猫</div><div>狸猫</div><div>狸猫</div><div>狸猫</div><div>狸猫</div><div>狸猫</div><div>狸猫</div><div>狸猫</div><div>狸猫</div><div>狸猫</div><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li><li>我是第6个li</li><li>我是第7个li</li><li>我是第8个li</li><li>我是第9个li</li><li>我是第10个li</li></ul>
</body>

六、标准流

目标：能够认识标准流的默认排布方式及其特点
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
1.块级元素：从上往下，垂直布局，独占一行
2.行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

    div {width: 200px;height: 200px;background-color: orange;}span {background-color: skyblue;}

<body><div>我是块级元素div</div><div>我是块级元素div</div><div>我是块级元素div</div><span>我是行内元素span</span><span>我是行内元素span</span><span>我是行内元素span</span><span>我是行内元素span</span></body>

七、浮动

目标：能够认识使用浮动的作用，了解浮动的特点
属性名：float

7.1 浮动的作用

早期的作用：图文环绕
现在的作用：网页布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右

浮动相关属性：
1.左浮动：float : left
2.右浮动：float : right
7.2 浮动的特点

浮动元素会脱离标准流（脱标），在标准流中不占位置
相当于从地面飘到了空中
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素会受到上面元素边界的影响
浮动元素有特殊的显示效果，如：一行可以显示多个、可以设置宽高

    * {margin: 0;padding: 0;}div {/* 左浮动 */float: left;/* 右浮动 *//* float: right; */width: 200px;height: 200px;}.red {/* 转换成行内块元素 *//* display: inline-block; */background-color: red;}.green {/* 右浮动 *//* float: right; *//* 左浮动 *//* float: left; */background-color: green;}.blue {/* width: 210px; *//* height: 210px; */background-color: blue;}span {float: left;width: 200px;height: 200px;background-color: lime;border: 1px solid gold;line-height: 200px;text-align: center;}

<body><!-- <div class="red"></div><div class="green"></div><div class="blue"></div> --><span>我是一个span标签</span><span>我是一个span标签</span><span>我是一个span标签</span>
</body>

7.3 清除浮动的方法

目标：能够认识清除浮动的目的，并能够给使用清除浮动的方法
目的：如果子元素设置了浮动，此时子元素不能撑开标准流的块级元素

方法一、直接设置父元素高度

  <style>.father {height: 400px;width: 400px;background-color: pink;}.son {float: left;width: 100px;height: 400px;background-color: blue;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>

方法二、额外标签法

  <style>.father {width: 400px;background-color: pink;}.son {float: left;width: 100px;height: 400px;background-color: blue;}.clear {clear: both;}</style>
</head>
<body><div class="father"><div class="son"></div><div class="clear"></div></div>
</body>

方法三、单伪元素清除法

4. 方法四、双伪元素清除法 ```css ``` 5. 给父元素设置overflow : hidden

    .father {width: 400px;background-color: pink;overflow: hidden;}.son {float: left;width: 100px;height: 400px;background-color: blue;}

八、伪元素

目标：能够使用伪元素在网页中创建内容
区别：
1.元素：HTML 设置的标签
2.伪元素：由 CSS 模拟出的标签效果
种类：
注意点：
1.必须设置content属性才能生效
2.伪元素默认是行内元素

    .father {width: 300px;height: 300px;background-color: skyblue;}.father::before {/* 必加的属性 */content: '我是一个伪元素';/* 转换显示方式 */display: block;width: 100px;height: 100px;background-color: orange;}

<body><div class="father">我是father内部的内容</div>
</body>

九、定位

目标：能够说出定位的常见应用场景，并且能够说出不同定位方式的特点
属性名：position
应用场景：

可以解决盒子与盒子之间的层叠问题
可以让盒子始终固定在屏幕中的某个位置

9.1 设置定位的方式

9.2 静态定位

介绍：静态定位是默认值，就是之前认识的标准流。
属性：position：static
使用步骤:
1、设置定位方式
核心代码

position: absolute;

设置偏移值
注意：
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般是就近原则（离哪边近用哪个）

9.3 相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动
属性：position：relative
特点：

需要配合方位属性实现移动
相对于自己原来位置进行移动
在页面中占位置 → 没有脱标

应用场景：

配合绝对定位组CP（子绝父相）
用于小范围的移动

  <style>* {margin: 0;padding: 0;}div {width: 300px;height: 300px;}.red {background-color: red;}.green {/* 1、定位方式-相对定位 */position: relative;/* 2、偏移值 */top: 100px;left: 100px;background-color: green;}.blue {background-color: blue;}</style>
</head>
<body><div class="red"></div><div class="green"></div><div class="blue"></div>
</body>

效果

9.4 绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
属性：position：absolute
特点：

需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置 → 已经脱标

应用场景：

配合绝对定位组CP（子绝父相）

注意：

祖先元素中没有定位时 → 默认相对于浏览器进行移动
祖先元素中有定位时 → 相对于最近的有定位的祖先元素进行移动

  <style>* {margin: 0;padding: 0;}div {width: 300px;height: 300px;}.red {background-color: red;}.green {/* 1、定位方式-绝对定位 */position: absolute;/* 2、偏移值 */top: 100px;left: 100px;background-color: green;}.blue {background-color: blue;}</style>
</head>
<body><div class="red"></div><div class="green"></div><div class="blue"></div>
</body>

更多推荐

CSS复习精选

本文发布于:2024-02-24 21:29:12，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1696714.html