HTML+CSS基础【快速上手】

一、HTML展示

1、HTML基础结构

2、认识元素属性

（1）元素属性理解

（2）实例

3、自结束标签和注释

（1）自结束标签

（2）注释

4、语义化标签

（1）语义化理解

（2）使用语义化的优点

二、HTML核心标签

1、超链接【a】标签和路径

（1）a标签用法

# 跳转

# 锚点

（2）a标签属性

# title 属性

# target 属性

（3）a标签相关路径

# 相对路径

# 绝对路径

2、图像【img】标签

（1）含义

（2）基本语法

（3）常用属性

# src 属性

# alt 属性

# title 属性

（4）图片来源

（5）点击图片跳转

3、表格【table】标签

（1）表格的基本结构

（2）HTML中表格的表示

（3）table标签基本语法

（4）table标签常用属性

4、列表【ul、ol】标签

（1）无序列表

# 含义

# 基本语法

# 相关属性

# 快捷键操作

（2）有序列表

# 含义

# 基本语法

# 相关属性

# 快捷键操作

（3）自定义列表

# 含义

# 基本语法

5、表单【form】标签

（1）表单作用

（2）表单语法

# 语法格式

# 表单属性

@ action属性

@ method属性

@ target属性

（3）表单控件

# 作用

# 语法

# 属性

# 控件基本类型

@ 输入框

@ 密码框

@ 按钮类

6、区块标签和行内标签

（1）div元素

# 基本语法

# 理解

（2）span元素

# 基本语法

# 理解

（3）块级元素

# 含义

# 常用块级元素

（4）行内元素

# 含义

# 常用行内元素

7、实例

（1）需求案例

（2）实现

三、CSS基本规则

1、CSS基本规则

（1）CSS含义

（2）CSS作用

（3）CSS基础语法

# 选择器

# {}

2、CSS写法

（1）行内样式

# 含义

# 基本语法

# 优缺点

（2）内部样式

# 含义

# 基本语法

# 优缺点

（3）外部样式

# 含义

# 基本语法

# 优缺点

3、常见选择器

（1）元素/标签选择器

# 含义

# 语法格式

# 弊端

（2）类选择器

# 含义

# 语法格式

（3）id选择器

# 含义

# 语法格式

（4）通配符选择器

# 含义

# 基本语法

# 作用

# 弊端

（5）派生选择器

# 后代选择器

# 子代选择器

# 兄弟选择器

4、特殊选择器

（1）伪类选择器

# 匹配元素内部第一个子元素

# 匹配元素内部最后一个子元素

# 匹配元素内部第n个子元素

# 匹配元素内部奇数项

# 匹配元素内部偶数项

# 否定伪类

# 动态伪类

（2）伪元素选择器

# 设置第一个文本样式

# 设置第一行文本样式

# 设置选中文本样式

# 在开始位置设置文本样式

# 在结束位置设置文本样式

5、盒子模型

（1）盒子模型理解

# 盒子的内容(content)

# 盒子的内边距(padding)

# 盒子的边框(border)

# 盒子的外边距(margin)

（2）盒子怪异模型

# W3C标准的盒子模型（标准盒模型 )

# IE标准的盒子模型（怪异盒模型）

（3）外边距折叠

# margin-top的解析(父子关系)

# margin的上下间距重叠问题(兄弟关系)

# margin的左右间距不重叠问题(兄弟关系)

6、CSS常用属性

（1）文本相关属性

# 字体大小

# 文本颜色

# 文本字体

# 文本加粗

# 文本倾斜

# 文本水平对齐

# 文本行间距（行高）

# 复合属性

# 文本修饰线

# 首行缩进

# 间距

（2）背景相关属性

# 背景颜色

# 背景图片

# 背景平铺

# 背景图片的位置

# 调整背景图片尺寸大小

# 背景图片的滚动和固定

# 背景的复合属性

# 精灵图

（3）列表相关属性

# 列表项类型

# 列表项图片

# 列表项位置

# 列表项复合属性

（4）边框属性

# 四个方向边框属性

@ 边框复合属性

@ 边框单一属性-粗细

@ 边框单一属性-样式

@ 边框单一属性-颜色

# 单一方向边框属性

@ 上边框

@ 右边框

@ 下边框

@ 左边框

（5）浮动属性

# 属性

# 属性取值

# 浮动特点

# 清除浮动

7、CSS的层叠与选择器优先级

（1）CSS语法对比

（2）权重

（3）CSS层叠性

8、常见可继承属性

（1）继承的理解

（2）默认设置继承的属性

9、实例

（1）判断文字颜色

（2）根据要求实现对应盒子效果

四、CSS布局定位

1、布局前置知识

（1）正常元素布局

# 块级元素

# 行内元素

（2）元素间相互影响

2、【float】布局

（1）使用

（2）特点

（3）清除浮动

# 原因-高度塌陷

# 操作

3、【flex】布局

（1）flex布局定义

# 触发弹性盒子的方式

# 触发弹性盒子的特点

# 弹性盒子概念

（2）父元素容器的属性

（3）子元素容器的属性

4、【position】定位

（1）定位理解

（2）定位种类

（3）定位属性

（4）定位配合

（5）定位分类

# 静态定位

# 相对定位

# 绝对定位

# 固定定位

# 粘性定位

（6）定位使用场景

5、三栏布局

（1）float实现

（2）position实现

（3）flex实现

6、水平垂直居中布局

（1）行内块元素

（2）块级元素

7、BFC

（1）定义

（2）特点

（3）开启

（4）作用

五、CSS3常用属性

1、CSS3边框

（1）圆角

# 属性分类

# 复合属性

# 单角属性

# 用法

# 应用

（2）盒阴影

# 属性

# 属性取值

2、CSS3渐变

（1）线性渐变

# to 方向词

# to 方向词1 方向词2

# 不跟方向词参数

# 沿着一个度数/角度进行渐变

# 线性渐变重复

（2）径向渐变

# 示例

# 径向渐变重复

3、CSS3文本效果

（1）文本阴影

# 语法

# 示例

（2）文本溢出

# 单行文本溢出

# 多行文本溢出

（3）文本换行

# 长文本换行

# 单词拆分换行

4、CSS3网格布局【grid】

（1）理解

（2）应用场景

（3）操作

（4）示例

一、HTML展示

1、HTML基础结构

（1）基础结构

也称之为基础骨架，任何东西都会有对应的一个基础结构，基础结构是构成网页最基础最简单的代码。

（2）查看基础结构

浏览器中右键->检查，基础代码如下：

其中，meta标签的理解：

自结束标签，可以提供该网页相关信息、元数据
charset="utf-8"：中文的网页需要用到的声明编码，否则会出现乱码
name="keywords" content="静夜思,诗词"：提供网页的关键字，关键字用【,】隔开
name="Description"：描述网页的信息

空格使用

&nbsp;

注意：HTML基础模板可以使用快捷键，即【!】

2、认识元素属性

（1）元素属性理解

放在开始标签上
总是以名值对的形式出现的，值是通过双引号或者单引号包裹
在元素中添加附加信息，方便我们找到它
设置标签的内容展示

（2）实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素的属性</title><style>.front {color: aqua;}</style>
</head><body><!-- 链接的地址在 href 属性中指定 --><a href="https://www.baidu.com/">百度一下</a><p class="front">前端</p><p>后端</p><p>测试</p>
</body></html>

3、自结束标签和注释

（1）自结束标签

目前常用的自结束标签有：

<meta>
<link>
<hr>
<img>
<input>

（2）注释

注释的内容要简介明了，在实际工作中，当代码复杂程度大时，便于解释说明代码含义
注释一般为两种：对代码的解释、暂时用不到的代码片段
注释不能嵌套，否则网页中会渲染出错

注释的快捷键：Ctrl+/

4、语义化标签

（1）语义化理解

每个HTML元素都有其具体的含义：

网页标题：title
网页内容标题：h1~h6
段落：p
强调：strong
头部元素：header
导航元素：nav
主要内容：main

（2）使用语义化的优点

代码结构：在页面没有css的情况下，也能够呈现出很好的内容结构
有利于SEO：标签确定关键字的权重，因此可以增加搜索相关权重，使网站在搜索结果中排名靠前

二、HTML核心标签

1、超链接【a】标签和路径

（1）a标签用法

# 跳转

<a href="路径">链接文本</a>

# 锚点

<a href="#路径">链接文本</a>

（2）a标签属性

# title 属性

表示鼠标悬停上去之后的提示信息

<a  href=“路径”  title=“鼠标悬停上去之后的提示信息”>内容</a>

# target 属性

规定在何处打开文档

属性值1：target=“_self” —>在当前窗口打开，默认值
属性值2：target=“_blank” —>在新窗口打开

