盐析白兔

这个屌丝很懒，什么也没留下！

热门标签

2022最新html5+css3笔记_使用 html5 结构元素和无序列表布局页面,标题的背景颜色是 #e6071b 使用 css3 变

作者：盐析白兔 | 2024-02-16 13:38:36

踩

使用 html5 结构元素和无序列表布局页面,标题的背景颜色是 #e6071b 使用 css3 变

VsCode快捷键

70EFB4DA-22FB-445b-B99B-F6FB2253A930

3C87A147-48DD-4ccb-AAEF-73601DC34FC2

Chrome调试工具

Snipaste_2022-06-13_08-47-44

Snipaste_2022-06-13_08-48-36

思维导图

HTML5+css3

Html

渲染引擎

渲染引擎：浏览器中，专门用来对代码进行解析渲染的部分。

Can I use

Snipaste_2022-06-07_08-25-40

注意：渲染引擎不同，导致解析相同的代码，速度，效果也不同。

而且由于渲染引擎的不同，导致各个浏览器渲染相同的代码时会有差异。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：< P > 等同于 < p > 。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签Web标准，推荐开发者使用小写，来让浏览器解析统一。

构成	构成	语言
结构	结构	HTML（页面元素）
表现	表现	CSS（页面样式）
行为	行为	JavaScript（页面交互的动态效果）

Html的概念

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

Html页面标签之间的关系

标签之间的关系可以分为：父子关系(嵌套关系)，兄弟关系(并列关系)

常用标签

标题标签

场景：新闻和文章页面，都离不开标题，突出显示文章主题。
h系列：h1-h6

h$*6

<h1>a</p1>     
<h2>a</p2>
<h3>a</p3>
<h4>a</p4>
<h5>a</p5>
<h6>a</p6>
1
2
3
4
5
6
7
8

特点：文字都有加粗，文字都有变大。
独占一行

段落标签

p标签

<p>这是一段话</p>
1

特点：段落之间存在间隙，独占一行。

换行标签

< br >
1

块标签
特点：单标签，让文字强制换行

水平线

< hr>
1

特点：单标签，在页面中显示一条水平线

文本格式化标签

场景：需要让文字加粗，下划线，斜线，删除线等效果。

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除

标签	说明
strong	加粗
ins	下划线
em	倾斜
dei	删除

链接标签

场景：在需要创建链接的地方

代码：

  <a href="http://liyublogs.top/">休闲玩家MIck</a>
1

链接标签的target属性

属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中进行跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

图片标签

场景：在页面中显示图片
代码：

 <img src="图片路径" alt="替换文本" title="鼠标移上去显示的文字" width="18px" height="18px">
1

特点：单标签，img标签需要展示对应的效果，需要借助标签的属性进行设置。

属性：

属性	说明
src	指定需要展示图片的路径
alt	替换文本，当图片加载失败时，才显示的2文字
title	提示文本，当鼠标悬停时，才显示文字
width	图片的宽度
height	图片的高度

注意：

设置width和height中的任何一个，另一个会等比例缩放。

同时设置width和hieght,设置不当，图片会变形。

表格标签

场景：在网页中以行+列的单元格的方式整齐展示的数据，如：学生成绩表

基本标签：

标签名	说明
table	表格整体
tr	表格每行，用来包裹td
td	表格单元格，用于包裹内容
thead	表格的标题，文字会加粗(表格头部)
tbody	表格主体，用来存放表格内容（表格主体）
tfoot	表格底部

注意点：

标签的嵌套关系： table > thead/tbody > tr > td

Snipaste_2022-06-07_10-41-26

表格相关属性

场景：设置表格的基本展示效果

常见的相关属性：

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

实际开发中，针对样式效果推荐使用CSS设置

表格标题和表头单元格标签

场景：在表格中表示整体大标题和一列小标题

其他标签：

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表格单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点：

caption标签书写在table标签内部
th标签书写在tr标签内部，用来替换td标签

合并单元格

合并单元格步骤

明确合并哪几个单元格
通过左上原则，确定保留谁，删除谁
- 上下合并-只保留最上的，删除其他
- 左右合并-只保留最左的，删除其他
给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

属性名	属性值	说明
`rowspan`	合并单元格的个数	跨行合并，将多行的单元格垂直合并
`colsapn`	合并单元格的个数	跨列合并，将多列的单元格水平合并

注意点：

只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead,tbody,tfoot）

小案例（做一个小表格）

Snipaste_2022-06-07_10-53-11

参考代码：

<style>
    h1 {
      text-align: center;
    }
</style>

<body>
  <h1> 学生成绩单</h1>
  <div class="class">
    <table align="center" border="1" cellpadding="20" cellspacing="0">
      <thead>
        <tr>
          <th>性名</th>
          <th>成绩</th>
          <th>评语</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>小哥哥</td>
          <td rowspan="2">100</td>
          <td>小哥哥真帅气</td>
        </tr>
        <tr>
          <td>小姐姐</td>
          <!-- <td>100</td> -->
          <td>小哥哥真漂亮</td>
        </tr>
        <tr>
          <td>总结</td>
          <td colspan="2">郎才女貌</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

