HTML+CSS学习知识整理-常温故知新_html css学习资料-CSDN博客

一、HTML基础认知

1.1 Web标准的构成

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式(如:颜色、大小等)
行为	JavaScript	网页模型的定义与页面交互

1.2 HTML的概念

HTML(Hyper Text Markup Language)中文译为:超文本标记语言。
➢ 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。

1.3 HTML页面固定结构

HTML骨架结构由哪些标签组成?
• html标签:网页的整体
• head标签:网页的头部
• body标签:网页的身体
• title标签:网页的标题

<!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>此处为网页标题</title>
</head>
<body>

</body>
</html>

1.4 语法规范

1.4.1 HTML的注释

注释的作用:
• 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
• 浏览器执行代码时会忽略所有的注释
➢ 注释的快捷键:
• 在VS Code中:ctrl + /

1.4.2 HTML标签的构成

标签的结构图:
在这里插入图片描述

➢ 结构说明:

标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名。
常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容 3. 少数标签由一部分组成，我们称之为:单标签。自成一体，无法包裹内容。

1.4.3 HTML标签的属性

➢ 标签的完整结构图:
在这里插入图片描述 ➢ 属性注意点:

标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分

1.4.4 HTML标签的关系

➢ 父子关系(嵌套关系)
➢ 兄弟关系(并列关系)

二、HTML标签学习

2.1 排版标签

标签名称	代码	特点	备注
标题标签	h1～h6	1.文字都有加粗 2. 独占一行	新闻标题和网络logo常用h1
段落标签	p	1.段落之间存在间隙 2.独占一行
换行标签	br	单标签让文字强制换行
水平线标签	hr	单标签在页面中显示一条水平线

2.2 文本格式化标签

需要让文字加粗、下划线、倾斜、删除线等效果，突出重要性的强调语境。在这里插入图片描述
注意：strong、ins、em、del，表示的强调语义更强烈!

2.3 媒体标签

2.3.1 图片标签

语法：

<img src="图片路径" alt="替换文本" title="提示文本" />

图片路径（绝对路径和相对路径）
替换文本（图片加载失败，显示alt的文本，否则不显示）
提示文本（当鼠标悬停时，显示的文本）

注意：src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。

2.3.2 路径

➢ 绝对路径:
指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。
➢ 相对路径(常用)：
从当前文件开始出发找目标文件的过程。

相对路径分类:
• 同级和下级目录:./ 之后选择即可
• 上级目录:…/ 之后选择即可

2.3.3 音频标签

<audio src="音频的路径" controls></audio>

音频标签常见属性：
• src:音频路径
• controls:音频控件
• autoplay:自动播放
• loop:循环播放

注意：音频标签目前支持三种格式:MP3、Wav、Ogg

2.3.4 视频标签

<video src="视频的路径" controls></video>

视频标签常见属性：
• src:视频路径
• controls:视频控件
• autoplay:自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放
• loop:循环播放

注意：视频标签目前支持三种格式:MP4 、WebM 、Ogg

2.3 链接标签

<a href="./目标网页.html">超链接</a>

特点:
• 双标签，内部可以包裹内容
• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

链接标签显示特点:
• a标签默认文字有下划线
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色(清除浏览器历史记录可恢复蓝色)

链接标签target属性：（控制跳转方式）
• 取值1:_self:在当前窗口中跳转
• 取值2:_blank:在新窗口中跳转

空链接(拓展补充) ➢ 代码:

<a href="#">这是链接跳转内容</a>

➢ 功能:
• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置，用空链接占个位置

2.4 列表标签

目标: 能够使用无序列表、有序列表、自定义列表标签，实现网页中列表结构的搭建。
特点: 按照行的方式，整齐显示内容。

2.4.1 无序列表

ul标签:表示无序列表的整体 (只允许嵌套li标签)
li标签:表示无序列表的每一项(可以嵌套任意内容)

语法：

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

type属性取值：

属性值	列表项符号
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

2.4.1 有序列表