<a href="http://www.baidu.com" target="_self">跳转到百度</a>
<a href="10_标签7.html" target="_blank">图片</a>
<a href="#">返回顶部</a>

（3）a标签相关路径

图片路径分为两种：相对路径、绝对路径

# 相对路径

相对路径：相对于文件和文件夹的关系去查找图片

同级目录：当前图片和页面文件在同一目录中
下级目录：图片所在的文件夹和页面文件在同一目录中
上级目录：页面文件所在的文件夹和图片在同一目录中

./ 代表当前⽬录

../ 代表的上⼀级⽬录

# 绝对路径

绝对路径：一个完整的地址，从某一个盘符或者是从互联网地址开始

2、图像【img】标签

（1）含义

让页面中显示一张图片

（2）基本语法

<img src=“图片路径”>

（3）常用属性

# src 属性

调用图片的路径

<img src=“图片路径”>

# alt 属性

当图片为破损文件/网速加载失败时，图片加载失败显示的提示文本

<img src=“图片路径” alt=“图片不显示之后的提示信息">

# title 属性

只要鼠标放在图片位置区域时提示的文本

<img src=“图片路径”  title=“鼠标悬停上去之后的提示信息”>

alt属性和title属性的区别（面试题）：

相同点：都是提示文本

不同点：

（1）alt属性只有浏览器加载不成功的时候才显示，且文本能选中，占有位置

（2）title属性是鼠标放在上面的时候的提示文本，不占位置

（4）图片来源

本地图片：稳定
线上图片：图⽚容易丢失

Base64图片的优缺点：

优点：小图片占用内存小，不请求服务器，降低服务器资源与访问
缺点：大图片增⼤了数据库服务器的压力

（5）点击图片跳转

可以通过嵌套a标签来实现

例如：
<a href="https://www.baidu.com/"><img src="../img/baidu_logo.png" alt="logo图片加载失败" title="百度一下点击地址"></a>

3、表格【table】标签

（1）表格的基本结构

表格由一行或者多行的单元格数据组成，如下：

（2）HTML中表格的表示

表格对应在html下的理解：

table：HTML表格
tr：元素定义表格行
th：数据中的表头单元格
td：表示单元格

（3）table标签基本语法

<table border="1"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td>男</td><td>18</td></tr><tr><td>李四</td><td>女</td><td>18</td></tr>
</table>

注意：若table标签不加属性，则默认无边框

（4）table标签常用属性

table标签的常用属性有：

border：边框
cellspacing：规定单元格之间的空白
cellpadding：规定单元格边沿与其内容之间的空白
colspan：用于合并列
rowspan：用于合并行

示例：写一个简单的表格，并应用table标签的一些常用属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格table标签</title>
</head>
<body><table border="1" cellspacing="5px" cellpadding="10px"><tr><th>姓名</th><th colspan="2">性别年龄</th><!-- <th>年龄</th> --></tr><tr><td>张三</td><td>男</td><td rowspan="2">18</td></tr><tr><td>李四</td><td>女</td><!-- <td>18</td> --></tr></table>
</body>
</html>

4、列表【ul、ol】标签

（1）无序列表

# 含义

没有顺序的列表清单

# 基本语法

<ul><li>文本</li><li>文本</li><li>文本</li>
</ul>

# 相关属性

type=“”，type的属性值有：disc、circle、square、none

type="列表项的显示内容"例如：
<!-- 列表前面是黑色实心方块 -->
<ul type="square">        <li>文本</li><li>文本</li><li>文本</li>
</ul>

disc：黑色实心圆
circle：空心圆
square：黑色实心方块
none：取消列表项

注意：实际开发的时候，以上的属性几乎不会使用，使用频率最多的是none，目的是取消列表项，其他对应的列表项，需要使用背景图片完成，方便调整位置

# 快捷键操作

可用快捷键：ul>li{文本}*3

（2）有序列表

# 含义

有顺序的列表清单

# 基本语法

<ol><li>文本</li><li>文本</li><li>文本</li>
</ol>

# 相关属性

type属性：用来修饰列表项

type="1/A/a/I/i"1：根据数字计数
A/a：根据（大写/小写）字母计数
I/i：根据罗马（大写/小写）数字来计数

start属性：用来修改列表项的起始位置

start="数值"数值表示从第“数值”个位置开始计数

例如：

<!-- 计数方式为“a、b、c、d...”  从第五个位置开始,即从e开始 -->
<ol type="a" start="5"><li>第一步骤</li><li>第二步骤</li><li>第二步骤</li>
</ol>

# 快捷键操作

可用快捷键：ol>li{文本}*3

（3）自定义列表

# 含义

主要应用于图文混排或者问答列表

# 基本语法

<dl><dt>图片/问题</dt><dd>文本/答案</dd>
</dl>

例如：

<dl><dt>问题：哪里发货</dt><dd>回答：北京发货</dd>
</dl>

5、表单【form】标签

（1）表单作用

作用：用来收集用户收入的所有的相关信息, 将输入的数据进行打包上传到服务器数据库里面

应用：搜索栏、注册登录页面等场景

（2）表单语法

# 语法格式

<form action="提交跳转地址" method="提交方法" target=”打开方式”>文本/其他表单控件（输入框、密码框、单选、多选等等）
</form>

# 表单属性

@ action属性

提交跳转地址，点击按钮的时候，配合form，能实现跳转

@ method属性

规定以什么方式去提交信息

method=“get”---------明文提交：用户名、密码等都能在地址栏中看到，安全性低
method=“post”-------密文提交：用户名、密码等都不能在地址栏中看到，安全性较高

@ target属性

点击按钮跳转后规定按什么方式打开窗口

target=“_self” -------------在当前窗口打开，默认值（常用）
target=“_blank” ----------在新窗口打开（常用）
target=“_top” -------------在顶部窗口打开
target=“_parent” ---------在父级框架打开

（3）表单控件

# 作用

实现表单中的输入框、密码框、下拉菜单、单选、多选等

# 语法

<input  type=”类型” value=”输入框中显示的值” placeholder="输入框中显示的值">

# 属性

type属性：用来描述各个控件的类型，即【控件基本类型】
value属性：在输入框中展示一个文本描述，起到提示文本的作用（占位置）
placeholder属性：在输入框中展示一个文本描述，起到提示文本的作用（不占位置），该属性比较常用

注意：

value属性给输入框一个文本描述，但该种情况下会占位置，因此不方便用户使用

H5中新增的属性“placeholder”用来提示文本信息，不需要删除原来的提示信息，相比较value属性而言起到了一个很好的提示作用

# 控件基本类型

序号	含义		语法书写	注意
1	输入框		<input type="text">	标签属性：type="类型" value="输入框中显示值"
2	密码框		<input type="password">
3	按钮类	提交按钮	<input type="submit" value="值">	value：修改按钮中的显示值
		重置按钮	<input type="reset" value="值">
		普通按钮	<input type="button" value="值">
		双标签button	<button>文本</button>

@ 输入框

输入框：也称为单行文本输入框，文本不会折行显示，能显示具体输入的信息

输入框：<input type="text" placeholder="请输入用户名">

@ 密码框

密码框：可以实现加密效果，不同的浏览器显示的加密效果有可能不同

密码框：<input type="password" placeholder="请输入密码">

@ 按钮类

提交按钮：配合form标签以及action实现提交跳转功能
重置按钮：配合form标签用来取消输入框前面输入的所有信息，把原来的信息清空掉
普通双标签按钮：配合form标签以及action属性能完成跳转

<!-- 提交按钮，默认按钮文本为提交 -->
<input type="submit">
<!-- 重置按钮，默认按钮文本为重置 -->
<input type="reset">
<!-- 普通按钮，无默认按钮文本，需要通过value属性去添加 -->
<input type="button" value="普通按钮">
<!-- 普通双标签按钮 -->
<button>普通按钮</button>

6、区块标签和行内标签

（1）div元素

# 基本语法

<div>文本</div>

# 理解

div 元素是块级元素，它可⽤于组合其他 HTML 元素的容器
div 元素没有特定的含义，除此之外，由于它属于块级元素，浏览器会在其前后显示折⾏
如果与 CSS ⼀同使⽤，div 元素可⽤于对大的内容块设置样式属性
div 元素的另⼀个常见⽤途是⽂档布局

（2）span元素

# 基本语法

<span>文本</span>

# 理解

span 元素是⾏内元素，可⽤作⽂本的容器
span 元素也没有特定的含义
当与 CSS ⼀同使⽤时，span 元素可⽤于为部分文本设置样式属性

（3）块级元素

# 含义

块级元素在浏览器显示时，通常会以新行来开始（和结束）

# 常用块级元素

<h1>, <p>, <ul>, <table>,<div>

（4）行内元素

# 含义

行内元素在显示时通常不会以新⾏开始