总结

Snipaste_2022-06-07_12-11-33

音视标签

音频标签

场景：在页面中插入音频

代码：

<audio src="../Martin Ermen - River Flows In You.mp3" controls loop></audio>
1

常见属性：

属性名	功能
src	音频路径
controls	显示播放控件
sutoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意点：

支持格式：Mp3,Wav,Ogg

视频标签

场景：在页面中加入视频

代码：

  <video src="../1.mp4" controls></video>
1

常见属性：

属性名	功能
src	视频路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

注意点：

视频标签目前支持三种格式：MP4,WebM,Ogg

列表标签

分类：有序列表，无序列表，自定义列表

无序列表

场景：在页面中表示一组无顺序之分的列表，如：新闻列表

标签组成：

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

显示特长：

列表的每一项前默认显示原点标识

注意点：

ul标签中，只允许包含li标签
l标签可以包含任意元素

有序列表

场景：在网页中表示一组有顺序之分的列表，如排行榜。
标签组成:

标签名	说明
ol	表示有序列表的整体，用于概括li标签
li	表示有序列表的每一项，用于包含每一行的内容

显示特点：

列表的每一行前默认显示序号标识。

注意：

ol标签只允许包含li标签
li标签可以包含任何内容

自定义列表

场景：在网页底部导航中通常会有自定义列表实现。

标签组成：

标签名	说明
ol	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表针对主题的每一项内容

显示特点：

dd前会默认显示缩放效果

注意点：

dl标签中中允许包含dt/dd标签
dt/dd标签可以包含任何内容

表单标签

input系列标签

场景：在网页·中显示收集用户信息的表单效果，如登陆页，注册页

标签名：input

input标签可以通过type属性值的不同，展示不同的效果

type的属性值：

标签名	type属性值	说明
input	text	文本框，用来输入单行文本
input	password	密码框，用于输入文本
input	`radio`	单选框，用于多选一
input	`checkbox`	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	`submit`	提交按钮，用于提交
input	reset	重置按钮
input	button	普通按钮，默认无功能，之后配合Js添加功能

input系列-文本框

场景：在输入框中显示输入单行文本的表单控件

属性名	说明
`placeholdre`	占位符，提示用户输入内容的文本

input系列-单选框

场景：网页中显示多选一的单选表单控件

type属性值：radio

常用属性：

属性名	说明
name	分组，有相同name属性的单选框为一组，一组中同时只能有一个被选中
checked	默认选中


<div>
      性别:
      <input type="radio" value="男" name="gender" id="nan" checked> <label for="nan">男</label>
      <input type="radio" value="女" name="gender" id="nv"> <label for="nv">女</label>

</div>
1
2
3
4
5
6
7

注意：

name属性对于单选框有分组功能
有相同的name属性值的单选框为一组，一组中只能同时有一个被选中

input系列-label标签

场景：常用于绑定内容于表单标签的关系

标签名：label

使用方法一：

使用label标签把内容，如（文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

使用方法二：

直接使用label标签把内容（如：文本）和表单标签一起包裹起来。
需要把label标签的for属性删除即可

<input type="radio" value="男" name="gender" id="nan" checked> 
<label for="nan">男</label>
<input type="radio" value="女" name="gender" id="nv"> 
<label for="nv">女</label>
1
2
3
4

注意：

在input标签中创建id属性，之后再给文本套一个lable标签，这个标签里面的for属性要和id属性的值相同.

input系列-文件选择

场景·：在网页中显示文件选择的表单控件

type属性值：file

常用属性：

属性名	说明
multiple	多文件选择

 <input type="file">选择文件
1

input系列-按钮

场景：在网页中显示不同功能按钮表单控件

type属性值：

标签名	type属性值	说明
input	submit	提交按钮，点击之后提交数据给后端服务器
input	reset	重置按钮，点击之后恢复表单默认值
input	button	普通按钮，默认无功能，之后配合js添加功能

    <div>
      <input type="submit" value="提交">
      <input type="reset" value="重置">
      <input type="button" value="普通按钮">
    </div>
1
2
3
4
5

注意：

如果要实现以上按钮的功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可

（拓展）value和name属性的作用

value属性：用户输入的内容，提交之后会发送给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接受到数据的格式是：name的属性值 = value的属性值

    昵称：<input type="text" value="帅哥">
1

后端：帅哥

    姓名：<input type="text" value="帅哥" name="nickname">
1

后端：nickname = 帅哥

textarea文本域标签

标签名：textarea

常见属性：

属性	说明
cols	规定了文本域可见宽度
rows	规定了文本域可见行数

 留言板：<textarea name="" style="resize:none" id="" cols="30" rows="10"></textarea>