ol标签:表示有序列表的整体 (只允许嵌套li标签)
li标签:表示有序列表的每一项(可以嵌套任意内容)

语法：

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

type属性取值：

属性值	列表项符号
1	阿拉伯数字：1、2、3……
a	小写英文字母：a、b、c……
A	大写英文字母：A、B、C……
i	小写罗马数字：i、ii、iii……
I	大写罗马数字：I、II、III……

2.4.1 自定义列表

dl标签:表示自定义列表的整体（只允许嵌套dt/dd标签）
dt标签:表示自定义列表的主题（可以嵌套任意内容）
dd标签:表示对于主题的每一项内容（可以嵌套任意内容）

语法：

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

2.5 表格标签

目标:
能够使用 表格相关标签和属性，实现网页中表格结构的搭建

2.5.1 表格的基本标签

标签的嵌套关系:table > tr > td
（1）表格：table标签（可用于包裹多个tr）
（2）行：tr标签（可用于包裹td）
（3）单元格：td标签（可用于包裹内容）

2.5.2 表格相关属性

属性：
表格边框：border属性
表格宽度：width属性
表格高度：height属性

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

• （表格大标题）caption标签书写在table标签内部
• （表头单元格）th标签书写在tr标签内部(用于替换td标签)

示例：

    <table border="1">
        <caption>学生信息</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>630</td>
        </tr>
    </table>

2.5.4 表格的结构标签(了解)

让表格的内容结构分组，突出表格的不同部分(头部、主体、底部)，使语义更加清晰。

结构标签:
thead：表格头部
tbody：表格主题
tfoot：表格底部

注意：表格结构标签内部用于包裹tr标签且表格的结构标签可以省略。

2.5.5 合并单元格

合并单元格，通过左上原则，确定保留谁删除谁。
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他

跨行合并(rowspan)或者跨列合并(colspan)属性值均为数字，表示合并单元格的个数。

<!-- rowspan 跨行合并，将多行的单元格垂直合并 -->
<td rowspan = "跨越的行数"></td>

<!-- colspan 跨列合并，将多列的单元格水平合并 -->
<td colspan = "跨越的列数"></td>

只有同一个结构标签中的单元格才能合并，不能跨结构标签合并(不能跨:thead、tbody、tfoot)

2.5.6 表格标签-总结

(1) 表格基本标签：

table > tr > td

(2) 表格标题和表头单元格标签

table > caption + tr > th

(3) 表格结构标签

table > thead > tr > td

(4) 表格相关属性
在这里插入图片描述
(5) 合并单元格

跨行合并(rowspan)
跨列合并(colspan)

边框合并（拓展）
场景:让相邻表格边框进行合并，得到细线边框效果
代码:border-collapse:collapse;
在这里插入图片描述

2.6 表单标签

2.6.1 input系列标签

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

语法：

<input type="表单类型" />

input标签可以通过type属性值的不同，展示不同效果。
在这里插入图片描述

text 常用属性：
placeholder属性（占位符。提示用户输入内容的文本）
text 其他属性：
value属性（用户输入的内容，提交之后会发送给后端服务器）
name属性（当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义）

password密码框同文本框

** radio（单选框）语法：**

<input type="radio" name="组名" value="取值" />

 <!-- 示例写法 -->
<form method="post">
        性别:
        <input type="radio" name="gender" value="男" checked />男
        <input type="radio" name="gender" value="女" />女
 </form>

** radio常用属性：**
name属性（分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中）
checked（默认选中）

checkbox复选框同单选框

file文件选择常用属性
multiple（多文件选择）

2.6.2 button按钮标签

type属性值(同input的按钮系列) 在这里插入图片描述
（1）提交按钮一般都是用来给服务器提交数据的。
（2）重置按钮一般用来清除用户在表单中输入的内容。
（3）普通按钮一般情况下都是配合JavaScript来进行各种操作的。

2.6.3 select下拉菜单标签

语法：

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

select标签常用属性

属性	说明
multiple	设置下拉列表可以选择多项
size	设置下拉列表显示几个列表项，取值为整数

selected（下拉菜单的默认选中）