# 常用行内元素

<b>, <td>, <a>, <img>,<span>

7、实例

（1）需求案例

完成如下图所示的一个表格案例，图片可以随机选取，点击图片时跳转到【百度一下】页面

（2）实现

解析：我们可以使⽤table标签，加上边框 a标签作为img标签的⽗元素，在img标签加上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><table border="2"><tr><th>狮子</th><th>老虎</th></tr><tr><td><a href="https://www.baidu.com/"><img src="https://img0.baidu.com/it/u=711448043,3360793804&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750" alt="" title="狮子"></a></td><td><a href="https://www.baidu.com/"><img src="	https://img1.baidu.com/it/u=256035052,307915737&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=749" alt="" title="老虎"></a></td></tr></table>
</body>
</html>

三、CSS基本规则

1、CSS基本规则

（1）CSS含义

CSS（Cascading Style Sheet）层叠样式表

（2）CSS作用

对HTML页面结构的修饰

（3）CSS基础语法

选择器{属性：属性值；属性：属性值；属性：属性值}

# 选择器

查找页面元素的一种方式方法，方法有很多

# {}

样式规则，也称之为样式修饰，规定选择器查找到的元素实现何种样式

注意：CSS基本语法由两个部分组成，为选择器和样式规则，其中样式声明由属性和属性值组成

2、CSS写法

（1）行内样式

# 含义

把对应的CSS基本语法使用行内修饰的形式对页面的元素进行修饰

# 基本语法

<div style="属性:属性值;属性:属性值;"></div>

# 优缺点

优点：简单直观
缺点：代码冗余，使结构变得混乱

（2）内部样式

# 含义

把对应的CSS修饰语句放在一个独立的style标签中，style标签一般放在head标签里面

# 基本语法

<head><style>选择器{样式规则}</style>
</head>

# 优缺点

优点：降低了行内修饰的冗余，让页面的结构变得简洁，样式可重用
缺点：并没有做到完全的结构样式行为的分离，若代码量过大，来回滚动页面比较麻烦，且所有修饰都在head标签中，会造成读取加载缓慢、头重脚轻的效果

（3）外部样式

# 含义

把对应的CSS的基础语法放在一个独立的.css为后缀名的文件中，需要使用link标签进行关联

# 基本语法

外部引入样式有两种方法，第一种是通过link引入，第二种是导入

第一种：

<link href="CSS文件的路径" rel="stylesheet" type="text/css">

第二种：

<style>@import url(路径);
</style>

# 优缺点

优点：做到了充分的结构样式行为的分离

注意：

外部样式表通过link引入和通过@import导入二者之间的区别
1、语法不一样
（1）前者link属于标签语法-link单标签进行引入的
（2）后者@import属于CSS语法：必须携带style标签
2、加载顺序的问题
（1） link引入的文件，结构和样式是同时加载显示的
（2）@import引入的文件，先加载结构，后加载样式
3、使用dom(document object model文档对象模型 )控制样式时的差别
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的
4、兼容性问题
（1）link兼容性比较高
（2）@import兼容性比较低

3、常见选择器

（1）元素/标签选择器

# 含义

通过标签的名字查找页面的元素，只要叫这个标签名字都会被匹配到，实现对应的样式规则

# 语法格式

标签{属性:属性值;}

# 弊端

匹配的范围过于广泛

注意：标签选择器匹配的是页面中叫对应标签名字的元素，无论级别嵌套有多深，都能被匹配到

（2）类选择器

# 含义

通过给元素起一个小名（class），在CSS中通过这个小名查找元素

# 语法格式

//类选择器
<标签 class=“Class名字”></div>
.Class名字{属性:属性值;} //多类选择器
<标签 class=“Class名字1 Class名字2”></div>
.Class名字1{属性:属性值;} 
.Class名字2{属性:属性值;} //链接多个类选择器
<标签 class=“Class名字1 Class名字2”></div>
.Class名字1.Class名字1{属性:属性值;}

注意：.就是类的符号，不能被省略

（3）id选择器

# 含义

给元素起一个id名字，在CSS中通过id名字去查找页面中的元素

# 语法格式

<标签 id=“ID名字”></div>    #ID名字{ 属性：属性值；} #就是id的符号，不能被省略

注意：一个id选择器的属性值在html文档中只能出现一次，避免写js获取id时出现混淆

扩展-命名选择器规范

见名如意
使用小写字母开头，不能以数字开头，但是可以配合使用字母数字下划线
不能使用汉字

（4）通配符选择器

# 含义

能匹配页面中所有的元素

# 基本语法

语法：
*{属性：属性值;
}//常用场景
*{margin:0;padding:0
}

# 作用

用来取消页面中元素自带的内边距和外边距

# 弊端

不优化，使得一部分没有自带内边距和外边距的标签也取消了内边距和外边距

（5）派生选择器

# 后代选择器

除了能匹配符合条件的父元素之外，还能匹配符合条件的子元素，还能匹配符合条件的孙子辈分的元素

选择器1 选择器2{样式规则}

# 子代选择器

只能匹配符合条件的儿子辈分的元素

 选择器1>选择器2{样式规则}

# 兄弟选择器

匹配相邻的一个兄弟元素（向后匹配）

选择器1+选择器2{样式规则}

4、特殊选择器

（1）伪类选择器

不改变任何DOM内容，只是插入了一些修饰类的元素，具体的分类有：

# 匹配元素内部第一个子元素

选择器:first-child{}

# 匹配元素内部最后一个子元素

选择器:last-child{}

# 匹配元素内部第n个子元素

选择器:nth-child(n){}

# 匹配元素内部奇数项

选择器:nth-child(2n+1){}

# 匹配元素内部偶数项

选择器:nth-child(2n){}

注意：

【选择器:nth-child(参数){}】，参数写法分为三种：数字、倍数、字母

数字：数值为几，则代表第几个元素（超出范围则无法匹配）
倍数：如2n、2n-1/2n+1、3n、4n、5n等
字母：odd----奇数；even—偶数

# 否定伪类

可以定位不匹配该选择器的元素

选择器:not(){}/*示例*/
li:not(:nth-child(3)) {color: pink;
}

# 动态伪类

序号	基本语法	含义	特殊解释
1	a:link{color:red;}	未访问的链接状态，必须给a	说明： 1）当这4个超链接伪类选择器联合使用时，应注意他们的顺序，正常顺序为：a a:link a:visited a:hover a:active 2）伪类简化代码，可以把伪类选择器中相同的声明提出来放在a选择器中
2	a:visited{color:green;}	已访问的链接状态，必须给a
3	a:hover{color:blue;}	鼠标滑过的链接状态，可以随便给
4	a:active{color:yellow;}	鼠标摁下去时的状态，必须给a
例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标滑过时会变化颜色

应用：主要应用在超链接a标签上面，四个使用的时候必须按照顺序进行书写；实际情况下，会把hover单独拿出来使用，设置鼠标悬停的时候改变元素的样式

/*示例*/
<style>.green {width: 200px;height: 200px;background-color: green;}.purple{width: 100px;height: 100px;background-color: purple;}/* 当鼠标悬停在绿色盒子上面的时候，改变绿色盒子的背景颜色 *//* .green:hover{background-color: orange;} *//* 当鼠标悬停在绿色盒子上面的时候，改变的是里面子元素的背景元素 *//* .green:hover>.purple{background-color: blue;} *//* 当鼠标移入到紫色盒子的时候，改变的是自己本身的背景颜色 */.green>.purple:hover{background-color: aqua;}
</style><body><div class="green"><div class="purple"></div></div>
</body>

（2）伪元素选择器

# 设置第一个文本样式

::first-letter{}

# 设置第一行文本样式

::first-line{}

# 设置选中文本样式

::selection{}

# 在开始位置设置文本样式

::before{}

# 在结束位置设置文本样式

::after{}

5、盒子模型

（1）盒子模型理解

任何一个元素都可以称之为盒子, 盒子就是容器，在CSS⾥⾯，所有的HTML元素都可以看成是⼀个盒⼦

盒子模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系；盒子模型由四个部分组成，分别是content（内容区域）、padding（内边距）、border（边框）、margin（外边距），如图所示：

# 盒子的内容(content)

内容区域指的是元素盛放文本或者是其他元素的区域，可以理解成宽度高度，可设置宽高的元素:div、p、ul、ol、dl、dt、dd、h1-h6等

注意：行内元素不能实现宽度高度

# 盒子的内边距(padding)

序号	属性	描述	说明
1	padding-top	上内边距（单一）	设置元素上边框与内容之间的距离
2	padding-right	右内边距（单一）	设置元素右边框与内容之间的距离
3	padding-bottom	下内边距（单一）	设置元素下边框与内容之间的距离
4	padding-left	左内边距（单一）	设置元素左边框与内容之间的距离
5	padding	设置元素边框与内容之间的距离（复合）	padding取值:v1-v4; 代表的是不同的方向