1

注意：标签中的css属性是让文本框宽高不能改动，默认值是both,宽高都可以调整

语义化标签

没有语义的布局标签-div和span

div标签：一行显示一个（独占一行）
span标签：一行可以显示多个

注意：

div块标签，可以设置宽高

span是行内标签，他由内容撑开

有语义的布局标签（了解）

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

Snipaste_2022-06-07_15-46-20

以上标签显示特点和div一致，但是比idv多了不同的语义

字符实体

Html中会有空格合并的现象

Snipaste_2022-06-07_16-00-36

pc网页

CSS介绍

CSS: 层叠样式表（Cascading style sheets）

Css引用方式

内联式：单独将样式放到页面的 < style>< /style>中
外联式：内容和表现分离
行内式：权重最高

适用场景

映入方式	书写位置	作用范围	使用场景
内嵌式	css写在style标签中	当前页面	小案例
外联式	`css写在单独的css文件`，通过Link标签引入	多个页面	项目中
行内式	css写在标签的style属性中	当前标签（`权重最高`）	配合js使用

<!-- 内嵌式 -->
<style>
    div{
      width: 200px;
      height: 200px;
      background-color: red;  
    }
</style>

<!-- 外联式 内容与表现分离-->
<link rel="stylesheet" href="./外联式.css">
    
    
<!-- 行内样式 -->
<div style="width: 300px;height: 300px;background-color: yellow;"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

优先级：

行内 > 内嵌 > 外联

外联和内嵌：谁在后面，谁的优先级高

css解析的时候，后写的代码会覆盖前面的代码。

emm语法

Emmet语法总结

作用：快速开发

Snipaste_2022-06-08_09-32-12

  p>ul.myul>li#one
  <p>
  <ul class="myul">
    <li id="one">段落标签</li>
  </ul>
  </p>

  a.class
  <a href="" class="class"></a>

  li.name$*5
  <li class="name1"></li>
  <li class="name2"></li>
  <li class="name3"></li>
  <li class="name4"></li>
  <li class="name5"></li>

  li>a
  <li><a href=""></a></li>


  li>a+p*5
  <li>
    <a href=""></a>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </li>

  li#id+p.name
  <li id="id"></li>
  <p class="name"></p>

    ul>li*10{$$}
<ul>
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
</ul>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

注意：$可以设置自增

font-weight属性

可以改变文本字体粗细
属性值：方法一：关键字（norma(默认值),bold(粗体)）,方法二：相对粗细法（bolder,lighter），方法三：数字法

font的复合属性