2.6.4 textarea文本域标签

语法：

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

常见属性:
• cols:规定了文本域内可见宽度
• rows:规定了文本域内可见行数

2.6.5 label标签

场景: 常用于绑定内容与表单标签的关系
使用方法1:

使用label标签把内容(如:文本)包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
使用方法2:
直接使用label标签把内容(如:文本)和表单标签一起包裹起来
需要把label标签的for属性删除即可

2.6.6 form标签属性

语法：

<form>
    //各种表单标签
</form>

form标签常用属性

属性	说明
name	表单名称
method	提交方式 post/get 常用post
action	提交地址
target	用来指定窗口的打开方式。常用_blank
enctype	编码方式

2.7 语义化标签

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

• div:独占一行（块级标签）
• span:一行中可以显示多（行内标签）

2.7.2 有语义的布局标签

• header:网页头部
• nav:网页导航
• footer:网页底部
• aside:网页侧边栏
• section:网页区块
• article:网页文章

2.8 字符实体

常见字符实体：
在这里插入图片描述

三、CSS基础认知

3.1 CSS引入方式

➢ 内嵌式（CSS 写在style标签中）
• 提示:style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
➢ 外联式（CSS 写在一个单独的.css文件中）
• 提示:需要通过link标签在网页中引入

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

➢ 行内式（CSS 写在标签的style属性中）
• 提示：会配合js使用

3.2 CSS基础选择器

3.2.1 标签选择器

结构：

标签名 { css属性名:属性值; }

3.2.2 类选择器

结构：

.类名 { css属性名:属性值; }

注意点:

所有标签上都有class属性，class属性的属性值称为类名(类似于名字)
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

3.2.3 ID选择器

结构：

#id属性值 { css属性名:属性值; }

注意点:

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

3.2.4 通配符选择器

结构：

* { css属性名:属性值; }

**作用:**找到页面中所有的标签，设置样式。

3.3 字体和文本样式

3.3.1 字体样式

字体大小:font-size （谷歌默认文字大小是16px ；取值：数字+px）
字体粗细:font-weight （取值方式：关键字/纯数字。关键字：normal正常/bold加粗；纯数字：400正常/700加粗）
字体样式:font-style （normal正常/italic斜体）
字体类型:font-family
字体类型:font属性连写

3.3.2 文本样式

1）文本缩进:text-indent
取值:
• 数字+px
• 数字+em(推荐:1em = 当前标签的font-size的大小)

2）文本水平对齐方式:text-align
取值：left/center/right

如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素) 设置

3）文本修饰:text-decoration
取值：

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线（常用）

开发中会使用 text-decoration : none ; 清除a标签默认的下划线

3.3.3 line-height行高

作用：控制一行的上下行间距。
取值：
• 数字+px
• 倍数(当前标签font-size的倍数)

应用:

让单行文本垂直居中可以设置 line-height : 文字父元素高度；
网页精准布局时，会设置 line-height : 1 可以取消上下间距

➢ 行高与font连写的注意点:
• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family ;

3.3.4 拓展颜色常见取值

属性名:
• 如:文字颜色:color
• 如:背景颜色:background-color

属性值：
在这里插入图片描述

3.4 选择器进阶

3.4.1 复合选择器

➢ 后代选择器：空格
语法结构：选择器1 选择器2 { css }

后代包括：儿子、孙子、重孙子……

➢ 子代选择器：>
语法结构：选择器1 > 选择器2 { css }

子代只包括儿子

3.4.2 并集选择器：,

同时选择多组标签，设置相同的样式。用英文逗号隔开。

3.4.3 交集选择器：紧挨着

选中页面中 同时满足 多个选择器的标签。
语法结构：

选择器1选择器2 { css }

3.4.4 hover伪类选择器

作用: 选中鼠标悬停在元素上的状态，设置样式。
结构语法：

选择器:hover { css }

3.5 背景相关属性

3.5.1 背景颜色

属性名:
background-color(bgc)
属性值:
• 颜色取值:关键字、rgb表示法、rgba表示法、十六进制…