padding属性的属性取值：

padding:v1;---------------实现了四个方向的内边距，v1上右下左
padding:v1 v2;------------实现了四个方向的内边距，v1上下，v2左右
padding:v1 v2 v3;---------实现了四个方向的内边距，v1上，v2左右，v3下
padding:v1 v2 v3 v4;------实现了四个方向的内边距，v1上，v2右，v3下，v4左规律：当padding取值为四个值时，可以记忆为上右下左

注意事项：

盒子变大了，即内边距会撑开盒子大小，占位置
背景颜色会蔓延到内边距区域，同背景颜色能蔓延到边框位置道理一致

注意：

padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值

# 盒子的边框(border)

边框属性在第六章【CSS常用属性】进行介绍，这里不做多描述

border-left:3px solid #000  //左边距10px dotted dashed
border-top:3px solid #000	//上边距10px
border-right:3px solid #000	//右边距10px
border-bottom:3px solid #000	//下边距10px，相对于父级元素的widthborder:3px solid #000 //等同于上面四行

# 盒子的外边距(margin)

margin代表的是外边距，外边距是边框与边框，元素与元素之间的距离

序号	属性	描述	说明
1	margin-top	上外边距（单一）	设置元素上边框外边距的距离
2	margin-right	右外边距（单一）	设置元素右边框外边距的距离
3	margin-bottom	下外边距（单一）	设置元素下边框外边距的距离
4	margin-left	左外边距（单一）	设置元素左边框外边距的距离
5	margin	设置元素边框与内容之间的距离（复合）	margin取值:v1-v4; 代表的是不同的方向

margin属性的属性取值：

margin:v1;---------------实现了四个方向的外边距，v1上右下左
margin:v1 v2;------------实现了四个方向的外边距，v1上下，v2左右
margin:v1 v2 v3;---------实现了四个方向的外边距，v1上，v2左右，v3下
margin:v1 v2 v3 v4;------实现了四个方向的外边距，v1上，v2右，v3下，v4左规律：当margin取值为四个值时，可以记忆为上右下左

注意事项：

背景颜色不会蔓延到外边距区域中
盒子模型添加外边距时，会撑开盒子占位

说明：

【margin:0 auto;】，可以实现一个有宽度的块元素盒子水平居中

（2）盒子怪异模型

# W3C标准的盒子模型（标准盒模型 )

属性：box-sizing

属性值：content-box

标准盒子模型计算大小：

实际宽度=width+2×padding+2×border+2×margin (左右)
实际高度=height+2×padding+2×border+2×margin (上下)

# IE标准的盒子模型（怪异盒模型）

这里即css中设置的盒子宽高即为最真实的盒子宽高，设置了多少就是多少；若设置了内外边距、边框，则内容会进行相应扣减

属性：box-sizing

属性值：border-box

怪异盒子模型计算大小：

实际宽度=CSS.width(内容+padding)+2×margin (左右)
实际高度=CSS.height(内容+padding)+2×margin (上下)

备注：怪异盒子即为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制；通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

（3）外边距折叠

# margin-top的解析(父子关系)

现象：

默认情况下在包含结构里面，给子元素添加了margin-top之后，父元素会跟着一起下来

解决办法1：

给最近的父元素添加透明上边框【border-top:1px solid transparent;】，使得外边距实现边框与边框之间的距离，从而对于父元素移动
给父元素或者是子元素添加浮动【float: left; 】，只要添加浮动就会触发BFC机制，会形成一个独立的区域，这个区域不会受外界干扰，也不会干扰到外界
给父元素添加【overflow:hidden;】，也会形成一个BFC区域
给父元素添加定位【position:absolute/fixed;】，也会形成一个BFC区域

解决方法2：

不给子元素添加margin-top，直接给父元素添加对应的padding-top;且需要给父元素的高度降低对应的padding取值（因为padding会撑大盒子）

# margin的上下间距重叠问题(兄弟关系)

现象：

2个上下并列结构的时候，如果给上面的盒子添加了margin-bottom，同时给下面的盒子添加了margin-top，此时应该解析的垂直间距是2者之和，但是浏览器解析的时候，会按照最大数值去解析

解决方法：

给下面的盒子添加父元素且添加声明【overflow:hidden;】，会形成一个BFC区域
只给一个元素添加外边距即可

# margin的左右间距不重叠问题(兄弟关系)

现象：

2个左右排列的盒子，给左侧盒子添加margin-right，给右侧盒子添加margin-left，两个盒子之间的距离不会出现间距重合

原因：

因为浮动会触发BFC（块级格式化上文）

6、CSS常用属性

（1）文本相关属性

序号	属性	描述	说明
1	font-size	字体大小	单位可以使px pt em等，12pt=16px 1em=16px 浏览器默认是16px，设计图常用最小字号是12px
2	color	颜色	color:red; color:#ff0; color:rgb(255,0,0);
3	font-family	字体	当字体是中文字体、英文字体中有空格时，需要加引号多个字体间用逗号连接，先解析第一个字体，如果没有则解析第2个字体，以此类推...
4	font-weight	加粗	font-weight:bolder/bold/normal; （bolder更粗；bold加粗；normal常规） font-weight:100-900; （100-500不加粗；600-900加粗）
5	font-style	倾斜	font-style:italic/oblique/normal; （italic斜体字；oblique倾斜的文字；normal常规）
6	text-align	文本水平对齐	text-align:left; 水平靠左 text-align:right; 水平靠右 text-align:center; 水平居中 text-align:justify; 水平两端对齐（只对多行起作用）
7	line-height	行高	line-height的数据=height的数据，可以实现单行文本垂直居中
8	font	文字简写	font是 font-style font-weight font-size/line-height font-family的简写 font:italic 800 30px/80px "宋体"; 注意：顺序不能改变，必须同时指定font-size和font-family属性时才起作用
9	text-decoration	文本修饰	text-decoration:none; 无修饰 text-decoration:underline; 下划线 text-decoration:overline; 上划线 text-decoration:line-through; 删除线
10	text-indent	首行缩进	text-indent可以取负值 text-indent属性只对第一行起作用
11	letter-spacing	字间距	控制文字和文字之间的间距

# 字体大小

属性：font-size

字体大小取值单位：px，pt，em等

px ======= 像素单位
pt ======= 磅值单位：12pt=16px
em =======相对单位：相对于自己字体标签大小进行缩放的一个倍数，默认的情况下，1em=16px，也就是2em=32px

注意：页面中默认字体大小为16px；一般情况下，浏览器中最小的字体是10/12px；设计图常用最小字号是12px

# 文本颜色

属性：color

颜色取值：颜色单词、六位十六进制的颜色值、rgb取值

颜色单词：用颜色英文单词命名，如：red blue orange…
十六进制颜色值：由于“#”键和六位十六进制的颜色值（0-9A-F）组成，如：#123456、#aabb12等
rgb取值：rgb(red,green,blue) 每一个颜色取值范围：0~255

# 文本字体

属性：font-family

属性取值：中文字体、英文字体

其中，字体取值的书写如下：

中文字体，不需要带引号
单个英文单词字体，不需要带引号
多个英文单词组成一个字体的话，则需要带引号，且英文单词之间用空格隔开
可以取值为一个值也可以为多个值，多个取值之间使用逗号隔开（多个取值字体时中间用逗号链接，先解析第1个字体，如果没有解析第2个字体，以此类推）

注意：浏览器中默认字体为宋体；现在大部分高版本的浏览器，为了增加用户的体验度，让用户看起来更好看，选择改变成了微软雅黑

# 文本加粗

属性：font-weight

属性取值：数值类型、关键词类型

1、数值类型：100-900整百的数值，其中，W3C中规定固定数值的加粗程度100------细体400------正常700------加粗900------更粗注意事项：700和900显示的效果一致，但是900更加具有强调性2、关键词类型：lighter------细体normal-------正常bold---------加粗bolder-------更粗注意事项：bold和bolder显示的效果一致，但是bolder更加具有强调性

# 文本倾斜

属性：font-style

属性取值：

italic--------倾斜
oblique-----斜体字
normal-----正常字体

注意：italic和oblique显示的效果一致，但是oblique更加具有强调性

# 文本水平对齐

属性：text-align

属性取值：

left----------左对齐（默认值）
right--------右对齐
center-------居中对齐
justify-------两端对齐（经常使用）

# 文本行间距（行高）

属性：line-height

取值：数值+px

应用场景：实现某一个区域里面的单行文本垂直居中对齐，即line-height取值等于高度

注意：行高即为第一行文字的最上边到第二行文字最上边的距离

# 复合属性