取值：font:style weight size family
省略要求：只能省略前两个，如果省略了就等于设定为默认值。

	<style>
        h2 {
            font-family: '微软雅黑';
            font-size: 18px;
            /* 文子变细 */
            font-weight: 400;
            /* font-style: italic; */
        }
        
        p {
            /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
            font-family: 'Times New Roman', Times, serif;
        }
        
        em {
            /* 倾斜的字体不倾斜 */
            font-style: normal;
        }*
        
        .bold {
            /* font-weight: bold; */
            /* 700 后面不跟单位 等价bold 都是加粗 */
            font-weight: 700;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

文本缩进

属性名：text-indent
取值：数字+px，数字+（2）em

	<style>
        p {
            font-size: 24px;
            /* 文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
            text-indent: 2em;
            line-height: 25px;
        }
        
        div {
            line-height: 26px;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

设置字母间距

使用letter-spacing属性设置字母间距

属性名：letter-spacing
默认值：normal

.text {
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 50px 70px;
    background-color: rgba(124, 189, 174, 0.65);
    color: rgba(0, 0, 0, 0.85);
    text-align: center;
    letter-spacing: 6px;
1
2
3
4
5
6
7
8
9

文本水平对齐方式

属性名：text-align
取值：left左，center中，right右

注意：

如果想让子标签居中，那么你就需要给父标签使用。
text-align只针对文本和img属性有效

文本修饰

属性名：text-decoration
取值：underline(下划线)，line-through（删除线）

行高

属性名：line-height
取值：数字+px,倍数：当前标签font-size的倍数

注意：一般给容器设置行高用来保证该容器内的文字垂直居中。

基本选择器

标签选择器

语法：标签 { css }

  <style>
    p {
      color: red;
    }
  </style>
1
2
3
4
5

选择的是一类标签

类选择器

语法：.类名{ css }

    .myul {
      color: blue;
    }
1
2
3

注意：

所有的标签上都有class属性，
类名可以由数字，字母，下划线，中划线组成，但不能以数字和中划线开头
一个标签可以同时有多个类名，类名之间用空格隔开
类名可以重复，一个类选择器可以同时选择多个标签。

id选择器

语法：#id选择器{ css }

#ont {
      color: #000;
    }
1
2
3

注意：

所有的标签都有id属性
id属性类似身份证号码，在一个页面中是唯一的，不可重复的。

类和id的区别

class类名相当于姓名，可以重复。
id属性值相当于身份证号码，不可重复。

通配符选择器

语法： *{ css }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
1
2
3
4
5

复杂选择器

后代选择器:空格

语法：选择器1 选择器2 {css}

	<style>
        /* 我想要把ol里面的小li选出来改为pink */

        ol li {
            color: pink;
        }

        /* 中国 山东 济南 蓝翔 */
        ol li a {
            color: red;
        }

        .nav li a {
            color: yellow;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子代选择器: `>`

语法：选择器1>选择器2{css}
只选择子代

	<style>
        .nav>a {
            color: red;
        }
1
2
3
4

并集选择器: `,`

语法：选择器1，选择器2{css}

	<style>
        /* 要求1: 请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */

        /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }

        /* 约定的语法规范,我们并集选择器喜欢竖着写 */
        /* 一定要注意,最后一个选择器 不需要加逗号 */
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

交集选择器 : `.`

语法：选择器1.选择器2{css}
既又原则，找到页面中既能被选择器1选中，又可以被选择器2选中的标签，设置样式。

	<style>
        /* p {
            color: red;
        } */
        /* .box {
            color: red;
        } */
        /* 交集选择器 */
        
        p.box {
            color: red;
        }
        a.class{
           color:red;
 		}
    </style>

    <a href="" class="class"></a>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意：

交集选择器中的选择器之间是紧挨着的，没有东西分隔
交集选择器中如果有标签选择器，标签选择器必须写到最前面

伪类选择器：`:hover`

作用：选中鼠标悬停在元素中的状态，设置样式(修饰类)
语法：选择器:hover{css}

	<style>
        body {
            color: red;

        }

        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #369;
            text-decoration: underline;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

兄弟选择器：`+`

作用：选中相邻兄弟的选择器（后面第一个）
语法：E + F

div + p {
  color:blue;
}
1
2
3

选择匹配F的元素，且该元素为所匹配E元素后面相邻的位置。

后面兄弟选择器：`~`

作用：后面兄弟选择器
语法：E ~ F

div ~ p {
  color:blue;
}
1
2
3

选中后面的兄弟（一群）

焦点伪类选择器：`:focus`

作用：用于选中元素获取焦点状态时，常用于表单控件。
语法：

input:focus{
  color:red
}
1
2
3

外边线，外轮廓：outline:none;

表单控件获取焦点时，默认会显示外部轮廓线

属性选择器

场景：通过HTML属性来选择元素，常用来选择input标签
HTML属性：class = "one",其中 class是属性名，one是属性值
语法：

Snipaste_2022-06-13_11-54-05

^ ：以开头的

$：以结尾的

*=：中间包含的

背景相关属性

背景平铺

属性名：background-repeat(bgr)
no-repeat(不平铺),repeat-x(顺着x平铺),repeat-y(顺者y平铺)

	<style>
        div {
            width: 800px;
            height: 800px;
            background-color: rgb(26, 165, 165);
            margin: 0 auto;
            background-image: url(./back.jpg);
            background-repeat: repeat-x;
        }
    </style>
1
2
3
4
5
6
7
8
9
10

背景位置

属性名：background-position(bgp)
属性值:background-position:水平位置垂直
背景色和背景图只显示在盒子里，外面的不显示
水平方向：left,center,right
垂直方向：top,center,bottom
坐标系：原点(0,0)盒子左上角

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

	<style>
        div {
            width: 800px;
            height: 800px;
            background-color: rgb(26, 165, 165);
            margin: 0 auto;
            background-image: url(./back.jpg);
            background-repeat: no-repeat;
            /* background-position: center center; */
            background-position: center;
            /* 背景中的复合属性写法 */
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13

背景相关属性连写

属性名：background(bg)
书写顺序：background:color image repeat positior
背景图位置如果是英文单词可以跌倒顺序，如果都用像素就不可以跌倒顺序

	<style>
        div {
            width: 800px;
            height: 800px;
            /* background: pink url(./back.jpg) no-repeat center bottom; */
            /* 测试背景是数值 水平50px 垂直100px*/
            background: pink url(./back.jpg) no-repeat 100px 50px;
        }
    </style>
1
2
3
4
5
6
7
8
9

方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直。

背景图片的大小

作用：设置背景图片的大小
语法：background-size：宽度高度
取值：

取值	场景
数字+px	简单方便实用
百分比	相对于当前盒子自身的宽高比
contain	包含，将背景图片等比例缩放，知道不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

背景图片的位置

background-position：x y;
background-position: right 0;(适合精灵图左右对称的情况，后面双开门案例会用到)

	.box::after {
            background-position: right 0;
        }
1
2
3

background连写拓展

background: color url() repeat attachment position;                  颜色  地址 平铺效果 滚动 位置
1

注意点：

backgruond-size和background连写同时设置时，需要注意覆盖问题

解决：

要么单独的样式写连写的下面。
要么单独的样式写在连写的里面。

img和背景图片的区别

本质上：

img是html标签，占位,backgrand-img是css样式，不占位

作用效果上：

img是document对象可以操作（比如：从document对象中删除）,backgroud-imge是不能操作的

img标签点击会选中或放大图片，background-image则不会

加载渲染区别

背景图片会等到html结构加载完成后，才开始加载，img标签是网页结构的一部分，会在html结构加载的时候加载，在网页加载的过程中，背景图片会等到结构加载完成（网页的内容全部显示后）才开始加载，而img标签是网页（内容）的一部分，会在html结构加载的过程中加载，所以如果通过img标签引入一个大图片，那么可能会影响网页的加载，反而通过背景引入的图片，它会在最后进行加载，不会影响整个网页的加载。

背景模糊属性背景滤镜 backdrop-filter

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

属性名：backdrop-filter

   backdrop-filter: blur(6px);
  
1
2

元素的显示模式(<>)

块级

特点:独占一行
宽度默认是父元素宽度,高度默认由内容撑开
可以设置宽高
代表标签:div,p,h系列,ul.li,di,dt,dd,form,header

	<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
1
2
3
4
5
6
7

行内

特点:一行显示多个
宽度个高度默认由内容撑开
不可以设置宽高
代表标签:a,span,b,u,i,s,strong,ins.em,del...

	<style>
        span {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
1
2
3
4
5
6
7

行内块

特点:一行显示多个
可以设置宽高
代表标签:input,textarea,button,select.....

	<style>
        img {
            width: 100px;
            height: 100px;
        }
    </style>
1
2
3
4
5
6

转换

语法：display:block（块级）/display:inline-biock(行内块)/display:inline(行内)

html嵌套注意点

块级元素作为大容器，可以嵌套：文本，块级元素，行内块元素
a标签不能嵌套自己，其他标签都可以嵌套

Css特性

继承性

特性：文字控制属性都可以继承（子承父业）
注意：继承性特点就是（子有特性，就显示自己的特性，否则就继承父特性）

可以继承的常见属性

color
font-style,font-weight,font-size,font-family
text-indent,text-align
line-height
…

继承性失效的特殊情况

a标签的color会集成失败

其实color属性继承下来了，但是被浏览器默认的样式给覆盖掉了。

h系列的font-size会继承失败

其实font-size属性继承下来了，但是被浏览器默认的样式给覆盖掉了。

div高度不能继承，但是宽度有类似于继承的效果

宽度属性不能继承，但是div有独占一行的特点。

层叠性

给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效
给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上
当样式冲突时，只有当选择器优先级相同时,才能通过层叠性判断结果。

优先级

特性：不同选择器具有不同的优先级，优先级高的样式会覆盖优先级低的样式
公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意：

!important写在属性的后面，分号的前面！
它不能提高继承的优先级，只要是继承优先级最低！
实际开发中不建议使用!important(谁更精准选到标签，谁的优先级高，谁的范围越广，谁的优先级越低)

权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效。
权重叠加计算公式：（每一级不存在进位）
（0 行内样式个数，0 id选择器个数，0 类选择器个数，0 标签选择器个数 ）
比较规则：先比较第一级，比较出来统统不看，如果最终所有数字都相同，则比较层叠性（谁写在下面，谁说了算！）

Snipaste_2022-06-13_10-41-41

Snipaste_2022-06-13_10-43-37

盒子模型

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

Snipaste_2022-06-08_10-20-20

设置内容的宽高

宽：width
高：heigth

边框（border）-连写形式

属性名：border
属性值：单个取值的连写，取值之间用空格隔开
border 10px soild red;（不分先后顺序）
solid 实线，dashed虚线，dotted点线
单方向设置：属性名border-方位名词（中间不能有空格）left,right,top,bottom
边框消失：设置border-方位词：none / 或者 0px

快捷键：bd+Tab

内边距（padding）

内容到边框的距离
一个padding可以添加四个方向的内边距
padding属性可以当作符合属性使用，表示单独设置某个方向的内边距（给了四个值，顺序顺时针，上，右，下，左）
三个值：padding:10px 40px 80px (第一个值是左边的，第二个值是左右，第三个值是下)
两个值：padding:10px 80px(第一个值是上下，第二个值是左右）)

总结：多值写法，永远都是从上面顺时针转一圈，如果没有就看对面

css盒模型（自动内减）

场景：盒子的大小会因为padding和margin等一系列设置，导致不准确

手动内减：自己计算多余大小
自动内减：盒子设置box-sixing:border-box；即可

默认值：box-sixing:border-content

外边距（margin）

盒子以外，盒子与盒子之间的距离
设置方式和padding一样
位置在最外边

外边距折叠现象（1.合并现象）

场景：垂直布局的块级元素上下的margin会合并
结果：最终两者距离为margin的最大值
解决办法：避免就好
只给其中一个盒子设置Margin就可以

Snipaste_2022-06-08_11-39-24

	<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .one {
            margin-bottom: 60px;
        }
        
        .two {
            margin-top: 50px;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

外边距折叠现象（2.塌陷现象）

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

给父元素设置border-top或者padding-top
给夫元素设置overflow:hidden
转换成行内块元素
设置浮动

Snipaste_2022-06-08_11-45-25

 .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 设计稿没有border就不能用 */
            /* border: 1px solid #000; */
            /* 最完美方法 */
            /* overflow: hidden; */ 
        }

    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: 70px;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

推荐方法：

给父元素设置overflow:hidden
给父元素设置padding-top

行内元素的垂直内外边距

注意：

如果想要通过margin或者padding改变行内标签的垂直位置，无法生效
行内标签的margin-top和bottom不生效(不占位置)
行内标签的padding-top和bottom不生效

Snipaste_2022-06-08_11-55-36

注意：行内元素的padding不占位置。

   .fhre span {
      background-color: skyblue;
      border: 1px solid red;
      /* 有效 */
      padding-left: 30px;
      /* 无效 */
      padding-top: 40px;
      /* 无效 */
      margin-top: 30px;
      /* 有效 */
      margin-left: 40px;

    }
1
2
3
4
5
6
7
8
9
10
11
12
13

清除默认的内外边距

通配符 {margin:0; padding:0}

* {
	margin:0;
	padding:0;
}
1
2
3
4

版心居中

版心：网页的有效内容

块元素水平居中

margin:0 auto;
1

去掉列表的小点点

list-style:none
1

继承性的应用，可以给ul添加此属性，这样所有的li就不用单独设置了。

结构伪类选择器

目标：能够使用结构伪类选择器在html中定位
作用与优势：
1. 作用：根据在html中的结构关系查找元素
2. 优势：减少html中类的依赖（保持洁净）
选择器：
- li:first - child（选中第一个）
- li:last - child（选中最后一个）
- li:nth - child(x)（任意一个）
- li:nth - last - child(x) (倒数第xx个)
li:not(:nth - child(1)) (除了第一个孩子，选出其他)

 /* 选中第一个 */
        /* li:first-child {
            background-color: green;
        } */
        /* 选中最后一个 */
        
        li:last-child {
            background-color: pink;
        }
        /* 任意一个 */
        
        li:nth-child(4) {
            background-color: blue;
        }
        /* 倒数第xx个 */
        
        li:nth-last-child(1) {
            background-color: red;
        }
        /* 去除列表前的小点点 */
        ul {
            list-style: none;
        }
       //loader下的非第一个div(其他三个div,楼梯) less语法
       &:not(:nth-child(1)) {
           
       }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

结构伪类公式

n的注意点

n为：0，1，2，3…

通过n可以组成常见公式

功能	公式
偶数	2n,even
奇数	2n+1，2n-1,odd
找到前5个	-n+5
找到从第5个往后	n+5

li:nth-child(2n+1) {
            background-color: pink;
            color: rgb(110, 13, 155);
        }
        
        li:nth-child(-n+3) {
            background-color: rgb(52, 23, 179);
            color: rgb(155, 13, 13);
        }
        
        li:nth-child(4n) {
            background-color: rgb(201, 204, 16);
            color: rgb(8, 1, 1);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

伪元素

伪元素：一般页面中的非主体内容可以使用伪元素（装饰性的）

区别：

元素：html设置的标签
伪元素：由css模拟出的标签效果

伪元素	作用
`::before`	在父元素前添加伪元素
`::after`	在父元素后添加伪元素

注意：

必须设置content才能生效
伪元素默认是行内元素
伪元素是标签，可以设置颜色，背景等。。。

标准流

标准流又称文档流，是浏览器在渲染显示网页内容是默认采用的一套排版规则，规定了应该以何种方式排列元素。

常见的标准流排版规则

块级元素：从上往下，垂直布局，独占一行。
行内元素：从左往右，水平布局，空间不够自行折行。

浮动

作用：网页布局。
场景：可以让块级元素横排。
属性：

属性名	效果
left	左浮动
right	右浮动

<style>
        img {
            width: 100px;
            float: left;
        }
        
        div {
            width: 100px;
            height: 100px;
        }
        
        .one {
            background-color: pink;
            float: right;
        }
        
        .two {
            background-color: skyblue;
            /* float: right; */
            float: right;
        }
        /* 完美的在一行排 */
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

特点

浮动元素脱离标准流，在标准流中国不占位置
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素由特殊的显示效果
浮动元素会受到上面元素边界的影响。

一行可以显示多个
可以设置宽高
居中和margin:0 auto,text-align:center无效

<style>
        /*浮动： 一行可以显示多个,可以设置宽高，具备行内块的特点 */
        
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            margin-top: 50px;
        }
        
        .two {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
            /* 因为浮动，不能生效，无法居中 */
            margin: 0 auto;
        }
        
        .three {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

css书写顺序：浏览器执行效率更高

放浮动或者display
盒子模型相关的属性：margin,border,padding
文字样式

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .top {
            height: 40px;
            background-color: #333;
        }
        
        .header {
            margin: 0 auto;
            width: 1220px;
            height: 100px;
            background-color: #ffc0cb;
            
        }
        
        .content {
            margin: 0 auto;
            width: 1220px;
            height: 460px;
            background-color: rgb(38, 173, 173);
            
        }
        
        .content .left {
            float: left;
            width: 234px;
            height: 460px; 
            background-color: #ffa500;
        }
        
        .content .right {
            float: right;
            width: 986px;
            height: 460px;
            background-color: #87cdeb;
        }
    </style>
    
    
    <body>
    <div class="top"></div>
    <div class="header">头部</div>
    <div class="content">
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

清除浮动

含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素。
案例：父子级标签，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置
规避：父级加标签

	<style>
        .top {
            margin: 0 auto;
            width: 1000px;
            height: 300px;(注意父级加高)
            background-color: pink;
        }
        
        .bottom {
            height: 100px;
            background-color: green;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

清除浮动的方法

父级加高（规避）

额外标注法：(特点：缺点：会在页面中添加额外的标签，会让html结构变复杂)

在父级元素内容最后添加一个块级元素
给添加的元素设置clear:both

额外标注法

	<style>
        .top {
            margin: 0 auto;
            width: 1000px;
            height: 300px;
            background-color: pink;
        }
        
        .bottom {
            height: 100px;
            background-color: green;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        
        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        
        .clearfix {
        	<!--清除左右两侧浮动影响-->
            clear: both;
        }
    </style>
    
    
    
    <body>
    <!-- 父子级标签，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body> 
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

单伪元素清除法

用伪元素替代了额外标签

基本写法

	 .clearfix::before {
            content: '';
            /* 伪元素添加的是行内的，我们需要的是块级的 */
            display: block;
            clear: both;
        }
1
2
3
4
5
6

补充写法

	 .clearfix::before {
            content: '';
            /* 伪元素添加的是行内的，我们需要的是块级的 */
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
1
2
3
4
5
6
7
8

双伪元素清除法

	 /* 清除浮动 */
        /* .clearfix::before 用来解决外边距塌陷 */
        
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }
        /* 真正清除浮动的标签 */
        
        .clearfix::after {
            clear: both;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

给父元素设置overflow:hidden

给父元素直接设置overflow:hidden

	.top {
            margin: 0 auto;
            width: 1000px;
            height: 300px;
            background-color: pink;
            overflow: hidden;
        }
1
2
3
4
5
6
7

学成在线项目

css文件需要引用

<link rel="stylesheet" href="./css/index.css">
1

定位

效果

可以让元素自由的钉在网站的任何位置上。
可以始终让盒子固定在页面中的某个位置

应用场景
当出现盒子模型相互层叠时，就需要使用定位。
属性名：position（只加position位置不会改变）
如果left和right都有,以left为准,top和bottmo都有，以top为准
常见属性值：

定位方式	属性值
静态位置	static(就是标准流)
相对位置	relative
绝对定位	absolute
固定定位	fixed

设置偏移值

偏移值分为水平和垂直方向
选取原则一般是就近原则(离哪边近用哪个)

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

Snipaste_2022-06-08_17-16-27

相对定位

介绍：相对于自己之前的位置进行移动
代码：position:relative:
特点：
1.需要配合方位属性实现移动
2.相对于自己原来的位置进行移动
3.在页面中占位置-没有脱标
应用场景
1.配合绝对定位组CP()
2.用于小范围移动

绝对定位（绝对定位的盒子具备行内块的特点）

使用场景：当元素出现层叠的情况
绝对定位: 先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位;有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位
实现（子绝父相）：
父：添加定位属性：相对定位
子：子添加定位属性：绝对定位

	<style>
        /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
        
        .box {
            /* 绝对定位: 
                先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位;
                有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位
            */
            position: absolute;
            /* left: 50px; */
            left: 0;
            top: 0;
            /* 
            1. 脱标, 不占位
            2. 改变标签的显示模式特点: 具体行内块特点(在一行共存, 宽高生效)
            */
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    
    
    
    
    <style>
        .father {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        
        .son {
            /*  相对, 绝对 */
            /* 父级相对定位; 子级绝对定位 -- 子绝父相 */(广义的父级)
            /* position: relative; */
            /* position: absolute; */
            /* right: 100px; */
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        
        .sun {
            position: absolute;
            /* left: 20px;
            top: 30px; */
            right: 20px;
            bottom: 50px;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        /* 绝对定位查找父级的方式: 就近找定位的父级, 如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位 */
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

子绝父相水平居中案例

子绝父相
先让子盒子往右移动自己的一半
- left: 50%
再让盒子往左移动自己的一半
- 普通做法：margin-left:负的盒子宽度的一半
  
  缺点：滋贺子宽度变化后需要重新更改代码
- 优化做法：transform:translateX( -50%)
  
  优点：表示沿着x轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化后不需要更改代码。

Snipaste_2022-06-08_17-42-07

  <style>
    .box {
      position: absolute;
      width: 300px;
      height: 500px;
      background-color: pink;
    }

    .son {
      position: relative;
      width: 80px;
      height: 40px;
      top: 50%;
      background-color: red;
      /* 使用的是第二种方式 */
      transform: translateY(-50%);
    }

  </style>

<body style="height: 3000px;">
  <div class="box">
    <div class="son"></div>
  </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动
代码：position:fixed
特点:
1.需要配合方位属性实现移动
2.相对于浏览器可视区域进行移动
3.在场景中不占位置->已经脱标
应用场景：
1.让盒子固定在屏幕中的位置。

Snipaste_2022-06-08_17-34-40

	<style>
        .box {
            /* 脱标，不占位置，具备行内块特点 */
            /* 改变位置参考浏览器窗口 */
            width: 50px;
      		height: 50px;
      		background-color: skyblue;
      		position: fixed;
      		top: 50px;
      		right: 50px;
        }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12

元素的层级关系

不同布局方式元素层级关系：标准流<浮动<定位
不同定位之间的层级关系：相对，绝对，固定默认层级相同。
此时HTML中写在下面的元素层级更高，会覆盖上面的元素。

	<style>
        div {
            width: 200px;
            height: 200px;
        }
        
        .one {
            position: absolute;
            background-color: pink;
            /* 在第1层 */
            z-index: 1;
            left: 20px;
            top: 50px;
        }
        
        .two {
            position: absolute;
            left: 50px;
            top: 100px;
            background-color: skyblue;
        }
        /* 如果是默认情况下，后来者居上 */
        /* z-index：整数，数值越大，显示行数越靠上，默认值是0，配和定位才能生效 */
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

定位总结：

定位会脱标，层级是最高的。

标准流 < 浮动 < 定位

可以使用z-index调整元素层级。

351675A3-55A4-49d6-BBF0-7323A850BAE9

css布局方式

浮动，标准流，定位

装饰

文字对齐问题

场景：解决行内(行内块)元素垂直对齐问题
问题：当图片和文字在一行中显示时，其实底部是不对齐的
属性名：vertical-align
属性值：

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

注意：浏览器遇到行内和行内块标签当作文字处理，默认文字是按照基线对齐的。

	.son img {
            width: 300px;
            /* 浏览器吧行内和行内块标签当作文字处理，默认基线对齐 */
            /* vertical-align: middle; */
            display: block
            /*(两种解决办法都可以)*/
        }	
1
2
3
4
5
6
7

光标类型

场景：设置鼠标光标在元素上显示的样式
属性名：cursor
常见属性值：
| 属性值 |效果|
|:-----
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/93819

2022最新html5+css3笔记_使用 html5 结构元素和无序列表布局页面,标题的背景颜色是 #e6071b 使用 css3 变

VsCode快捷键

Chrome调试工具

思维导图

Html

渲染引擎

HTML 提示：使用小写标签

Html的概念

Html页面标签之间的关系

常用标签

标题标签

段落标签

换行标签

水平线

文本格式化标签

链接标签

链接标签的target属性

图片标签

表格标签

表格相关属性

表格标题和表头单元格标签

合并单元格

小案例（做一个小表格）

总结

音视标签

音频标签

视频标签

列表标签

无序列表

有序列表

自定义列表

表单标签

input系列标签

input系列-文本框

input系列-单选框

input系列-label标签

input系列-文件选择

input系列-按钮

（拓展）value和name属性的作用

textarea文本域标签

语义化标签

没有语义的布局标签-div和span

有语义的布局标签（了解）

字符实体

pc网页

CSS介绍

Css引用方式

适用场景

emm语法

font-weight属性

font的复合属性

文本缩进

设置字母间距

文本水平对齐方式

文本修饰

行高

基本选择器

标签选择器

类选择器

id选择器

类和id的区别

通配符选择器

复杂选择器

后代选择器:空格

子代选择器: >

并集选择器: ,

交集选择器 : .

伪类选择器：:hover

兄弟选择器：+

后面兄弟选择器：~

焦点伪类选择器：:focus

属性选择器

背景相关属性

背景平铺

背景位置

背景相关属性连写

背景图片的大小

背景图片的位置

background连写拓展

img和背景图片的区别

子代选择器: `>`

并集选择器: `,`

交集选择器 : `.`

伪类选择器：`:hover`

兄弟选择器：`+`

后面兄弟选择器：`~`

焦点伪类选择器：`:focus`