3.5.2 背景图片

属性名:
background-image(bgi)
属性值:

background-image: url(‘图片的路径’);

注意：
• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
•背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3.5.3 背景平铺

属性名:
background- repeat(bgr)
属性值:
在这里插入图片描述

3.5.4 背景位置

属性名:
background- position(bgp)
属性值:
在这里插入图片描述

注意点:
• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

3.5.5 背景相关属性连写

属性名:
background(bg)
属性值:
单个属性值的合写，取值之间以空格隔开
书写顺序:
推荐：background:color image repeat position

3.6 元素显示模式

3.6.1 块级元素

➢ 显示特点:

独占一行(一行只能显示一个)
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高

➢ 代表标签:
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…

3.6.2 行内元素

➢ 显示特点:

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

➢ 代表标签:
a、span 、b、u、i、s、strong、ins、em、del…

3.6.3 行内块元素

➢ 显示特点:

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

➢ 代表标签:
• input、textarea、button、select…
• 特殊情况:img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

3.6.4 元素显示模式转换

目的： 改变元素默认的显示特点，让元素符合布局要求。
语法:
在这里插入图片描述

3.6.5 拓展

块级元素一般作为大容器，可以嵌套:文本、块级元素、行内元素、行内块元素等等…
➢ 但是:p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
➢ 但是:a标签不能嵌套a标签
居中方法总结

3.7 CSS特性

3.7.1 继承性（子承父业）

可以继承的常见属性(文字控制属性都可以继承)

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

应用：
➢ 好处:可以在一定程度上减少代码
➢ 常见应用场景:

可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

a标签的color会继承失效
h系列标签的font-size会继承失效

3.7.2 层叠性

➢ 特性:

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

3.7.3 优先级

➢ 特性:不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

➢ 优先级公式:
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

➢ 注意点:

!important写在属性值的后面，分号的前面!
!important不能提升继承的优先级，只要是继承优先级最低!
实际开发中不建议使用 !important 。

重点——权重叠加计算
➢ 场景:如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式:(每一级之间不存在进位)

➢ 比较规则:

先比较第一级数字，如果比较出来了，之后的统统不看
如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
…
如果最终所有数字都相同，表示优先级相同，则比较层叠性(谁写在下面，谁说了算!)
➢ 注意点:
!important如果不是继承，则权重最高，天下第一!

四、CSS布局

4.1 盒子模型

CSS 中规定每个盒子由以下内容构成:

内容区域(content)
内边距区域(padding)
边框区域(border)
外边距区域(margin)

内容区域主要是利用width和height属性默认设置为盒子的大小。

4.1.1 边框（border）

作用在边框上的，如边框粗细、样式、颜色效果。
边框粗细：border-width
边框样式：border-style（实线solid、虚线dashed、点线dotted）
边框颜色：border-color

可连写（取值之间以空格隔开）：

border: 1px solid #000;

如果只想做用在单边上，可加上方位名词，属性名为：border-方位名词。
上top、下bottom、左left、右right

注意：
1）border、padding会撑大盒子。
2）手动计算内减（不便）
3）自动内减：给盒子样式加box-sizing: border-box;边框宽度不计入盒子。

4.1.2 内边距(padding)

作用：设置边框与内容区域之间的距离。
常见取值：
在这里插入图片描述

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

单方向设置
属性名： padding - 方位名词

4.1.3 外边距(margin)

作用： 设置边框以外，盒子与盒子之间的距离。
常见取值：
在这里插入图片描述

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

margin单方向设置的应用
在这里插入图片描述

清除默认内外边距：
* { margin: 0; padding: 0; }

外边距折叠现象 – 1 合并现象
➢ 场景:垂直布局 的 块级元素，上下的margin会合并
➢ 结果:最终两者距离为margin的最大值
➢ 解决方法:避免就好
• 只给其中一个盒子设置margin

外边距折叠现象 – 2 塌陷现象
➢ 场景:互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果:导致父元素一起往下移动
➢ 解决方法:

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