一个属性能实现多种样式

属性：font

属性使用：

属性书写格式：
font:font-style font-weight font-size/line-height font-family
例如：
font:italic bold 20px/30px 宋体

注意事项：

复合属性使用的时候，必须带字体和字体大小，字体必须位于最后面
字体大小和行高使用的时候，必须使用/进行连接，前后不能有空格，/前面代表字体大小，/后面代表行间距
可以省略或者调整前面两个的加粗或倾斜书写位置

# 文本修饰线

指的是线条的修饰，有下划线、中划线、上划线、取消修饰线

属性：text-decoration

属性取值：

underline---------下划线（u）
line-through------中划线（s,del）
overline-----------上划线
none--------------取消修饰线

注意：可以使用多修饰线-多个属性值共用一个属性，并且使用空格隔开

如 text-decoration: underline line-through;

# 首行缩进

属性：text-indent

属性取值：默认为2em（首行缩进两位）

1、首行缩进只对第一行起作用

2、取值为整数，也可以取值为负数

# 间距

属性分类：字符间距属性、词间距属性

1、字符间距属性：指对英文字母、标点符号、空格、汉字进行间距修饰属性：letter-spacing
2、词间距属性：指对英文单词与英文单词之间进行间距修饰属性：word-spacing

属性值：数值+px

（2）背景相关属性

序号	属性	描述
1	background-color	背景颜色
2	background-image	背景图片
3	background-repeat	背景图片的平铺
4	background-position	背景图片的定位
5	background-size	背景图片的大小
6	background-attachment	背景图片的固定

# 背景颜色

属性：background-color

属性取值：颜色单词、六位十六进制的颜色值、rgb取值、rgba取值

1、颜色单词：用颜色英文单词命名，如：red blue orange...
2、十六进制颜色值：由于“#”键和六位十六进制的颜色值（0-9A-F）组成，如：#123456、#aabb12等
3、rgb取值：rgb(red,green,blue) 每一个颜色取值范围：0~255
4、rgba取值：rgba(red,green,blue,alpha)red------红色green----绿色blue-----蓝色alpha----透明度-取值范围：0-1，取值是小数，一般保留一位小数0---透明1---不透明

# 背景图片

属性：background-image:url(图片的路径)

属性取值：取值即为图片的路径

注意：只要插入背景图片，默认就会产生平铺效果，产生平铺后，背景颜色是看不到了不是被代码覆盖了

# 背景平铺

属性：background-repeat

属性取值：

repeat-----------默认重复平铺
no-repeat-------取消平铺（实际开发中经常应用）
repeat-x---------水平平铺
repeat-y---------垂直平铺

# 背景图片的位置

目的：只要插入背景图片就默认产生平铺效果，取消平铺后，背景图片默认在左上角显示，需要调整背景图片的显示位置

属性：background-position

属性取值：数值单位、关键词

书写格式：background-position:x y;x表示水平方向位置y表示垂直方向位置
x、y的取值有两种格式：数值单位、关键词
1、数值单位：x取值为正数，向右侧走；x取值为负数，向左侧走y取值为正数，向下边走；y取值为负数，向上边走
2、关键词：x、y取值：left/right/center

# 调整背景图片尺寸大小

属性：background-size

属性取值：数值单位、关键词

书写格式：background-size:x y;x-----水平方向大小y-----垂直方向大小
x、y的取值有两种格式：数值单位、关键词
1、数值单位：x表示图片宽度y表示图片高度
2、关键词：cover------覆盖（应用频率高）等比例放大这个图片：直到这个图片撑满这个盒子位置问题：容易出现被裁减的问题contain----包含等比例放大这个图片：只要有一个边缘撑满了，就结束了问题：容易出现留白的问题

# 背景图片的滚动和固定

定义：

滚动：当页面有滚动条的时候，滚动滚动条，背景图片被带上去的效果
固定：当页面有滚动条的时候，滚动滚动条，背景图片固定在原来的位置，不会被滚上去

属性：background-attachment

属性取值：scroll—滚动、fixed----固定

注意：只要添加了背景的固定，背景图的参照物位置都是浏览器窗口的左上角；大小调整也是参照浏览器窗口

# 背景的复合属性

一个属性能实现多种样式

格式：

background:color image repeat position/size attachment

注意事项：

后面可以跟一个值，也可以跟多个值
多个值不分先后顺序
尺寸大小和位置一起使用的时候，必须使用/连接，就算位置不调整，也需要给值(如：0px
0px/200px 200px) /前面代表的是位置，/后面代表的是大小

# 精灵图

含义：将页面中使用到的图片放在一张背景透明的图片上面, 通过背景定位的属性将对应的精灵图区域显示在对应的元素内

优点：主要是降低图片在服务器存储时的请求次数

属性：background-position

使用：

1、先插入精灵图片，即：background-image: url(img/素材2.png);
2、在精灵图中查看小图标位置，将图片向左向上移动到当前小图标位置处即可，即：background-position: -275px -7px;

（3）列表相关属性

序号	属性	描述
1	list-style-type	列表项类型（单一）
2	list-style-image	列表项图片（单一）
3	list-style-position	列表项位置（单一）
4	list-style	列表属性的简写（复合）

# 列表项类型

属性：list-style-type

属性取值：

disc--------黑色实心圆点
circle-------黑色圆环
square-----黑色实心方块
none-------取消列表项

# 列表项图片

属性：list-style-image:url(路径)

注意：实际开发时不会使用列表图片作为列表项，大部分使用背景图作为列表项，因为背景图方便调整位置，这里了解即可

# 列表项位置

属性：list-style-position

属性取值：

inside--------里面
outside------外面

# 列表项复合属性

属性：list-style:type image position

注意事项：

三个取值可以调整位置
后面可以跟一个值也可以跟多个值

实际开发时，我们经常使用的一行代码是：list-style:none;

目的：取消列表项的项目类型

（4）边框属性

边框：代表盒子或者是容器的边缘，用来隔绝元素内外的一个辅助线

作用：可以用来制作特殊图形，如：三角形、梯形、旗帜、风车等

# 四个方向边框属性

序号	属性	描述
1	border	为一个元素添加边框（复合）
2	border-width	边框粗细（单一）
3	border-style	边框样式（单一）
4	border-color	边框颜色（单一）
border单一样式复合属性，可以取值一个值到四个值；单独使用的时候，只能是border-style能单独使用

@ 边框复合属性

属性：border

属性使用：border:10px solid gray;

注意事项：边框加上后会撑大盒子—占位置

border 后面跟多个取值，且取值之间以空格隔开

@ 边框单一属性-粗细

属性：border-width

属性取值：取值内容为像素

border-width: v1;------------实现的是四个方向边框的粗细-v1上下左右
border-width: v1 v2;---------实现的是四个方向边框的粗细-v1上下，v2左右
border-width: v1 v2 v3;------实现的是四个方向边框的粗细-v1上，v2左右，v3下
border-width: v1 v2 v3 v4;---实现的是四个方向边框的粗细-v1上，v2右，v3下，v4左规律：当粗细取值为四个值时，可以记忆为上右下左

@ 边框单一属性-样式

属性：border-style

属性取值：取值内容设置边框样式，也可以取四个值，取值逻辑同粗细一致

边框样式取值：solid=------单实线dashed------虚线（线段）dotted------虚线（点状）double------双实线

@ 边框单一属性-颜色

属性：border-color

属性取值：取值内容设置颜色，也可以取四个值，取值逻辑同粗细一致

1、单一属性能否直接单独使用：

如果单独使用的时候，粗细和颜色均不能实现效果，但是样式可以实现，默认3像素粗细、黑色的实线，因此样式是必须项

2、背景颜色能蔓延到边框位置处

# 单一方向边框属性

序号	属性	描述
1	border-top	上边框（单一）
2	border-right	右边框（单一）
3	border-bottom	下边框（单一）
4	border-left	左边框（单一）
border-方向词：用来设置某一个方向的边框，其实也属于复合属性

@ 上边框

属性：border-top

取值：同border复合属性取值一致

border-top: 10px solid green;

@ 右边框

属性：border-right

取值：同border复合属性取值一致

border-right: 10px solid yellow;

@ 下边框

属性：border-bottom

取值：同border复合属性取值一致

border-bottom: 10px solid blue;

@ 左边框

属性：border-left

取值：同border复合属性取值一致

border-left: 10px solid orange;

颜色中透明色的取值有两种：
rgba() ; transparent

（5）浮动属性

序号	属性	描述	说明
1	float	float:left;	元素靠左边浮动
2	float	float:right;	元素靠右边浮动
3	float	float:none;	元素不浮动
浮动的作用1：		定义网页中其他文本如何环绕该元素显示
浮动的作用2：		简单讲：就是让竖着的东西横着来

# 属性

float

# 属性取值

left---------左浮动
right-------右浮动
none-------默认值不浮动

# 浮动特点

默认值是不浮动的
浮动元素不占页面空间，导致后面的元素上去补位置
单个元素浮动的时候，只会在自己本行中左侧或者右侧浮动
所有元素都浮动时都会让元素横向显示
如果盒子大小参差不齐，那么实现的效果如下：如果所有元素都浮动的话，剩下的空间不够了，那么元素就会折行显示；如果盒子浮动的话，参照是以倒数第二个浮动盒子的右侧和下方进行补位的；若高度不一致，则会出现被卡住的效果

注意：

左侧浮动：各元素从左侧开始依次向右显示

右侧浮动：各元素从右侧开始依次向左显示

总结：只要布局的时候想让元素横向显示，我们目前来看就是使所有的元素都浮动

# 清除浮动

浮动带来的影响：让元素脱离文档流不占页面空间，后面的元素上去补位置，导致出现文字环绕的问题，因此需要清除补位元素的浮动

序号	属性	描述	说明
1	clear	clear:none;	允许有浮动对象
2	clear	clear:right;	不允许右边有浮动对象
3	clear	clear:left;	不允许左边有浮动对象
4	clear	clear:both;	不允许有浮动对象
清除浮动知识改变元素的排列方式，该元素还是漂浮着，不占据文档位置

清除浮动的属性：clear

属性取值：

none--------不清除浮动
left----------清除左侧浮动
right--------清除右侧浮动
both--------清除左侧和右侧浮动（常用）

7、CSS的层叠与选择器优先级

（1）CSS语法对比

优先级描述：

!important>行内样式>内部样式>外部样式

遵循原则 : 就近原则，挨着哪一个近就实现哪一个效果

注意：如果外部样式表在内部样式表的下边，则实现的效果是：外部样式 > 内部样式

因为外部引入的东西：CSS、公共的CSS、JS 等，都要放在前面，因此遵循就近原则，内部样式优先级高于外部样式优先级

（2）权重

不同的选择器修饰同一个元素的时候实现的样式，是以选择器的权重值大小来实现的

各选择器权重值：

id选择器（100）>类选择器（10）>标签选择器（1）>通配符选择器（0)

如果选择器混合使用的时候，则需要把选择器的权重值相加进行判断

注意：

涉及多层嵌套的时候，将权重值相加，但权重值只是一个虚拟值，默认还是类选择器要远远大于标签选择器

（3）CSS层叠性

CSS层叠性是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠

规则1：当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式
规则2：相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式

8、常见可继承属性

（1）继承的理解

理解：即继承了父元素的某些属性

（2）默认设置继承的属性

可继承的属性：文字属性，如文本缩进、对齐、行高

9、实例

（1）判断文字颜色

查看【我是大漂亮】文字的颜色

<!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><style>* {color: blue!important;}ul li{color: red;}.box{color: green;}#box1 {color: pink;}</style>
</head>
<body><!-- 文字的颜色显示为蓝色 --><ul><li class="box" id="box1" style="color: orange;">我是大漂亮</li></ul>
</body>
</html>

（2）根据要求实现对应盒子效果

⼀个div标签有四个子元素标签div，子元素的内容分别为“苹果”、“橘子”、“橙⼦”、“香蕉”，子元素的宽高为100px，边框为2px，实线，红色
每个子元素的上下间距为50px，子元素的实际宽高为设置的宽高
第二个子元素鼠标悬浮时，字体为红色，背景颜色为绿色，即使子元素个数发⽣变化都满足

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实例2</title><style>.box div{width: 100px;height: 100px;border: 2px solid red;margin: 50px 0;box-sizing: border-box;}.box div:nth-child(2):hover {color: red;background-color: green;}</style>
</head>
<body><div class="box"><div>苹果</div><div>橘子</div><div>橙子</div><div>香蕉</div></div>
</body>
</html>

四、CSS布局定位

1、布局前置知识

（1）正常元素布局

# 块级元素

默认一个块级元素的内容宽度就是其父元素的100%，他的高度和其内容高度一致

# 行内元素

行内元素的宽度和高度都是根据内容决定的，我们无法直接设置行内元素的高度，不过可以通过设置【display】属性来更改元素的类型

（2）元素间相互影响

每个块级元素会在上个元素下面另起一行，行内元素则不会另起一行

2、【float】布局

（1）使用

属性：float

属性值：

none-------默认值，元素不浮动
left----------元素向左浮动
right--------元素向右浮动

（2）特点

浮动元素会脱离文档流，不再占据文档流空间
浮动元素彼此之间是从左向右排列，宽度超过一行会自动换行
在浮动元素前面元素不浮动时，浮动元素无法上移
块级元素和行内元素浮动之后都会变成行内块元素
浮动元素不会盖住文字，可以设置文字环绕效果

（3）清除浮动

# 原因-高度塌陷

引起高度塌陷的原因：

父元素不设置高度，默认的高度是被子元素撑开的，如果子元素添加浮动，父元素的高度会降低，这种降低的效果被称为高度塌陷—会影响布局

# 操作

使用伪元素的方法来完成解决高度塌陷的问题

方法：给父元素追加一个行内元素，再将其转化为块级元素，最后给该元素清除浮动即可

.father::after {clear: both;content: '';display: block;
}

3、【flex】布局

（1）flex布局定义

flex布局即弹性盒子，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

# 触发弹性盒子的方式

给父元素添加display属性, 并且将取值设置成:flex，影响的是子元素

display:flex;

# 触发弹性盒子的特点

子元素默认横向显示
子元素会默认变成块级元素, 能设置宽度高度
如果只有一个子元素的话, 则给子元素添加margin:auto的时候，会让子元素直接实现水平垂直居中显示

# 弹性盒子概念

容器：父元素，给父元素触发弹性盒子
项目：子元素，父元素触发弹性盒子之后，影响的都是子元素
横轴：水平方向的轴线
纵轴：垂直方向的轴线
主轴(重点)：触发弹性盒子之后，子元素的排列方向
侧轴(重点)：触发弹性盒子之后，与主轴对立的方向

备注：

1、触发弹性盒子之后, 项目默认沿主轴排列

2、移动端布局里面/flex布局/弹性盒子布局里面最主要的就是按照轴线进行布局

（2）父元素容器的属性

操作	属性	属性值	结果
修改主轴方向/项目的排列方向	flex-direction	row	横向（从左至右），默认值
		column	纵向（从上至下）
		row-reverse	横向（从右至左），主轴在横向，项目反方向排列
		column-reverse	纵向（从下至上），主轴在纵向，项目反方向排列
调整主轴上面的对齐方式	justify-content	flex-start	主轴的开始位置（项目没有分开），默认位置
		flex-end	主轴的结束位置（项目没有分开）
		center	主轴的居中位置（项目没有分开）
		space-around	两端环绕（项目与项目左右都有间距，项目与项目之间的距离是贴边项目距离父元素之间距离的2倍）
		space-between	主轴两端对齐（首尾贴边，中间的距离进行均分）
调整侧轴上面的对齐方式(单行侧轴对齐方式)	align-items	flex-start	侧轴的开始位置，默认位置
		flex-end	侧轴的结束位置
		center	侧轴的居中位置
		stretch	默认侧轴的开始位置，若没有高度的话，默认是拉伸到父元素的高度
		baseline	侧轴的基线位置，与flex-start效果一致
项目折行	flex-wrap	nowrap	不折行
项目折行	flex-wrap	wrap	折行
项目折行后的行间距(多行侧轴对齐方式)	align-content	flex-start	侧轴的开始位置（没有行间距），经常使用
		flex-end	侧轴的结束位置（没有行间距）
		center	侧轴的中间位置（没有行间距）
		space-around	行间距环绕（行与行之间的距离，是贴边行与父元素之间距离的2倍）
		space-between	侧轴的两端对齐（第一行和最后一行贴边显示，中间行间距自动分配）

备注：

1、添加折行之前:

默认不折行，是有挤压效果的，且会失去宽度

2、添加折行之后:

（1）默认是高度均分的；----显示很多留白的原因是因为给子元素设置了高度

（2）不给项目高度的话，默认是拉伸的，高度均分

（3）折行之后，如果子元素有高度的话，则会产生一个比较大的间距(行间距)

（3）子元素容器的属性