注意：
➢ 场景:给行内元素设置margin和padding时
➢ 结果:
1）水平方向的margin和padding布局中有效!
2）垂直方向的margin和padding布局中无效!

4.2 浮动

4.2.1 结构伪类选择器

目标:
能够使用结构伪类选择器在HTML中定位元素。

作用与优势:

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

选择器
在这里插入图片描述
nth-of-type结构伪类选择器
➢ 选择器:

➢ 区别:
• :nth-child → 直接在所有孩子 中数个数
• :nth-of-type → 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数

4.2.2 伪元素

目标：能够使用伪元素在网页中创建内容。
区别：

元素:HTML 设置的标签
伪元素:由 CSS 模拟出的标签效果

种类：
在这里插入图片描述

注意：
1）必须设置content属性才能生效
2）伪元素默认是行内元素

示例：

<!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>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .father::before {
            /* 内容 */
            /* content属性必须添加, 否则伪元素不生效 */
            content: '';
            color: green;
            width: 100px;
            height: 100px;
            background-color: blue;

            /* 默认是行内元素, 宽高不生效 */
            display: block;
        }

        .father::after {
            content: '大米';
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->

    <!-- 找父级, 在这个父级里面创建子级标签 -->

    <div class="father">爱</div>

    <!-- 老鼠爱大米 -->
</body>
</html>

4.2.3 标准流

标准流==文档流

常见标准流排版规则:

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

4.2.4 浮动

属性名：float
属性值：
left （左浮动）
right （右浮动）

重点：
浮动元素会脱离标准流（脱标），在标准流中不占位置。
浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
浮动元素有特殊的显示效果。如：一行可以显示多个；可以设置宽高

注意点：
浮动的元素不能通过text-align:center或者margin:0 auto居中

4.2.5 清除浮动

方法：
1 直接设置父元素高度
2 额外标签法
示例：

<!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>Document</title>
    <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>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

3 单伪元素清除法
示例：

<!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>Document</title>
    <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::after {
            content: '';

            /* 伪元素添加的标签是行内, 要求块 */
            display: block;
            clear: both;

            /* 为了兼容性 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过css 添加标签 -->
    </div>
    <div class="bottom"></div>
</body>
</html>

4 双伪元素清除法

<!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>Document</title>
    <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::before 作用: 解决外边距塌陷问题
            外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置
        */
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        /* 真正清除浮动的标签 */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

5 给父元素设置overflow : hidden

4.3 定位

4.3.1 定位常见应用场景

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

4.3.2 使用定位的步骤

1）设置定位方式
属性名：position
常见属性值：
在这里插入图片描述
2）设置偏移值:水平+垂直就近各取一个

4.3.3 静态定位（默认值：标准流）

代码：position:static;
注意：静态定位不能通过方位属性进行移动哦。

4.3.4 相对定位（相对于自己之前的位置进行移动）

代码：position:relative;

特点:

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

应用场景:

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

4.3.5 绝对定位（相对于非静态定位的父元素进行定位移动，父元素不仅限于上一层，只要是祖先元素即可）

代码：position:absolute;
特点:

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

应用场景:

配合绝对定位组CP(子绝父相)

绝对定位规则：

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

子绝父相水平垂直都居中-解决方法

子绝父相
让子盒子往右走大盒子一半
• left:50%
让子盒子往下走大盒子一半
• top:50%
让子盒子往左+往上走自己的一半
• transform:translate(-50%，-50%);

4.3.6 固定定位（相对于浏览器进行定位移动）

代码：position:fixed;
特点:

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

应用场景：让盒子固定在屏幕中的某个位置

4.3.7 元素层级问题

➢ 不同布局方式元素的层级关系:
• 标准流 < 浮动 < 定位
➢ 不同定位之间的层级关系:
• 相对、绝对、固定默认层级相同
• 此时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>Document</title>
    <style>
        div {
            
            width: 200px;
            height: 200px;
        }

        .one {
            position: absolute;
            left: 20px;
            top: 50px;

            z-index: 1;

            background-color: pink;
        }

        .two {
            position: absolute;
            left: 50px;
            top: 100px;
            
            background-color: skyblue;
        }

        /* 
            默认情况下, 定位的盒子  后来者居上 ,
            z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0
            注意: z-index必须配合定位才生效
        */
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

4.4 装饰

4.4.1 垂直对齐方式

➢ 场景:解决行内/行内块元素垂直对齐问题
➢ 问题:当图片和文字在一行中显示时，其实底部不是对齐的
属性名：vertical-align
属性值：
在这里插入图片描述
项目中 vertical-align 可以解决的问题

文本框和表单按钮无法对齐问题
input和img无法对齐问题
div中的文本框，文本框无法贴顶问题
div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
使用line-height让img标签垂直居中问题

不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
推荐优先使用浮动完成效果

4.4.2 光标类型

场景:设置鼠标光标在元素上时显示的样式
属性名:cursor
常见属性值:
在这里插入图片描述

4.4.3 边框圆角

边框圆角（属性名：border-radius）
常见取值：数字+px、百分比
赋值规则： 从左上角顺时针赋值，没有赋值的看对角！（一个值：表示4个角是相同的）
border-radius：50%(代表是个圆）

4.4.4 overflow溢出部分显示效果

属性名：overflow
属性值：
visible （默认值，溢出部分可见）
hidden（溢出部分隐藏）
scroll（无论是否溢出，都显示滚动条
auto（根据是否溢出，自动显示或隐藏滚动条

4.4.5 元素本身隐藏

➢ 场景:让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏
➢ 常见属性:

visibility:hidden
display:none
➢ 区别:
visibility:hidden 隐藏元素本身，并且在网页中占位置
display:none 隐藏元素本身，并且在网页中不占位置
➢ 注意点:
• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display:none;(隐藏)、 display:block;(显示)

4.5 选择器拓展

目标: 能够使用 伪类选择器 选择元素的不同状态。

4.5.1 链接伪类选择器

场景:常用于选中超链接的不同状态
选择器语法：
在这里插入图片描述

a:hover { 
    font-size: 14pt; 
    text-decoration: underline; 
    color: blue; 
}
 
a:hover span{ 
    color:red; 
}

4.5.2 焦点伪类选择器

场景:用于选中元素获取焦点时状态，常用于表单控件
选择器语法：
在这里插入图片描述
效果：
表单控件获取焦点时默认会显示外部轮廓线

4.5.3 属性选择器

场景:通过元素上的HTML属性来选择元素，常用于选择 input 标签。
选择器语法:
在这里插入图片描述
E表示选择器
attr表示属性名
val表示属性取值

4.6 项目样式补充

**目标:**能够 使用精灵图，能够给元素 添加阴影效果 ，能够让元素完成 过渡效果。

4.6.1 精灵图

**优点：**减少服务器发送次数，减轻服务器的压力，提高页面加载速度

使用精灵图的步骤是什么?

创建一个盒子
设置盒子大小为小图片大小
设置精灵图为盒子的背景图片
将小图片左上角坐标 取负值，设置给盒子的background-position:x y。

4.6.2 背景图片大小

作用:设置背景图片的大小，
语法:background-size:宽度高度;
取值：
在这里插入图片描述

background连写拓展

Ø 完整连写:
在这里插入图片描述
Ø 注意点:
• background-size和background连写同时设置时，需要注意覆盖问题
Ø 解决:

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

4.6.3 文字阴影

作用:给文字添加阴影效果，吸引用户注意。
属性名:text-shadow
取值：
在这里插入图片描述

拓展：阴影可以叠加设置，每组阴影取值之间以逗号隔开

4.6.4 盒子阴影

作用:给盒子添加阴影效果，吸引用户注意，体现页面的制作细节。
属性名:box-shadow
取值：
在这里插入图片描述

4.6.5 过渡

作用: 让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验。
属性名:transition
常见取值:
在这里插入图片描述
过渡属性给需要过渡的元素 本身加。

注意点:

过渡需要:默认状态和 hover状态样式不同，才能有过渡效果
transition属性给需要过渡的元素本身
transition属性设置在不同状态中，效果不同的
1）给默认状态设置，鼠标移入移出都有过渡效果
2）给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

4.6.6 骨架结构标签

DOCTYPE文档说明
<!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本，为HTML5。
注意点:DOCTYPE需要写在页面的第一行，不属于HTML标签

网页语言
<html lang="en">识网页使用的语言。
作用：搜索引擎归类 + 浏览器翻译
常见语言:zh-CN 简体中文 / en 英文

字符编码(了解)
<meta charset="UTF-8">识网页使用的字符编码。
作用:保存和打开的字符编码需要统一设置，否则可能会出现乱码。

4.6.7 SEO简介

Ø SEO(Search Engine Optimization):搜索引擎优化
Ø 作用:让网站在搜索引擎上的排名靠前
Ø 提升SEO的常见方法:

竞价排名
将网页制作成html后缀
标签语义化(在合适的地方使用合适的标签)
…

SEO三大标签

title:网页标题标签
description:网页描述标签
keywords:网页关键词标签

4.6.8 ico图标设置

场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标。
在这里插入图片描述
常见代码：

<link rel="stylesheet" href="ico图标路径" type="image/x-icon">

4.6.9 版心

场景: 把页面的主体内容约束在网页中间。
作用: 让不同大小的屏幕都能看到页面的主体内容。
在这里插入图片描述

注意：版心类名常用:container、wrapper、w 等。

4.6.10 CSS书写顺序

不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯。
在这里插入图片描述

注意⚠️：开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器 的个数推荐 不要超过 3 个。

在这里插入图片描述

HTML+CSS学习知识整理-常温故知新

一、HTML基础认知

1.1 Web标准的构成

1.2 HTML的概念

1.3 HTML页面固定结构

1.4 语法规范

1.4.1 HTML的注释

1.4.2 HTML标签的构成

1.4.3 HTML标签的属性

1.4.4 HTML标签的关系

二、HTML标签学习

2.1 排版标签

2.2 文本格式化标签

2.3 媒体标签

2.3.1 图片标签

2.3.2 路径

2.3.3 音频标签

2.3.4 视频标签

2.3 链接标签

2.4 列表标签

2.4.1 无序列表

2.4.1 有序列表

2.4.1 自定义列表

2.5 表格标签

2.5.1 表格的基本标签

2.5.2 表格相关属性

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

2.5.4 表格的结构标签(了解)

2.5.5 合并单元格

2.5.6 表格标签-总结

2.6 表单标签

2.6.1 input系列标签

2.6.2 button按钮标签

2.6.3 select下拉菜单标签

2.6.4 textarea文本域标签

2.6.5 label标签

2.6.6 form标签属性

2.7 语义化标签

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

2.7.2 有语义的布局标签

2.8 字符实体

三、CSS基础认知

3.1 CSS引入方式

3.2 CSS基础选择器

3.2.1 标签选择器

3.2.2 类选择器

3.2.3 ID选择器

3.2.4 通配符选择器

3.3 字体和文本样式

3.3.1 字体样式

3.3.2 文本样式

3.3.3 line-height行高

3.3.4 拓展 颜色常见取值

3.4 选择器进阶

3.4.1 复合选择器

3.4.2 并集选择器：,

3.4.3 交集选择器：紧挨着

3.4.4 hover伪类选择器

3.5 背景相关属性

3.5.1 背景颜色

3.5.2 背景图片

3.5.3 背景平铺

3.5.4 背景位置

3.5.5 背景相关属性连写

3.6 元素显示模式

3.6.1 块级元素

3.6.2 行内元素

3.6.3 行内块元素

3.6.4 元素显示模式转换

3.6.5 拓展

3.7 CSS特性

3.7.1 继承性（子承父业）

3.7.2 层叠性

3.7.3 优先级

四、CSS布局

4.1 盒子模型

4.1.1 边框（border）

4.1.2 内边距(padding)

4.1.3 外边距(margin)

4.2 浮动

3.3.4 拓展颜色常见取值