操作	属性	属性值	结果
定义子元素的排列顺序	order	数值，无单位	1、order取值越大，位置越靠后面（取值可以为正数也可以为负数）； 2、默认的排列的顺序为order:auto-----等价于0，即从左向右显示； 3、以主轴最开始位置算起
调整剩余宽/高的长度	flex	数值，无单位	1、主轴在横向：项目不设置高度的话，则高度是拉伸的 2、主轴在纵向：项目不设置宽度的话,则宽度是拉伸的 3、调整剩余宽高时，若要使得项目均分，则各项目中flex取值一样即可
不挤压不折行	flex-shrink	0	实现不挤压不折行（应用场景：移动端横向滚动条）
不挤压不折行	flex-shrink	1	默认值，默认被挤压不折行
调整每个项目侧轴上面的对齐方式	align-self	flex-start	侧轴的开始位置，默认位置
		flex-end	侧轴的结束位置
		center	侧轴的居中位置
		stretch	默认侧轴的开始位置，若没有高度的话，默认是拉伸到父元素的高度
		baseline	侧轴的基线位置，与flex-start效果一致

float布局与flex布局的对比：

flex布局易用，布局全面
float的创建初衷只是为了达到文字环绕的效果，另外需要清除浮动
现在几乎所有公司的产品使用场景都在浏览器ie9以上，所以不需要考虑兼容性问题

4、【position】定位

（1）定位理解

定位就是让元素在布局的过程在进行位置的偏移，相对于自己的位置，或者是其他元素的位置进行调整

（2）定位种类

静态定位、相对定位、绝对定位、固定定位、粘性定位

（3）定位属性

属性：position

（4）定位配合

偏移属性：top、right、bottom、left

（5）定位分类

# 静态定位

含义：普通文档流定位，元素是怎么排列就怎么排列
属性：position
属性值：static，默认值，实际开发时不适用
注意事项：无论怎么跟偏移属性都不会改变位置

position:static;

# 相对定位

含义：相对定位指的是相对于自己的位置进行微调，参照物为自己的位置
属性：position
属性值：relative

top：取值为正数时，盒子向下走，即盒子距离原来顶部有对应数值的距离
left：取值为正数时，盒子向右走，即盒子距离原来左边有对应数值的距离
bottom：取值为正数时，盒子向上走，即盒子距离原来底边有对应数值的距离
right：取值为正数时，盒子向左走，即盒子距离原来右边有对应数值的距离

实际开发的时候，经常使用的是left和top，所有元素的基准点都是左上角

position:relative;

# 绝对定位

含义：

子元素使用绝对定位，父元素有定位（一般是相对定位），则位置调整是相对于父元素左上角进行位置的改变
子元素使用绝对定位，父元素没有定位，这次子元素位置的调整是根据上一层的元素判断有定位属性，则参照最近的一层进行位置调整，如果外面所有层都没有定位，则参照浏览器左上角的body位置

属性：position
属性值：absolute
顺口溜：子绝父相

position:absolute;

# 固定定位

含义：让元素相对于浏览器窗口进行位置的显示
参照物：当前浏览器窗口左上角
应用场景：返回置顶、广告、楼梯层、遮罩层
属性：position 属性值：fixed

position:fixed;

# 粘性定位

含义：粘性定位是相对定位和固定定位的结合体，当页面元素发生滚动的时候，实现了对应的吸附效果，也叫作滚动吸顶
属性：position
属性值：sticky

position:sticky;

（6）定位使用场景

静态定位：默认值，始终不会使用
相对定位：出现微调的时候会使用该定位
绝对定位：出现大调的时候会使用该定位，使用时遵循子绝父相的写法
固定定位：实现广告栏、楼梯层、遮罩层等效果
粘性定位：主要做滚动吸顶的效果

5、三栏布局

目标：高度固定，左右两侧的盒子宽度为200px，中间自适应

解决：float实现、position实现、flex实现

（1）float实现

使用浮动来实现三栏布局，即新增三个盒子，分别为左中右，左盒子左浮动，右盒子右浮动，中间的盒子不设置宽度，自适应（设置一个margin:0 200px），中间盒子放置最后即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}.top {width: 100%;height: 100px;background-color: pink;}/* 设置左中右 */.left {width: 200px;height: 300px;background-color: yellowgreen;float: left;}.center {height: 300px;background-color: blanchedalmond;margin: 0 200px;}.right {width: 200px;height: 300px;background-color: coral;float: right;}</style>
</head>
<body><div class="top"></div><div class="box"><div class="left"></div><div class="right"></div><div class="center"></div></div>
</body>
</html>

（2）position实现

使用position来实现三栏布局，即左中右三个盒子，左盒子定位距离左边位置为0，邮盒子定位距离右边盒子为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;}.top {width: 100%;height: 100px;background-color: pink;}/* 设置左中右 */.left {width: 200px;height: 300px;background-color: yellowgreen;position: absolute;left: 0;}.center {height: 300px;/* width: 200px; */background-color: blanchedalmond;}.right {width: 200px;height: 300px;background-color: coral;position: absolute;right: 0;}</style>
</head>
<body><div class="top"></div><div class="box"><div class="left"></div><div class="right"></div><div class="center"></div></div>
</body>
</html>

（3）flex实现

使用flex来实现三栏布局，即给父元素设置【display:flex;】，给中间盒子调整剩余宽度即可【flex: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>* {margin: 0;padding: 0;}.top {width: 100%;height: 100px;background-color: pink;}.box {display: flex;}/* 设置左中右 */.left {width: 200px;height: 300px;background-color: yellowgreen;}.center {height: 300px;/* width: 200px; */background-color: blanchedalmond;flex: 1;}.right {width: 200px;height: 300px;background-color: coral;}</style>
</head>
<body><div class="top"></div><div class="box"><div class="left"></div><div class="center"></div><div class="right"></div>
</body>
</html>

6、水平垂直居中布局

（1）行内块元素

方法1：使用水平居中和行高来实现水平垂直居中
方法2：使用弹性盒子布局（主轴居中/侧轴居中）来实现水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中</title><style>* {margin: 0;padding: 0;}span {width: 100px;height: 100px;background-color: pink;display: inline-block;/* 法1 *//* text-align: center;line-height: 100px; *//* 法2 */display: flex;justify-content: center;align-items: center;}</style>
</head>
<body><span>完美世界</span>
</body>
</html>

（2）块级元素

使用position+margin来进行中心位置的调整
使用position+transform计算子元素宽高一半占比来进行中心位置的调整
使用弹性盒子进行水平垂直居中
使用单元格【display:table-cell;】和外边距【margin:0 auto;】实现水平垂直居中（兼容性差，不建议）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中-块级元素</title><style>* {margin: 0;padding: 0;}.box{width: 500px;height: 500px;background-color: pink;/* 法1法2：子绝父相 *//* position: relative; *//* 法3：设置弹性盒子 *//* display: flex;justify-content: center;align-items: center; *//* 法4：设置单元格 */display: table-cell;vertical-align: middle;}.box1 {width: 100px;height: 100px;background-color: beige;/* 法1法2：子绝父相 *//* position: absolute;top: 50%;left: 50%; *//* 法1：position+margin平移 *//* margin-top: -50px;margin-left: -50px; *//* 法2：position+transform计算子元素宽高一半占比 *//* transform: translate(-50%,-50%); *//* 法4：设置单元格+margin实现，但是兼容性差 */margin: 0 auto;}</style>
</head>
<body><div class="box"><div class="box1"></div></div>
</body>
</html>

7、BFC

（1）定义

块格式上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

即形成了一块封闭的区域，能检测到区域内脱离文档流的元素

（2）特点

CSS中隐含的属性，开启后不会被浮动的元素覆盖
BFC元素可以包含浮动元素
BFC元素的子元素和父元素外边距不重叠

（3）开启

设置元素浮动【float:left;】
设置为行内块元素【display:inline-block;】
overflow:hidden（推荐使用）

（4）作用

清除浮动带来的影响
解决边距塌陷问题（外边距折叠也只会发生在属于同一BFC的块级元素之间）

五、CSS3常用属性

1、CSS3边框

（1）圆角

# 属性分类

复合属性：border-radius
单角属性：border-垂直方向-水平方向-radius

# 复合属性

属性取值：数值px

取值：v1;-----------------实现四个方向的圆角
取值：v1 v2;-------------实现四个方向的圆角显示，v1代表左上右下，v2代表右上左下
取值：v1 v2 v3;---------实现四个方向的圆角显示，v1代表左上，v2代表右上左下，v3代表右下
取值：v1 v2 v3 v4;-----实现四个方向的圆角显示，v1代表左上，v2代表右上，v3代表右下，v4代表左下

规律：从左上角开始，顺时针旋转记忆

示例：设置一个角的时候：
border-radius: 30px 0 0 0;

# 单角属性

单角属性：只设置一个角

border-垂直方向-水平方向-radius
垂直：top、bottom
水平：left、right

border-top-left-radius------------左上
border-top-right-radius----------右上
border-bottom-left-radius-------左下
border-bottom-right-radius-----右下

# 用法

圆角的水平半径和垂直半径

border-radius:x/y;x-------所有角的水平半径y-------所有角的垂直半径
示例：
border-radius:x1 x2 x3 x4/y1 y2 y3 y4;/前面代表的是每一个角的水平半径/后面代表的是每一个角的垂直半径

注意：水平半径和垂直半径设置的时候，只会应用在复合属性上（border-radius），不会应用在单角属性上

# 应用

正方形在取值为实际总宽度的一半时，会变成一个正圆，要想使得正方形变成一个圆形，可以直接设置取值为50% 即：

 border-radius: 50%;

长方形盒子设置圆角时，不会给百分比取值，除非想实现椭圆的效果，要想实现操场跑道效果，则取值要给出实际数值-----（高度+边框）的一半

width: 500px;
height: 200px;
border: 10px solid gray;
border-radius: 110px;-----110px为高度+边框后的一半

（2）盒阴影

# 属性

box-shadow

# 属性取值

box-shadow:h-shadow v-shadow blur size color inset;

h-shadow-----水平方向上的阴影位置（*）正数：向右走负数：向左走
v-shadow-----垂直方向上的阴影位置（*）正数：向下走负数：向上走
blur---------阴影的模糊距离
size---------延展半径
color--------阴影的颜色
inset--------内阴影设置，不设置则代表外阴影
示例：box-shadow: 30px 30px 5px 40px blue inset;
多个阴影也可添加---取值同文本阴影一致，中间使用逗号分隔开
示例：box-shadow: 30px 30px blue,-30px -30px yellow;

2、CSS3渐变

CSS3渐变效果分为线性渐变以及径向渐变

（1）线性渐变

属性：

background：linear-gradient(to 方向词,col1,col2,col3)注解：
to 方向词：到达某一个方向to top:从下面开始到达上面to bottom:从上面开始到达下面to left:从右侧开始到达左侧to right:从左侧开始到达右侧
col1,col2,col3------渐变的颜色col1:开始的颜色col2:中间的颜色col3:结束的颜色

# to 方向词

to 方向词，即到达某一个方向

to top：从下面开始到达上面
to bottom：从上面开始到达下面
to left：从右侧开始到达左侧
to right：从左侧开始到达右侧

background: linear-gradient(to bottom,red,green,blue);

# to 方向词1 方向词2

to 方向词1 方向词2，即到达某一个角

to top left：从右下角开始，到达左上角
to top right：从左下角开始，到达右上角
to bottom left：从右上角开始，到达左下角
to bottom right：从左上角开始，到达右下角

background: linear-gradient(to top left,red,green,blue);

# 不跟方向词参数

不跟任何参数也能实现渐变，默认是从上向下进行渐变的

background: linear-gradient(red,green,blue);

# 沿着一个度数/角度进行渐变

沿着一个度数/角度进行渐变，即numdeg（其中num代表数值，deg代表度数单位）

background: linear-gradient(10deg,red,green,blue);

# 线性渐变重复

background: repeating-linear-gradient(to left,red,yellow 10%,green 20%);

（2）径向渐变

# 属性

background: radial-gradient(center, shape, size, co1,col2,col3)

# 属性值拆解

center---渐变位置渐变起点的位置，可以为百分比，默认是图形的正中心shape---渐变形状ellipse表示椭圆形，circle表示圆形，默认为ellipse；如果元素形状为正方形的元素，则ellipse和circle显示一样size---渐变大小closest-side：最近边；farthest-side：最远边；closest-corner：最近角；farthest-corner：最远角col---渐变颜色col1开始颜色; col2中间颜色; col3结束颜色

# 示例

/* 到达最近的边结束 */
.box1 {background: -webkit-radial-gradient(100px 50px,closest-side,red,green,blue);
}
/* 到达最远的边结束 */
.box2 {background: -webkit-radial-gradient(100px 50px,farthest-side,red,green,blue);
}
/* 到达最近的角结束 */
.box3 {background: -webkit-radial-gradient(100px 50px,closest-corner,red,green,blue);
}
/* 到达最远的角结束 */
.box4 {background: -webkit-radial-gradient(100px 50px,farthest-corner,red,green,blue);
}

# 径向渐变重复

background: repeating-radial-gradient(red,green 10%,blue 20%);

3、CSS3文本效果

（1）文本阴影

文本阴影即给文字添加阴影

# 语法

text-shadow: h-shadow v-shadow blur color；

取值	说明
h-shadow	必填项，水平阴影的位置，允许负值
v-shadow	必填项，垂直阴影的位置，允许负值
blur	选填项，模糊的距离
color	选填项，阴影的颜色

注意：text-shadow 属性可连接一个或更多的阴影文本，阴影文本用逗号分隔开

# 示例

 <style>.root{margin: 50px;}.text{width: 200px;margin: auto;font-size: 44px;font-weight: bold;color: #fff;text-shadow: 2px 2px 4px skyblue,-2px -2px 4px skyblue;}
</style>
<body><div class="root"><div class="text">文字渐变</div></div>
</body>

（2）文本溢出

属性	属性说明	属性值	属性值说明
overflow	文字长度超出限定宽度，则隐藏超出的内容	visible	默认值，内容不会被修剪，可以呈现在元素框之外
		scroll	无论是否超出容器，都会出现一个滚动条
		auto	如果没有超出容器的显示，将会正常显示，如果超出，将会出现一个滚动条
		hidden	如果内容超出父级容器，超出部分将会被隐藏
text-overflow	规定当文本溢出时，显示省略符号来代表被修剪的文本注意：只有在设置了`overflow:hidden`和`white-space:nowrap`后text-overflow才能够生效的	clip	当对象内文本溢出部分裁切掉
text-overflow		ellipsis	当对象内文本溢出时显示省略标记（…）
white-space	控制空白字符的显示，同时还能控制是否自动换行	normal	连续的空白符会被合并，换行符会被当作空白符来处理
		nowrap	和 normal 一样，连续的空白符会被合并，但文本内的换行无效
		pre	连续的空白符会被保留，仅在遇到换行符或 br标签时才会换行
		pre-wrap	连续的空白符会被保留
		pre-line	连续的空白符会被合并

# 单行文本溢出

<!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><style>.box{width: 300px;margin: 0 auto;text-align: left;}.one-line{border: 2px solid pink;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;                      }</style>
</head>
<body><div class="box"><div class="one-line">人们总是把幸福解读为“有”，有房，有车，有钱，有权，但幸福其实是“无”，无忧，无虑，无病，无灾，“有”多半是给别人看的，“无”才是你自的。</div></div>
</body>
</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>多行文本溢出</title><style>.box{width: 300px;margin: 0 auto;text-align: left;border: 2px solid pink;}.two-line{overflow: hidden;text-overflow: ellipsis;/* 将对象作为弹性伸缩盒子模型显示 */display: -webkit-box;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;/* 行数，值可以改，表示展示x行后多余的伸缩展示 */-webkit-line-clamp: 2;}</style>
</head>
<body><div class="box"><div class="two-line">土地是世界上唯一值得你去为之工作，为之战斗，为之牺牲的东西。 Land is theonly thing in the world worth working for, worth fighting for, worth dyingfor.</div></div>
</body>
</html>

（3）文本换行

# 长文本换行

word-wrap:break-word;

# 单词拆分换行

word-break:break-all;

4、CSS3网格布局【grid】

（1）理解

网格布局【grid】是最强大的CSS布局方案，它将网页划分为一个个网格，可以任意组合不同的网格，做出各种各样的布局

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别：Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局；Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，Grid 布局远比 Flex 布局强大

（2）应用场景

flex布局、float布局应用于⼀维布局，网格布局应用于⼆位布局

（3）操作

属性	说明	属性值	说明
display	指定一个容器采用网格布局	grid	默认是块元素
display	指定一个容器采用网格布局	inline-grid	默认是行内块元素
grid-template-columns	定义每一列的列宽	像素值	grid-template-columns：100px 100px 100px;　 //总共三列，每列列宽是100px；
		百分比	grid-template-columns: 33.33% 33.33% 33.33%;
		repeat(次数，大小)；	grid-template-columns: repeat(3, 33.33%);
grid-template-rows	定义每一行的行高	像素值	grid-template-rows: 10px 10px 10px;
		百分比	grid-template-rows: 33.33% 33.33% 33.33%;
		repeat(次数，大小)；	grid-template-rows: repeat(3, 33.33%);

（4）示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>grid网格布局</title><style>.box{width: 800px;height: 800px;background-color: beige;display: grid;/* grid-template-columns: 50% 50%; *//* grid-template-rows: 25% 25% 25% 25%; */grid-template-columns: repeat(2,200px);grid-template-rows: repeat(4,25%);}.son{width: 200px;height: 200px;background-color: pink;border: 1px solid orange;box-sizing: border-box;}</style>
</head>
<body><div class="box"><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div></div>
</body>
</html>