一、前言
1、学习地址及使用vscode
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频
二、CSS
1、CSS简介
全称：层叠样式表。
样式：文字大小、背景颜色、元素宽高等外在表现出来的。
表：列表，eg: color:red;
是一种标记语言，给HTML结构设置样式，实现结构和样式分离
2、CSS的编写位置
（1）行内样式与内部样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS编写位置</title>
<!-- 注意：style标签中的代码是css,所以需要遵循css规范
位置：style标签可以放在html文档的任何位置,但按规范写在head标签中
像素 -->
<style>
/* 含义：给h2添加样式 */
h2{
color:green;
font-size: 40px;
}
p{
color: aqua;
font-size: 80px;
}
img{
/* 在css规范中，px要写上，否则不奏效 */
width: 200px;
}
</style>
</head>
<body>
<!--行内样式：作用范围：当前标签
写在标签的style属性中
（不推荐，不便于维护、不能复用、不体现结构与样式分离，
只有对当前元素添加简单样式的时候才偶尔使用 ） -->
<!-- style属性的值必须符合css的编写规范：如：所写的样式是名值对的组合
注意：可大写，但推荐小写
可连续写多组名值对 -->
<h1 style="color:red;font-size: 60px;">欢迎学习</h1>
<!-- 内部样式：作用范围：当前页面
含义：写在.html文件的内部,将所有的css代码提取出来，单独放在<style>标签中
优势：代码结构更清晰，可以复用
问题：没有实现代码和结构完全分离，仍写在.html文件的内部
多个HTML页面无法复用样式 -->
<!-- 在head标签中写一个style标签 -->
<h2>学习前端</h2>
<p>上海欢迎你</p>
<p>南昌欢迎你</p>
<p>江西欢迎你</p>
<p>北京欢迎你</p>
<img src="../images/鞠婧祎8.4.jpg" alt="鞠婧祎8.4">
<!-- 外部样式 -->
</body>
</html>（2）外部样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS编写位置</title>
<!-- 外部样式：写在单独的.css文件中，在HTML文件中引入使用
作用范围：多个页面
优势：1、样式可以复用
2、不同的html文件也可复用
3、结构清晰
4、能够触发浏览器的缓存机制，提升访问速度
5、实现结构与样式的完全分离 -->
<!-- link标签写在head标签中，
href属性：引入的文档来自哪里
rel属性：说明引入的文档与当前文档的关系 -->
<link rel="stylesheet" href="./position.css">
</head>
<body>
<h1 style="color:red;font-size: 60px;">欢迎学习</h1>
<h2>学习前端</h2>
<p>上海欢迎你</p>
<p>南昌欢迎你</p>
<img src="../images/鞠婧祎8.4.jpg" alt="鞠婧祎8.4">
</body>
</html>3、CSS样式表优先级
1、行内样式的优先级高于内部样式和外部样式的优先级
2、内部样式与外部样式的优先级相同，后写的会覆盖先写的（即优先级与编写顺序有关）
3、同一个样式表中，优先级与编写顺序有关
注意：以上只有当属性相同时才会被覆盖
4、CSS语法规范
h1 {color: green;font-size: 80px;}（h1后有一个空格）
选择器 {声明；声明;}
选择器：找到要添加样式的元素，如：h1
声明块{声明；声明;}
声明：一个声明就是一个具体的样式，格式：属性名: 属性值 （冒号后由一个空格）
注释：/* 注释 */ 快捷键：Ctrl+/
5、CSS代码风格
（1）展开风格（之前写的）：开发时推荐，便于维护和调试
（2）紧凑风格（如下）：项目上线时推荐，可减小文件体积
p{color:aqua;font-size:80px;}注意：（1）项目上线时，可通过webpack工具 将展开风格的代码，变成紧凑风格的代码，这样可减小文件体积，节约网络流量，使用户打开网页时速度更快
（2）???.min.html 和 ???.min.css 都是经过压缩的（空格和回车都删了）
6、CSS基本选择器
基本选择器包括：通配选择器（选择范围最大）、元素选择器+、类选择器、id选择器（最小）
（1）通配选择器、元素选择器、类选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/* 通配选择器：把整个html里的元素都选中,对清除样式有帮助 */
/* 语法如下：
*{
color: orange;
font-size: 40px;
}
*/
/* 元素选择器：为页面中某种元素统一设置样式 */
/* 以下css代码表示选中页面中所有的h2、h3...
问题：不能差异化设置样式 */
/* 语法如下：
h2 {
color: aqua;
}
h3 {
color: green;
}
p {
color: red;
}
h1 {
font-size: 50px;
}
*/
/* 类选中器：根据元素的class值来选中某些元素
注意：1、不同的元素也可以是同一个分类：如： <span class="gramma"></span>
2、一个元素不能写多个class属性,但一个class属性的值可以有多个类名(类名间用空格间隔)
如：<p class="gramma big">语法学习顺序：首先学句法</p>
3、class值即类名的要求：不能纯数字、中文、但可以单词+数字(或-)，如speak001
4、class的值命名有意义，要做到见名知意*/
/* 选中页面中所有类名为gramma的元素 */
.gramma {
color: red;
}
.phrase {
color: green;
}
.big {
font-size: 40px;
}
</style>
</head>
<body>
<!-- <p>标签分成两类，要求差异化设置颜色 -->
<h1>英语学习官网</h1>
<br>
<h2>语法</h2>
<h3>作者：linxinya</h3>
<!-- class属性的值通常称为类名 -->
<p class="gramma big">语法学习顺序：首先学句法</p>
<p class="gramma">语法学习顺序：然后学词法</p>
<p class="gramma">语法学习顺序：最后做阅读</p>
<br>
<h2>单词</h2>
<p class="phrase">单词学习顺序：首先学音标</p>
<p class="phrase">单词学习顺序：然后学习词组</p>
<p class="phrase">单词学习顺序：最后学习句子</p>
</body>
</html>（2）id选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/* id选择器: 根据元素的id属性值，精准选择某个元素
注意：1、id属性值不能是数字开头，不能包含空格、区分大小写
2、一个元素不能有多个id，只能有一个
3、多个元素的id值不能相同
4、一个元素可以同时有id和class */
#grammar {
color: red;
}
#words {
color: green;
}
</style>
</head>
<body>
<h1>英语学习官网</h1>
<br>
<h2 id="grammar">语法</h2>
<h3>作者：linxinya</h3>
<p>语法学习顺序：首先学句法</p>
<p>语法学习顺序：然后学词法</p>
<p>语法学习顺序：最后做阅读</p>
<br>
<h2 id="words">单词</h2>
<p>单词学习顺序：首先学音标</p>
<p>单词学习顺序：然后学习词组</p>
<p>单词学习顺序：最后学习句子</p>
</body>
</html>7、CSS复合选择器
（1）交集选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
.rich {
color: gold;
}
.beauty {
color: red;
}
/* 交集选择器: 选中同时符合多个条件的元素
注意：1、交集选择器里如果有元素，如： p.beauty，则元素在开头
2、交集选择器可以多个，如：p.beauty#xiaogou
3、id选择器理论上可以作为交集的一个条件p.beauty#xiaogou，但用的少
4、交集选择器里面不可能出现两个元素
5、不一定要有元素,如：.wangwu
6、交集选择器可以用连个类名形成交集，如：.zhao.liu
7、后写的会覆盖先写的 */
/* p元素且类名为beauty */
p.beauty#xiaogou {
color: green;
}
/* 以下p.beauty常用 */
p.beauty {
color: pink;
}
.wangwu {
color: blue ;
}
.zhao.liu {
color: blueviolet;
}
</style>
</head>
<body>
<h2 class="rich">土豪</h2>
<h2 class="beauty">鞠婧祎</h2>
<h2 class="wangwu">王五</h2>
<h2 class="zhao liu">赵六</h2>
<hr>
<p class="beauty" id="xiaogou">小狗旺财</p>
<p class="beauty">小猪佩奇</p>
</body>
</html>（2）并集选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style>
.rich {
color: gold;
}
.beauty {
color: red;
}
.dog {
color: blue;
}
.pig {
color: pink;
}
/* 并集选择器:又称分组选择器，选中多个选择器对应的元素
注意：
1、并集选择器一般竖着写
2、任何形式的选择器，如：类名、元素、id，都可以作为并集选择器的一部分
3、通常用于集体声明，可以缩小样式表的体积*/
#sheep,
.rich,
.beauty,
.dog,
.pig{
font-size: 40px;
background-color: gray;
width: 180px;
}
</style>
</head>
<body>
<h2 class="rich">土豪</h2>
<h2 class="beauty">鞠婧祎</h2>
<h2 class="wangwu">王五</h2>
<hr>
<p class="dog">小狗旺财</p>
<p class="pig">小猪佩奇</p>
<p id="sheep">小羊</p>
</body>
</html>8、HTML元素间的关系
父元素：直接包裹某个元素的元素，即为该元素的父元素
子元素：被父元素直接包含的元素
祖先元素：父亲的父亲的·······，一直往外找（父元素可算作祖先元素的一种）
后代元素：儿子的儿子的······，一直往里找（子元素也算是后代元素的一种）
兄弟元素：具有相同父元素的元素，互为兄弟元素
代码示意：
<div><!--div为ul和h1的父元素或称为祖先元素，li和span的祖先元素-->
<!-- h1和ul互为兄弟 -->
<h1>前端</h1><!--h1是div的子元素或后代元素-->
<ul><!--ul为li的父元素，是div的子元素,是span的祖先元素-->
<li>HTML</li><!--li为后代元素，是div的后代-->
<li>CSS</li>
<li>
<span>JS</span><!--span是后代元素，是div和ul的后代-->
</li>
</ul>
</div>9、后代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<!-- 作用：选中指定元素中，如：ul，符合要求的后代元素，如：li
注意：
1、后代选择器，最终选择的是后代，不选中祖先
2、结构要符合HTML嵌套要求，如：不能p中写h1~h6 -->
<style>
ul li {
color: red;
}
ol li {
color: green;
}
ul li a {
color: orange;
}
ol li a {
color: blue;
}
.qianduan li {
color: pink;
}
.qianduan #first {
color: blueviolet;
}
.qianduan .second {
color:aqua;
}
.qianduan div.second {
color:gray;
}
</style>
</head>
<body>
<ul>
<li>唱歌</li>
<li>跳舞</li>
<li>
<a href="#">游泳</a>
</li>
</ul>
<hr>
<ol>
<li>张三</li>
<li>李四</li>
<li>
<a href="#">王五</a>
</li>
</ol>
<hr>
<ol class="qianduan">
<li id="first">html</li>
<li class="second">css</li>
<div class="second">css是样式表</div>
<li>js</li>
</ol>
</body>
</html>效果：
10、子代选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<!-- 也称为子元素选择器或子选择器 -->
<!-- 注意：
1、子代选择器，最终选择的是子代，不是父级
2、子、孙子、重孙.....，统称为后代，子就是指儿子 -->
<style>
div>a {
color: red;
}
div>p>a {
color: blue;
}
/* 类名为foot的儿子类型为a
或者写为:div.foot>a （交集，是div且类名为foot）
或者div .foot>a (div的后代中类名为foot的元素的子代) */
.foot>a {
color: pink;
}
</style>
</head>
<body>
<div>
<a href="#">张三</a>
<a href="#">李四</a>
<a href="#">王五</a>
<p>
<a href="#">赵六</a>
<div class="foot">
<a href="#">孙齐</a>
</div>
</p>
</div>
</body>
</html>效果：
11、兄弟选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>兄弟选择器</title>
<style>
/* 注意：以下两种兄弟选择器选中的都是下面的兄弟 */
/* 相邻兄弟选择器：选中div后紧紧相邻的兄弟元素p,若不是p则不算相邻
div+p {
color: red;
}*/
/* 通用兄弟选择器：选中div后所有的兄弟元素p */
div~p {
color: red;
}
/* 或用li~li */
li+li {
color: pink;
}
</style>
</head>
<body>
<div>前端学习</div>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
<!-- 应用场景： -->
<ul>
<li>主页</li>
<li>秒杀</li>
<li>订单</li>
<li>我的</li>
</ul>
</body>
</html>效果：
13、属性选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<!-- 作用：选中属性值符合一定要求的元素 -->
<style>
/* 第一种写法：含义：选中那些具有title属性的元素 */
/* [title] {
color: red;
} */
/* 第二种写法：含义：选中那些具有title属性，且属性值为qianduan1的元素 */
/* [title="qianduan1"] {
color: red;
} */
/* 第三种写法：含义：选中那些具有title属性，且属性值以字母a开头的元素 */
/* [title^="a"] {
color: red;
} */
/* 第四种写法：含义：选中那些具有title属性，且属性值以字母n结尾的元素 */
[title$="n"] {
color: red;
}
/* 第五种写法：含义：选中那些具有title属性，且属性值包含字母q的元素 */
[title*="q"] {
color: red;
}
</style>
</head>
<body>
<div title="qianduan1">前端1</div>
<div title="qianduan2">前端2</div>
<div title="atqianduan">前端3</div>
<div title="atqianduan">前端4</div>
</body>
</html>14、伪类选择器
（1）概念和动态伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<!-- 定义：是元素特殊状态的一种描述，不是类（class） -->
<style>
/* 注意：
1、以下四个状态按顺序来lvha，不能乱写
2、link 和 visited 是超链接a所独有的两种状态，而hover 和 active所有元素都可以具有- */
/* 概念 */
/* 选中没有访问过的a元素 */
a:link {
color: pink;
}
/* 选中访问过的a元素 */
a:visited {
color: gray;
}
/* 动态伪类 */
/* 选中鼠标悬浮状态的a元素 */
a:hover {
color: blueviolet;
}
/* 选中的是激活状态的a元素 */
a:active {
color: green;
}
/* 选中的是鼠标悬浮的span元素 */
span:hover {
color: blueviolet;
}
/* 选中的是鼠标激活的span元素 */
span:active {
color: green;
}
/* 获取焦点伪类:
focus元素，只有表单类元素才能用
用户点击元素、触摸元素、或通过键盘的tab建等方式选择元素时，就是获取焦点 */
input:focus {
color: orange;
background-color: green;
}
select:focus {
color: orange;
background-color: green;
}
/* 优化：可用并集选择器，
input:focus,select:focus {
color: orange;
background-color: green;
}
*/
</style>
</head>
<body>
<a href="https://www.weibo.com">去微博</a>
<a href="https://www.jd.com">去头条</a>
<span>前端</span>
<br>
<input type="text">
<br>
<input type="text">
<br>
<input type="text">
<br>
<select>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
</body>
</html>（2）结构伪类1（first-child）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>结构伪类</title>
<style>
/* 选中的是div的第一个儿子p元素（按照所有兄弟计算）
--看结构1：张三变红 */
/* div>P:first-child {
color: red;
} */
/* 选中的是div的第一个儿子p元素（按照所有兄弟计算）
--看结构2：都不变红 */
/* div>P:first-child {
color: red;
} */
/* 选中的是div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算）
--看结构3：测试1和测试2变红 */
/* div> P:first-child {
color: red;
} */
/* 选中的是p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算）
--看结构4：测试1、2和测试3都被选中，变红 */
P:first-child {
color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div> -->
<!-- 结构2 -->
<!-- <div>
<span>张三：98分</span>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div> -->
<!-- 结构3 -->
<!-- <div>
<p>测试1</p>
<marquee>
<p>测试2</p>
<p>张三：98分</p>
</marquee>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div> -->
<!-- 结构4 -->
<p>测试3</p>
<div>
<p>测试1</p>
<marquee>
<p>测试2</p>
<p>张三：98分</p>
</marquee>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
</div>
</body>
</html>（3）结构伪类2
last-child、nth-child(3)、first-of-type、last-of-type、nth-of-type(5)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>结构伪类</title>
<style>
/* 选中的是div的最后一个儿子p元素（按照所有兄弟计算）
--看结构1：老八变红 */
div>P:last-child {
color: red;
}
/* 选中的是div的第n个儿子p元素（按照所有兄弟计算）
--看结构1：王五被选中 */
/* div>p:nth-child(3) {
color: rgb(22, 114, 195);
} */
/* 2n 或 even 选中div第偶数个儿子p元素（按照所有兄弟计算）--看结构2
2n+1 或 odd 选中div第奇数个儿子p元素（按照所有兄弟计算）--看结构2
-n+5 选中div前五个儿子p元素（按照所有兄弟计算）--看结构2 */
/* div>p:nth-child(-n+5) {
color: red;
} */
/* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算）
--看结构3：张三变红 */
/* div>p:first-of-type {
color: red;
} */
/* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算）
--看结构3：老八变红 */
/* div>p:last-of-type {
color: red;
} */
/* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算）--看结构3 */
div>p:nth-of-type(5) {
color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p>孙七：58分</p>
<p>老八：48分</p>
</div> -->
<!-- 结构2 -->
<!-- <div>
<p>第1个</p>
<p>第2个</p>
<p>第3个</p>
<p>第4个</p>
<p>第5个</p>
<p>第6个</p>
<p>第7个</p>
<p>第8个</p>
<p>第9个</p>
<p>第10个</p>
</div> -->
<!-- 结构3 -->
<div>
<span>测试</span>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p>孙七：58分</p>
<p>老八：48分</p>
<span>测试1</span>
</div>
</body>
</html>（4）结构伪类3（了解）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>结构伪类</title>
<style>
/* 选中div中倒数第n个的儿子p元素（按照所有兄弟）
--看结构1：孙七被选中 */
/* div>p:nth-last-child(3) {
color: red;
} */
/* 选中div中倒数第n个的儿子p元素（按照所有同类型兄弟）
--看结构1：孙七被选中 */
/* div>p:nth-last-of-type(2) {
color: red;
} */
/* 选中的是没有兄弟的span元素
--看结构2：测试1变红 */
/* span:only-cild {
color: red;
} */
/* 选中的是没有同类型兄弟的span元素
--看结构2：测试1、2变红 */
/* span:only-of-type {
color: red;
} */
/* 选中的是html跟元素 */
/* :root {
color: red;
background-color: gray;
} */
/* 选中的是没有内容的div元素，空格也不行 */
div:empty {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- 结构1 -->
<!-- <div>
<span>测试1</span>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p>孙七：58分</p>
<p>老八：48分</p>
<span>测试2</span>
</div> -->
<!-- 结构2 -->
<!-- <div>
<span>测试1</span>
</div>
<div>
<span>测试2</span>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p>孙七：58分</p>
<p>老八：48分</p>
</div> -->
<!-- 结构3 -->
<div></div>
</body>
</html>（5）否定伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>否定伪类</title>
<!-- :not(选择器) 排除满足括号中条件的元素 -->
<style>
/* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
/* div>p:not(.fail) {
color: red;
} */
/* 选中的是div的儿子p元素，但是排除title属性以"你要加油啊"开头的 */
/* div>p:not([title^="你要加油"]){
color: red;
} */
/* 选中的是div的儿子p元素，但是排除第一个儿子p元素 */
div>p:not(:first-child) {
color: red;
}
</style>
</head>
<body>
<div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>赵六：68分</p>
<p class="fail" title="你要加油啊">孙七：58分</p>
<p class="fail" title="你要加油啊，老八">老八：48分</p>
</div>
</body>
</html>（4）UI伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>UI伪类</title>
<style>
/* 选中的是勾选的复选框或单选按钮 */
input:checked {
width:100px;
height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled {
background-color: blue;
}
/* 选中的是可用的input元素 */
input:enabled {
background-color: green;
}
</style>
</head>
<body>
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>
</body>
</html>（5）目标伪类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>目标伪类</title>
<style>
div {
background-color: gray;
height: 300px;
}
/* 选中锚点所指向的元素 */
div:target {
background-color: green;
}
</style>
</head>
<body>
<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>
<a href="#three">去看第3个</a>
<a href="#four">去看第4个</a>
<a href="#five">去看第5个</a>
<a href="#six">去看第6个</a>
<div id="one">第1个</div>
<br>
<div id="two">第2个</div>
<br>
<div id="three">第3个</div>
<br>
<div id="four">第4个</div>
<br>
<div id="five">第5个</div>
<br>
<div id="six">第6个</div>
<br>
</body>
</html>（6）语言伪类
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 默认语言是zh-CN -->
<head>
<meta charset="UTF-8">
<title>语言伪类</title>
<!-- 根据指定的语言选择元素（本质是看lang属性的值） -->
<style>
p:lang(en) {
color: green;
}
:lang(zh-CN) {
color: rebeccapurple;
}
</style>
</head>
<body>
<div>前端</div>
<div>巴适</div>
<p lang="en">CSS</p>
<p lang="en">好的</p>
<!-- span默认语言是zh-CN -->
<span>你好</span>
</body>
</html>15、伪元素选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<!-- 伪元素，是元素中的一些特殊位置，不是元素（element） -->
<style>
/* 选中的是div中的第一个文字 */
div::first-letter {
color: red;
font-size: 40px;
}
/* 选中的是div中的第一行文字 */
div::first-line {
background-color: yellow;
}
/* 选中的是div中被鼠标选择的文字 */
div::selection {
background-color: green;
color: orange;
}
/* 选中的是input元素中的提示文字 */
input::placeholder {
color: skyblue;
}
/* 选中的是p元素最开始的位置，随后创建一个子元素 */
/* 鼠标选不中￥和.00 */
p::before {
content: "￥";
}
/* 选中的是p元素最后的位置，随后创建一个子元素 */
p::after {
content: ".00";
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum nostrum ipsam reiciendis! Illo fugit neque ipsum error, accusantium iste saepe eligendi voluptas officiis ipsam ratione doloremque sapiente voluptates excepturi, voluptatum officia vitae nobis aspernatur dolor asperiores vel inventore temporibus debitis voluptatibus. Natus quas et odit suscipit. Eum dolores corrupti ex aut officiis alias repellat. In magni modi obcaecati molestias ipsum.</div>
<br>
<input type="text" placeholder="请输入您的用户名">
<p>199</p>
<p>299</p>
<p>399</p>
<p>499</p>
</body>
</html>效果：
16、选择器优先级
通过不同的选择器，选中相同的元素（如：h2），并且为相同的样式名（如：color）设置不同的值时，就发生了样式的冲突，到底应用那个样式，此时需要看优先级
1、同类型的选择器，后写的会覆盖先写的
2、元素选择器（如：h2）的优先级大于通配选择器（*）
3、类选择器（如：class="slogan" .slogan {}） > 元素选择器
4、id选择器 (如：#slogan{}) > 类选择器
注意：行内样式优先级大于选择器优先级
行内 > id选择器 > 类选择器 > 元素选择器 > 通配选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选择器优先级</title>
<style>
/* 如何比较以下写法的优先级：从权重和比较方面 */
/* 权重：
格式：(a,b,c)
a:ID选择器的个数
b:类、伪类、属性 选择器的个数
c:元素、伪元素 选择器的个数
*/
/* 比较：从a开始比，一旦不是相等，而是出现一个更大，则更大的那个权重更大，即优先级更高
如：写法1和2 的a相等，而b1>b2，所c不用再比较，写法1的权重大，优先级更高 */
/* 注意：
1、若权重相同，则后写的会覆盖先写的
2、鼠标放在选择器上，vscode已经算好
3、本节知识点是排查问题的思考方向
*/
/* 行内 > id选择器(1,0,0) > 类选择器(0,1,0) > 元素选择器(0,0,1) > 通配选择器(0,0,0) */
/* 权重：(2,0,0) */
#test #xuexi {
color: purple;
}
/* 权重：(1,0,0) */
#xuexi {
color: orange;
}
/* 需求1：使得第一个span的内容前端学习的字体为红色 */
/* 写法1：(0,2,1) */
.container span.qianduan {
color: red;
}
/* 前端学习的字体为绿色 */
/* 写法2 (0,1,3)*/
div>p>span:nth-child(1) {
color: green;
}
/* 写法2.0 (0,1,3) */
/* div>p>span:first-child {
color: blue;
} */
/* 优先级最高 */
.qianduan {
color: aqua !important;
}
</style>
</head>
<body>
<div class="container" id="test">
<p>
<span class="qianduan" id="xuexi" style="color: bisque;">前端学习</span>
<span>目前进度：CSS</span>
</p>
</div>
</body>
</html>效果：
17、CSS三大特性
层叠性、继承性、优先级
（1）层叠性：
概念：如果发生了样式冲突。就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。
样式冲突：元素的同一个样式名（如：color），被设置了不同的值（如：red、green）
注意：权重相同时考虑顺序，否则看权重，如以下示例看权重，若index.css文件中写的是
h2 { color: red;}，内部样式与外部样式同级，则看顺序。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS三大特性</title>
<link rel="stylesheet" href="./index.css">
<!-- index.css中代码：
#qianduan {
color: red;
}
-->
<style>
h2{
color: green;
}
</style>
</head>
<body>
<h2 id="qianduan">前端学习</h2>
</body>
</html>效果：
（2）继承性
概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
注意：可在MDN查看是否可以继承
规则：优先继承离得近的
常见的可继承的属性：
text-？？，font-？？，line-？？，color
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS三大特性</title>
<style>
div {
color: red;
font-size: 40px;
/* 不能继承的样式，由于子代无背景色，而又div包裹，所以整块区域还是蓝色 */
background-color: skyblue;
}
p {
color: purple;
}
</style>
</head>
<body>
<!-- 体现父元素和祖先元素 -->
<div>
我是div中的文字
<!-- 以下span三个离div近，继承红色 -->
<span>我是span中的文字1</span>
<span>我是span中的文字2</span>
<span>我是span中的文字3</span>
<p>
<!-- 以下span离p近，离div远，继承紫色 -->
<span>我是span中的文字4</span>
</p>
</div>
</body>
</html>效果：
（3）优先级
!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式
注意：需要计算权重，计算权重时，并集选择器的每一个部分是分开算的，如：div,p,span{} 权重为：（0，0，1）
18、CSS像素(px)
（1）、相对单位
（2）、像素点越小，呈现的图片越清晰
（3）、在人眼可见范围内，适配电脑屏幕，尽可能精细
（4）、注意：若电脑开了缩放，则截图工具所获得的像素是vscode中配置像素的（如：下图：2倍）几倍（现在不怎么见）
19、CSS颜色表示
共有四种表示
（1）颜色名
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS颜色表示</title>
<style>
.qianduan {
/* 第一种表示方式：颜色名
缺点：有限，不精确
具体颜色名参考MDN官方文档
*/
color: red;
}
</style>
</head>
<body>
<h2 class="qianduan">前端CSS</h2>
</body>
</html>（2）rgb与rgba
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS颜色表示</title>
<style>
.qianduan1 {
/* 第二种表示方式：rgb
怎样知道一种颜色的rgb:
1、取色器：FastStone Capture
2、设计图就有
*/
color: rgb(255, 0, 0);
/* 注意：若三种颜色的值相同，则呈现灰色，值越大，灰色越浅 */
}
/*
也可使用百分比，但是不能混着用
.qianduan {
color: rgb(100%,0%,0%);
} */
.qianduan2 {
/* rgba:其中a控制的是透明度，范围0~1
前三位的rgb形式要保持一致、要么数字要么百分比，透明度则随意
*/
color: rgba(255, 0, 0, 0.5);
/* color: rgba(255, 0, 0, 50%); */
}
</style>
</head>
<body>
<h2 class="qianduan1">前端CSS,day1</h2>
<h2 class="qianduan2">前端CSS,day2</h2>
</body>
</html>（3）HEX与HEXA
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS颜色表示</title>
<style>
.qianduan1 {
/* 第三种表示方式：HEX（十六进制）（字母不区分大小写）
范围：00-ff
HEXA:A为透明度；范围：00-ff(IE浏览器不支持，但支持HEX)
注意：若两两重复，则可简写，如：
color: #ffccdd;可简写为color: #fcd;（此时透明度也简写，范围：0~f）
*/
color: #ff0000;
}
.qianduan2 {
color: #00ff0034;
/* color: #fcd; */
}
</style>
</head>
<body>
<h2 class="qianduan1">前端CSS,day1</h2>
<h2 class="qianduan2">前端CSS,day2</h2>
</body>
</html>（4）HSL与HSLA
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS颜色表示</title>
<style>
.qianduan1 {
/* 第四种表示方式：HSL
hsl(hue色相, saturation饱和度, lightness亮度)
色相：用角度表示,默认0deg(0°)（deg可省略）范围：0~360度
饱和度：范围：0%~100%（灰色加满~彩色）（参入灰色）
亮度：范围：0%~100%（黑色~白色）
hsla:a透明度，范围：0~1，可小数可百分比
*/
color: hsl(0deg, 100%, 50%);
}
.qianduan2 {
color: hsl(0, 100%, 50%,0.5);
/* color: #fcd; */
}
</style>
</head>
<body>
<h2 class="qianduan1">前端CSS,day1</h2>
<h2 class="qianduan2">前端CSS,day2</h2>
</body>
</html>20、CSS常用字体属性
（1）字体大小
属性名：font-size (具有继承性)
语法：div {
font-size: 40px;
}
注意：
1、Chrome浏览器默认的文字大小为16px，且0px会自动消失（位置：设置——外观——自定义字体）
2、不同浏览器默认的字体大小可能不一致，所以最好给一个明确值，不要用默认大小，
3、通常以给body设置font-size属性，这样body中的其他元素可以继承
3、控制台可查看更改样式，但只是临时的
（2）字体族
属性名:font-family
1、衬线字体：特点：横竖撇捺明显 eg: 宋体
2、非衬线字体：特点：没有棱角（顿笔）eg:微软雅黑
语法：div{
font-family: "STCaiyun",“Microsoft YaHei”，sans-serif;
}
注意：
1、使用字体英文名字兼容性更好字体英文名可百度查询或电脑设置中找
2、若字体名包含空格，需使用引号包裹起来
3、可设置多个字体、按照从左到右逐个查找，直到找到可用的就停止，通常在最后写上serif（衬线字体）或 sans-serif（非衬线字体）
4、windows系统中，默认字体就是微软雅黑
（3）字体风格
属性名：font-style
（字体是倾斜还是不倾斜）
常用值：
（1）mormal 默认值
（2）italic(推荐) 、 oblique斜体
注意：标签em也是具有倾斜效果，但语义更重要
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体风格</title>
<style>
.qianduan1 {
font-size: 100px;
font-style: normal;
}
.qianduan2 {
font-size: 100px;
font-style: italic;
}
.qianduan3 {
font-size: 100px;
font-style: oblique;
}
em {
font-size: 100px;
}
</style>
</head>
<body>
<div class="qianduan1">学前端1</div>
<div class="qianduan2">学前端2</div>
<div class="qianduan3">学前端3</div>
<em>学前端4</em>
</body>
</html>效果：
（4）字体粗细
属性名：font-weight
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体粗细</title>
<style>
div {
font-size: 100px;
}
.qianduan1 {
/* 100-300 */
/* 细 */
font-weight: lighter;
}
.qianduan2 {
/* 400-500 */
/* 正常 */
font-weight: normal;
}
.qianduan3 {
/* 大于500 */
/* 粗 */
font-weight: bold;
}
.qianduan4 {
/* bolder有没有奏效，要看使用的是什么字体 */
/* 很粗：多数字体不支持 */
font-weight: bolder;
}
.qianduan5 {
/* 写数字的比较多 ，具体看字体设置时的精确程度*/
font-weight: 400;
}
</style>
</head>
<body>
<div class="qianduan1">学前端1</div>
<div class="qianduan2">学前端2</div>
<div class="qianduan3">学前端3</div>
<div class="qianduan4">学前端4</div>
<div class="qianduan5">学前端5</div>
</body>
</html>效果：
（5）字体复合属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体复合属性</title>
<!-- 注意：
1、有顺序上的要求
2、字体大小和字体族必须要写
3、要求字体族放在倒数第一位，字体大小放在倒数第二位，其他往前加
4、不同的值之间用空格隔开
-->
<style>
.qianduan1 {
font: bold italic 100px "STcaiyun","STHupo",sans-serif;
font-weight: lighter;
}
</style>
</head>
<body>
<div class="qianduan1">学前端1</div>
</body>
</html>效果：
（6）font-size细则
1、由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，也可能小
2、通常情况下，文字相对字体设计框，并不是垂直居中的，通常靠下一些
21、常用的文本属性
（1）文本颜色
属性名：color
可选值：
1、颜色名
2、rgb 或 rgba （常用）
3、HEX 或 HEXA （十六进制）（常用）
4、HSL 或 HSLA
（2）文本间距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本间距</title>
<style>
div {
font-size: 30px;
}
.qianduan2 {
/* 字母之间的间距：英文或汉字 */
letter-spacing: 20px;
}
.qianduan3 {
/* 单词之间的间距，对中文不起作用 通过空格识别单词*/
word-spacing: 20px;
}
/* 属性值为像素（px），正直让间距增大，负值让间距缩小 */
</style>
</head>
<body>
<div>Young you as ,kid folie.学前端1</div>
<div class="qianduan2">Young you as ,kid folie.学前端2</div>
<div class="qianduan3">Young you as ,kid folie.学前端3</div>
</body>
</html>效果：
（3）文本修饰
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本修饰</title>
<!-- 属性名： text-decoration -->
<style>
div {
font-size: 40px;
}
.qianduan1 {
/* 上划波浪线,颜色和线的样式可写一起且没有顺序上的要求 */
text-decoration: overline wavy;
}
.qianduan2 {
/* 下划红色波浪线 */
text-decoration: underline dotted red;
}
.qianduan3 {
/* 删除线 */
text-decoration: line-through;
}
.qianduan4 {
/* 没有装饰线 */
text-decoration: none;
}
.qianduan5 {
font-size: 40px;
text-decoration: none;
}
</style>
</head>
<body>
<br>
<div class="qianduan1">学前端1</div>
<div class="qianduan2">学前端2</div>
<div class="qianduan3">学前端3</div>
<div class="qianduan4">学前端4</div>
<a class="qianduan5" href="https://www.baidu.com">学前端5</a>
<ins>测试1</ins>
<del>测试2</del>
</body>
</html>效果：
（4）文本缩进
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本缩进</title>
<!--
属性名： text-indent
属性值：css中的长度单位，例如：px
-->
<style>
div {
font-size: 40px;
}
.qianduan1 {
/* 首行缩进 */
text-indent: 80px;
}
</style>
</head>
<body>
<div class="qianduan1">学前端1学前端1学前端1学前端1学前端1学前端1学前端1学前端1学前端1学前端1学前端1学前端1</div>
</body>
</html>（5）文本对齐_水平
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本对齐</title>
<!--水平：
属性名： text-align
属性值： left center right（常用）
-->
<style>
div {
font-size: 40px;
}
.qianduan1 {
/* 水平对其：left center right */
text-align: center;
background-color: orange;
}
</style>
</head>
<body>
<div class="qianduan1">学前端1</div>
</body>
</html>效果：
（6）行高
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行高</title>
<!-- 属性名：line-heigh -->
<style>
#d1 {
font-size: 40px;
background-color: skyblue;
/* 第一种写法，值为像素 */
/* line-height: 50px; */
/* 第二种写法，值为normal */
/* line-height: normal; */
/* 第三种写法（用的多），值为数值，如：font-size的1.5-2倍之间 */
/* line-height: 1.5; */
/* 第四种写法，值为百分比 */
line-height: 60px;
}
</style>
</head>
<body>
<div id="d1">atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发</div>
</body>
</html>效果：
（7）行高注意事项
1、行高过小——文字重叠，且最小值时0，不能为负数
2、行高是可以继承的，为了能更好呈现文字，最好写数值
3、line-height 和 height的关系
（1）设置了height，高度就是height的值
（2）没有设置height，高度就是line-height * 行数
4、行高的应用场景：
（1）调整多行文字的间距
（2）单行文字的垂直居中
（8）文本对齐_垂直
顶部：垂直方向上默认是在顶部
居中：对于单行文字，height = line-height即可
底部：后续提到
（9）vertical-align
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>vertical_align</title>
<!--
作用：用于控制元素在其所在那一行的垂直方向上的对齐方式
注意：
1、不能直接控制元素里的文字
2、不能控制块级元素
3、应用：可以控制单元格中内容的对齐方式
-->
<style>
div {
font-size: 100px;
height: 300px;
background-color: skyblue;
}
span {
font-size: 40px;
background-color: orange;
vertical-align: middle;
}
img {
height: 30px;
vertical-align: top;
}
.san {
vertical-align: top;
}
</style>
</head>
<body>
<div>
atguigu尚硅谷x<span>x前端</span>
</div>
<hr>
<div>
atguigu尚硅谷x<img src="../images/鞠婧祎8.4.jpg">
</div>
<hr>
<table border="1" cellspacing="0">
<caption>人员信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr height="200">
<td class="san">张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>12</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>22、列表相关的属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表相关属性</title>
<style>
ul {
/* 以下属性可以用在ul、ol、li 标签上 */
/* 列表符号样式 */
list-style-type: square;
/* 列表符号位置 */
list-style-position: outside;
/* 自定义列表符号 */
list-style-image: url("");
/* 复合属性:属性值间无顺序要求，空格间隔 */
list-style: decimal outside;
}
li {
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>《震惊！晚上下雨》</li>
<li>《一夜暴富指南》</li>
<li>《五条建议》</li>
</ul>
</body>
</html>效果：
23、表格相关属性
（1）边框相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>边框相关属性</title>
<!-- 通过css调整边框 -->
<style>
table {
/* border-width: 2px;
border-color: green;
border-style: solid; */
/* 简写 */
border: 2px green solid;
}
/* 并集选择器 */
td,th {
border: 2px orange solid;
}
/* 注意：边框相关的属性，不仅表格能用，其他也能用,盒子模型会详解 */
h2 {
border: 3px red solid;
}
span {
border: 3px purple dotted;
}
</style>
</head>
<body>
<h2>边框相关的属性，不仅表格能用，其他也能用</h2>
<span>学习前端</span>
<!-- border="1"此通过HTML属性调整边框 -->
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
<td>女</td>
<td>团员</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
<td>男</td>
<td>群众</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>21</td>
<td>女</td>
<td>党员</td>
</tr>
</tbody>
</table>
</body>
</html>效果：
（2）表格独有属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格独有属性</title>
<!-- 注意：
1、宽行和跨列只能通过HTML提供的rowspan 和 colspan 属性，无法通过css实现
-->
<style>
table {
border: 2px green solid;
width: 500px;
/* 以下是表格独有属性，只能放在表格标签<table>中使用 */
/* 控制表格的列宽 */
table-layout: fixed;
/* 控制单元格间距（生效的前提不能合并边框） */
border-spacing: 2px;
/* 合并相邻的单元格的边框,则单元格之间的间距失效 */
border-collapse: collapse;
/* 隐藏没有内容的单元格 （生效的前提不能合并边框）*/
empty-cells: hide;
/* 设置表格标题的位置 */
caption-side: top;
}
td,th {
border: 2px orange solid;
}
.number {
width: 50px;
height: 35px;
}
</style>
</head>
<body>
<table>
<caption>人员信息</caption>
<thead>
<tr>
<th class="number">序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>党员</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
<td>女</td>
<td>团员</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
<td></td>
<td>群众</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>21</td>
<td>女</td>
<td>党员</td>
</tr>
</tbody>
</table>
</body>
</html>效果：
24、背景相关属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景相关属性</title>
<style>
div {
width: 400px;
height: 400px;
border: 2px black solid;
font-size: 40px;
/* 设置背景颜色 默认值是transparent*/
/* background-color: skyblue; */
/* 设置背景图片 */
/* 注意背景颜色被图片覆盖，文字在图片上方 */
/* background-image: url("../images/鞠婧祎8.14.jpg"); */
/* background-image: url("../images/鞠婧祎8.4.jpg"); 图片比较大*/
/* 设置背景背景图片的重复方式 */
/* background-repeat: no-repeat; */
/* 控制背景图片的位置-第一种写法 */
/* background-position: center; */
/* 控制背景图片的位置-第二种写法 */
/* background-position: 200px 159px; */
/* 复合属性:不挑个数不挑顺序 */
background: skyblue url("../images/鞠婧祎8.14.jpg") no-repeat 200px 159px;
}
</style>
</head>
<body>
<div>你好啊</div>
</body>
</html>效果：
25、CSS鼠标相关的属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>鼠标相关属性</title>
<!-- 属性名：cursor -->
<style>
div {
width: 400px;
height: 400px;
background-color: skyblue;
/* 自定义鼠标样式，图片大小不能超过30*30px,才奏效 */
cursor: url("../images/鞠婧祎8.140.png"),pointer;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<div>
把鼠标放进来看看
<input type="text">
<a href="">baidu</a>
<button>点击</button>
</div>
</body>
</html>26、CSS盒（子）模型
（1）CSS中常用的长度单位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>常用的长度单位</title>
<style>
html {
font-size: 40px;
}
#d1 {
/* 第一种长度单位：px(像素) */
width: 200px;
height: 200px;
font-size: 20px;
background-color: skyblue;
}
#d2 {
/* 第二种长度单位：em(相对于当前元素或其父元素的font-size的倍数 1em = 1 * font-size) */
width: 10em;
height: 10em;
/* 若没有设置font-size，则往祖先元素找，否则采用浏览器默认的font-size
font-size: 1em;则换算关系为 1em = 1*祖先元素的font-size */
font-size: 20px;
background-color: orange;
}
#d3 {
/* 第三种长度单位：rem(相对于根元素(html 默认是16px)的倍数） */
width: 5rem;
height: 5rem;
font-size: 20px;
background-color: green;
}
#d4 {
/* 第四种长度单位 */
width: 200px;
height: 200px;
font-size: 20px;
background-color: gray;
}
.inside {
/* 第四种长度单位，相对其父元素的百分比 */
width: 50%;
height: 25%;
font-size: 150%;
background-color: orange;
}
.test {
font-size: 20px;
text-indent: 2em;
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">1</div>
<hr>
<div id="d2">2</div>
<hr>
<div id="d3">3</div>
<hr>
<div id="d4">
<div class="inside">4</div>
</div>
<hr>
<div class="test">好好学习，天天向上</div>
</body>
</html>效果：
(2)元素的显示模式
块元素：
又称块级元素 eg:div / html / body / h1 ~ h6 / p
1、独占一行，是从上到下排列
2、默认宽度是撑满整个父元素
3、默认高度：由内容撑满
4、可以通过css设置宽高
行内元素：
又称内联元素 eg:span
1、不独占一行，一行中不能容纳下的行内元素，就在下一行从左到右排列
2、默认宽度和高度由内容撑开
3、无法通过css设置宽高
行内块元素：
又称：内联块元素 eg:img
1、不独占一行，一行中不能容纳下的行内元素，就在下一行从左到右排列
2、默认宽度和高度由内容撑开
3、可以通过css设置宽高
(3)修改元素的显示模式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>修改元素的显示模式</title>
<!-- 属性名：display
可选值：
1、none ：元素会被隐藏
2、block：元素作为块级元素显示
3、inline：元素作为内联元素显示
4、inline-block：元素作为行内块元素显示
-->
<style>
div {
width: 200px;
height: 200px;
font-size: 20px;
display: inline-block;
}
#d1 {
background-color: skyblue;
}
#d2 {
background-color: orange;
}
#d3 {
background-color: green;
}
a {
width: 200px;
height: 200px;
font-size: 20px;
display: block;
}
#s1 {
/* 整块蓝色区域都是超链接，点击后均可跳转到百度 */
background-color: skyblue;
}
#s2 {
background-color: orange;
}
#s3 {
background-color: green;
}
</style>
</head>
<body>
<div id="d1">你好1</div>
<div id="d2">你好2</div>
<div id="d3">你好3</div>
<hr>
<a id="s1" href="">去百度</a>
<a id="s2" href="">去头条</a>
<a id="s3" href="">去京东</a>
</body>
</html>效果：
(4)盒子模型的组成部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子模型的组成部分</title>
<!-- CSS会把所有的HTML元素都看出一个盒子，所有样式也都基于此 -->
<!-- 盒子大小 = content + 左右padding + 左右border -->
<style>
div {
/* 以下设置的宽高是内容区的宽高 */
width: 400px;
height: 400px;
/* 内边距（补白区）,加上后整体变大 */
padding: 20px;
/* 边框 */
border: 10px dashed black;
/* 外边距:只能影响盒子的位置，不影响大小 */
margin: 50px;
font-size: 20px;
/* 背景色可以填充内容区、内边距区、边框区域 */
background-color: gray;
}
</style>
</head>
<body>
<div>你好呀</div>
</body>
</html>效果：
(5)盒子的内容区_content
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子的内容区_content</title>
<style>
div {
width: 800px;
/* 最大宽度和最小宽度一般不和width一起使用 */
/* min-width: 600px; */
/* max-width: 800px; */
height: 200px;
/* 最大高度和最小高度一般不和height一起使用 */
/* min-height: 50px; */
/* max-height: 400px; */
background-color: skyblue;
}
</style>
</head>
<body>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate, placeat?</div>
</body>
</html>(6)默认宽度
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>默认宽度</title>
<!-- 不设置width属性时，元素所呈现出来的宽度
此时：总宽度 = 父的content - 自身左右margin
内容区的宽度 = 父的content - 自身左右margin - 自身左右border - 自身左右padding -->
<style>
div {
/* 以下操作的前提均是没有给盒子设置宽度width */
/* body默认宽度：1424 */
height: 200px;
/* 加上margin后盒子宽度变为：1307 */
margin: 50px;
/* 加上border后，使得内容区宽度更小：1297 */
border: 5px solid black;
/* 加上padding后，内容区为：1197 */
padding: 50px;
background-color: gray;
}
</style>
</head>
<body>
<div>你好呀</div>
</body>
</html>效果：
(7)盒子的内边距_padding
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子的内边距_padding</title>
<!--
注意：
1、padding不能为负数
2、行内元素的左右内边距没问题，但上下内边距能够设置，但可能不占位，
若下面有元素会重叠，但对于块元素和行内块元素则都没问题
-->
<style>
#d1 {
width: 400px;
height: 400px;
/* 左侧的内边距 */
/* padding-left: 20px; */
/* 上侧的内边距 */
/* padding-top: 30px; */
/* 右侧内边距 */
/* padding-right: 40px; */
/* 底部内边距 */
/* padding-bottom: 50px; */
/* 复合属性:写一个值，四个方向的内边距是一样的 */
/* padding: 20px; */
/* 复合属性：写两个值，上下，左右 */
/* padding: 10px 20px; */
/* 复合属性：写三个值，上，左右，下 */
/* padding: 10px 20px 30px; */
/* 复合属性：写四个值,上、右、下、左 */
/* padding: 10px 20px 30px 40px; */
background-color: skyblue;
}
span {
background-color: orange;
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
img {
width: 200px;
padding: 50px;
}
</style>
</head>
<body>
<div id="d1">你好呀</div>
<hr>
<span>我很好</span>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, laudantium.</div>
<!-- 行内块元素 -->
<img src="../images/鞠婧祎8.4.jpg" alt="">
<div>鞠婧祎</div>
</body>
</html>效果：
(8)盒子的边框_border
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子的边框_border</title>
<!-- 边框相关属性共有20个 -->
<style>
#d1 {
width: 400px;
height: 400px;
background-color: skyblue;
/* 指四边的边宽宽度 */
/* border-width: 10px; */
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;
/* 指四边边框的颜色 */
/* border-color: red; */
border-left-color: red;
border-right-color: orange;
border-top-color: green;
border-bottom-color: purple;
/* 指四边边框的样式 */
/* border-style: dotted; */
border-left-style: solid;
border-right-style: dashed;
border-top-style: double;
border-bottom-style: dotted;
/* border-width: 10px;
border-color: red;
border-style: dotted; */
border-left: 50px purple solid;
border-right: 60px orange dashed;
border-top: 70px green double;
border-bottom: 80px gray dotted;
/* border: 10px solid red; */
}
</style>
</head>
<body>
<div id="d1">你好呀</div>
</body>
</html>效果：
(9)盒子的外边距_margin
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子的外边距_margin</title>
<style>
#d1 {
width: 400px;
height: 400px;
/* 四边的外边距 */
/* margin: 50px; */
/* margin-left: 10px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 40px; */
/* margin: 50px; */
/* margin: 10px 20px; */
/* margin: 10px 20px 30px; (上 左右 下)*/
margin: 10px 20px 30px 40px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="d1">你好呀</div>
</body>
</html>效果：
(10)margin的注意事项
1、注意事项1
子元素的margin是参考父元素的content计算的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin的注意事项1</title>
<style>
.outer {
width: 400px;
height: 400px;
padding: 50px;
background-color: gray;
}
.inner {
width: 100px;
height: 100px;
margin: 100px;
background-color: orange;
}
</style>
</head>
<body>
<!-- 子元素的margin是参考父元素的content计算的 -->
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>效果：
2、注意事项2
上margin、左margin会影响自身的位置，下margin、右margin会影响兄弟元素的位置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin的注意事项2</title>
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: skyblue;
}
.box2 {
background-color: orange;
margin-top: 50px;
margin-bottom: 50px;
}
.box3 {
background-color: green;
}
.second {
margin-left: 50px;
margin-right: 50px;
}
</style>
</head>
<body>
<!-- 上margin、左margin会影响自身的位置，下margin、右margin会影响兄弟元素的位置 -->
<!-- 三个块元素 -->
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<hr>
<!-- 三个行内块元素 -->
<img width="200" src="../images/鞠婧祎8.4.jpg" alt=""><img class="second" width="200" src="../images/鞠婧祎8.4.jpg" alt=""><img width="200" src="../images/鞠婧祎8.4.jpg" alt="">
</body>
</html>效果：
3、注意事项3
对于行内元素，左右的margin是可以完美设置的，上下的margin设置后是无效的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin的注意事项</title>
<style>
#d1 {
width: 100px;
height: 100px;
margin: 50px;
background-color: deepskyblue;
}
img {
width: 200px;
margin: 50px;
}
.one {
background-color: skyblue;
}
.two {
background-color: orange;
margin-left: 50px;
margin-right: 50px;
margin-top: 3000px;
margin-bottom: 3000px;
}
.three {
background-color: green;
}
</style>
</head>
<body>
<!-- 对于行内元素，左右的margin是可以完美设置的，上下的margin设置后是无效的 -->
<!-- 块级元素 -->
<div id="d1">我是一个块级元素</div>
<div>我是一段文字</div>
<hr>
<!-- 行内块元素 -->
<img src="../images/鞠婧祎8.4.jpg" alt="">
<hr>
<!-- 行内元素 -->
<span class="one">人之初</span><span class="two">性本善</span><span class="three">性相近</span>
</body>
</html>效果：
4、注意事项4
margin的值也可以是auto，给一个块级元素作用margin设置auto可以实现该元素在其父元素内水平居中
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin的注意事项4</title>
<style>
div {
width: 800px;
height: 100px;
/* 尽可能里视口左边最远 */
/* margin-left: auto; */
/* 再加上以下margin-right，则水平居中 */
/* margin-right: auto; */
/* 以下对于上下不起作用 */
/* margin-top: auto;
margin-bottom: auto; */
margin: 0 auto;
background-color: deepskyblue;
}
span {
background-color: purple;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- margin的值也可以是auto，给一个块级元素作用margin设置auto可以实现该元素在其父元素内水平居中 -->
<!-- 块级元素 -->
<div>你好呀</div>
<!-- 行内元素 -->
<span>好好学习</span>
</body>
</html>效果：
5、注意事项5
margin的值可以是负值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin的注意事项5</title>
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: skyblue;
}
.box2 {
margin-top: -100px;
background-color: orange;
}
</style>
</head>
<body>
<!-- margin的值可以是负值 -->
<div class="box box1">1</div>
<div class="box box2">2</div>
</body>
</html>效果：
(11)margin塌陷问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin塌陷问题</title>
<!-- 第一个子元素的上margin会作用在父元素上，最后一个子元素的下margin会作用在父元素上 -->
<style>
.outer {
width: 400px;
/* height: 400px; */
background-color: gray;
/* 解决方案一：给父元素设置宽度不为0的boeder */
/* border: 1px solid red; */
/* 解决方案二 给父元素设置不为0的padding：*/
/* padding: 1px; */
/* 解决方案三：没有影响父容器大小 */
/* 溢出之后的显示模式，hidden隐藏 */
overflow: hidden;
}
.inner1 {
width: 100px;
height: 100px;
background-color: orange;
/* 下面这行代码有问题 ：margin塌陷问题*/
margin-top: 50px;
}
.inner2 {
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1">inner1</div>
<div class="inner2">inner2</div>
</div>
<div>我是一段测试文字</div>
</body>
</html>塌陷问题效果图：
解决塌陷问题后的效果图：
(12)margin合并问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>margin合并问题</title>
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: deepskyblue;
margin-bottom: 50px;
}
.box2 {
background-color: orange;
margin-top: 60px;
/* 解决合并问题，但会影响其他内容 */
/* float: left; */
}
.test {
width: 200px;
height: 200px;
display: inline-block;
}
.testa {
background-color: purple;
margin-right: 50px;
}
.testb {
background-color: tomato;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<hr>
<div class="test testa">a</div>
<div class="test testb">b</div>
</body>
</html>效果：
27、处理内容溢出
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>处理内容溢出</title>
<style>
#d1 {
width: 400px;
height: 200px;
background-color: skyblue;
/* 解决:值:hidden visible(默认) scroll auto（常用） */
overflow: auto;
/* 不推荐 */
/* overflow-x: hidden;
overflow-y: scroll; */
}
#d2 {
width: 1000px;
background-color: orange;
}
</style>
</head>
<body>
<!-- 纵向溢出 -->
<div id="d1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum voluptatibus autem laboriosam qui? Nisi
beatae ullam laborum temporibus aspernatur numquam accusamus fuga magnam sunt alias possimus magni, a quaerat
<div id="d2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus consequuntur quisquam iste assumenda modi autem mollitia, non consectetur facere cupiditate animi similique qui voluptas molestias, et, incidunt officia. Exercitationem cupiditate labore dicta enim, quaerat tempore nihil assumenda consequatur illum, sapiente repellendus quam officia accusantium. Nisi, iure soluta. Quia, necessitatibus doloribus.</div>
minima incidunt, deserunt fugiat voluptate sapiente labore dolor! Ratione perferendis molestiae reprehenderit
aperiam expedita iste explicabo, ipsam, fuga vitae aspernatur inventore beatae dolorem et. Molestiae alias odio
veniam odit temporibus fugit neque sit ut corporis molestias cupiditate porro beatae ex doloribus non eveniet,
distinctio in. Expedita magni dignissimos, quasi ipsam ea odit mollitia nobis cupiditate similique animi
repellat assumenda, magnam eum fugiat exercitationem asperiores nihil nisi numquam vel dolores repudiandae
incidunt.
</div>
</body>
</html>效果：
28、隐藏元素的两种方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>隐藏元素的两种方式</title>
<!--
方式一: display: none; (不占位)
方式二: visibility: hidden; (占位)
-->
<style>
.box {
width: 200px;
height: 200px;
}
.box1 {
background-color: skyblue;
/* display: none; */
visibility: hidden;
}
.box2 {
background-color: orange;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
</body>
</html>visibility效果：
display效果：
29、样式的继承
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>样式的继承</title>
<!--
会继承的css属性: 字体属性 文本属性(vertical-align除外) 文字颜色等(不影响布局)
不会继承的:边框 背景 内外边距 宽高 溢出方式等
-->
<style>
body {
/* font-size: 40px;
color: yellow;
font-weight: bold; */
}
#d1 {
height: 600px;
padding: 50px;
background-color: gray;
/* font-size: 40px;
color: yellow;
font-weight: bold; */
}
#d2 {
height: 400px;
padding: 50px;
background-color: orange;
font-size: 40px;
color: yellow;
font-weight: bold;
}
#d3 {
height: 200px;
background-color: green;
/* font-size: 40px;
color: yellow;
font-weight: bold; */
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3" style="font-family: 隶书;">你好呀</div>
</div>
</div>
</body>
</html>
效果：
30、CSS元素的默认样式
<!-- user agent stylesheet -->
<!-- a \ h1~h6 \ p \ ul \ ol \ body -->
<!-- 要改变默认样式,要专门写选择器 -->
注意优先级：
元素默认样式>继承样式，所以如果要重置元素的默认样式，一定要选择器到该元素
31、CSS布局小技巧
注意：
（1）效果1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>布局小技巧1</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
overflow: hidden;
}
.inner {
width: 200px;
height: 100px;
/* padding: 5px;
border: 5px solid;
margin-top: 140px;*/
background-color: orange;
margin: 0 auto;
margin-top: 150px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">inner</div>
</div>
</body>
</html>（2）效果2
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>布局小技巧2</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
text-align: center;
line-height: 400px;
}
.inner {
background-color: orange;
font-size: 20px;
}
</style>
</head>
<body>
<div class="outer">
<!-- 行内元素 -->
<span class="inner">你好呀</span>
</div>
</body>
</html>（3）效果3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>布局小技巧3</title>
<style>
.outer {
width: 400px;
height: 400px;
background-color: gray;
text-align: center;
line-height: 400px;
/* 消除父元素文字对子元素图片影响 */
font-size: 0px;
}
img {
vertical-align: middle;
}
span {
font-size: 40px;
vertical-align: middle;
background-color: orange;
}
</style>
</head>
<body>
<div class="outer">
<span>你好呀</span>
<img width="84px" src="../images/鞠婧祎8.4.jpg" alt="">
</div>
</body>
</html>32、CSS 元素之间的空白问题
解决前：
解决后
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素间的空白问题</title>
<!--
原因:行内元素\行内块元素,彼此之间的换行会被浏览器解析为一个空白字符
解决:(1)去掉换行和空格(不推荐)
(2)给父元素设置font-size:0,再给需要显示文字的元素单独设置字体大小
-->
<style>
div {
height: 200px;
background-color: gray;
font-size: 0;
}
.s1 {
background-color: skyblue;
}
.s2 {
background-color: orange;
}
.s3 {
background-color: green;
}
span {
font-size: 20px;
}
</style>
</head>
<body>
<div>
<!-- 有缝隙的原因是span行内元素换行了 -->
<span class="s1">人之初</span>
<span class="s2">性本善</span>
<span class="s3">性相近</span>
<hr>
<img width="100px" src="../images/鞠婧祎8.4.jpg" alt="">
<img width="100px" src="../images/鞠婧祎8.4.jpg" alt="">
<img width="100px" src="../images/鞠婧祎8.4.jpg" alt="">
</div>
</body>
</html>33、行内块的幽灵空白问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行内块的幽灵空白问题</title>
<!--
产生原因：行内块元素与文本的基线对齐，文文本基线与文本最低端有一定距离
-->
<style>
div {
width: 600px;
background-color: skyblue;
font-size: 0;
}
img {
height: 200px;
/* 解决方式一：图片旁有文字 */
/* vertical-align: bottom;或 top 或 middle 但不能是默认的baseline */
/* 解决方式二：父元素只有一张图片且旁没有文字 */
/* display: block; */
/* 解决方案三：给父元素设置 font-size：0； */
}
</style>
</head>
<body>
<div>
<img src="../images/鞠婧祎8.4.jpg" alt="">
</div>
</body>
</html>34、CSS浮动简介
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动_简介</title>
<!-- 最初，浮动用来实现文字环绕图片效果，现在浮动是主流的页面布局方式之一 -->
<style>
div {
width: 600px;
height: 400px;
background-color: skyblue;
}
img {
width: 200px;
/* 文字环绕图片 */
float: right;
/* margin-right: 0.5em; */
}
.test::first-letter {
font-size: 80px;
/* 文字环绕文字 */
float: left;
}
</style>
</head>
<body>
<div>
<img src="../images/鞠婧祎8.4.jpg" alt="">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum non eveniet vitae tenetur, debitis quibusdam dolores deserunt, itaque sunt atque, doloribus consectetur mollitia iusto ut doloremque enim assumenda quae ratione hic magnam quis reprehenderit. Ratione fuga laudantium voluptas quam neque cumque accusamus debitis recusandae sed nesciunt officia molestiae voluptatem facere et, nobis magni ab praesentium dolorem vitae doloribus ex! Quas recusandae magni aliquam dolorum, eum rerum quos omnis libero tempore facilis sit mollitia impedit temporibus? Voluptate recusandae animi culpa quia voluptas illum sed doloremque temporibus earum praesentium accusamus reprehenderit omnis voluptatem est, molestias minima a cupiditate repellendus eaque eos ratione.
</div>
<hr>
<div class="test">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, vitae architecto esse nulla minus est cumque consectetur repellat ipsam aliquam, nobis quod nisi unde tempore nam tempora accusamus sit totam consequatur. Deleniti, incidunt fugit expedita quisquam eveniet eos magnam optio repellat dolores reiciendis! Iure culpa quam porro, reiciendis et, nemo repudiandae provident error unde laudantium quos minus. Dolorum optio neque autem quos numquam quae veritatis voluptate culpa eveniet nulla dolores est, quo labore quisquam rem molestiae officiis a eaque minima voluptates! Excepturi, qui unde sunt ullam eum libero fuga illum animi rem, veniam tenetur dolorem necessitatibus voluptas amet, consequatur ipsam?
</div>
</body>
</html> 
35、CSS元素浮动后的特点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素浮动后的特点</title>
<!--
1、元素浮动后是脱离文档流
2、元素浮动后宽与高是由内容撑开，但可以另外设置宽高
3、元素浮动后可以与其他元素共用一行
4、浮动后的元素四个方向的margin、padding能够完美设置，不会有margin合并和塌陷问题
5、浮动后的元素不会被当作文本处理（即没有行内块空白问题）
-->
<style>
.outer {
width: 800px;
height: 400px;
padding: 10px;
background-color: gray;
/* 特点5 :盒子1和3水平居中但2不会*/
text-align: center;
}
.box {
font-size: 20px;
padding: 10px;
}
.box1 {
background-color: skyblue;
}
.box2 {
background-color: orange;
float: left;
/* 特点2 */
/* width: 200px;
height: 200px; */
/* 特点4 */
/* margin-left: 20px;
margin-right: 20px;
margin-top: 20px; */
}
.box3 {
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">盒子1</div>
<div class="box box2">盒子2</div>
<div class="box box3">盒子3</div>
</div>
</body>
</html>效果：
36、CSS浮动练习
（1）练习1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素浮动练习1</title>
<style>
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
}
.box1 {
float: right;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>（2）练习2
.box1 {
float: left;
}（3）练习3
<style>
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
float: left;
}
/* .box1 {
float: left;
} */
</style>（4）练习4
<style>
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
}
.box {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
float: left;
}
/* .box1 {
float: left;
} */
</style>（5）练习5
<style>
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
}
.box {
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
margin: 10px;
float: left;
}
/* .box1 {
float: left;
} */
.box1 {
height: 230px;
}
</style>36、 CSS浮动后的影响
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素浮动后的影响</title>
<!--
1、若父亲有兄弟元素，则其会浮在盒子123的下方
2、对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的后面，对前面的兄弟元素无影响
3、对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷，但父元素的宽度依然束缚浮动的元素
-->
<style>
.outer {
width: 500px;
background-color: gray;
/* 父元素加了边框，解决了父元素会抢第一个子元素的margin-top和最后一个子元素的margin-bottom的问题 */
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px;
border: 1px solid black;
}
.box1,
.box2,
.box3 {
float: left;
}
</style>
</head>
<body>
<div class="outer">
<!-- 整个一行是盒子0 撑开 -->
<div class="box box0">0</div>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<!-- 影响3:盒子4在盒子1背后但文字被甩出 -->
<!-- <div class="box box4">4</div> -->
</div>
<!-- 影响2 -->
<!-- <div style="background-color: orange;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi qui, vero illum, nisi voluptates recusandae quos consectetur dolores molestias culpa in, ducimus ex quidem voluptate? Rerum totam expedita, delectus qui laudantium ipsa atque quas esse in vitae a earum sed ea voluptatibus porro. Suscipit voluptatibus totam voluptate beatae sunt, dolor consectetur ullam nemo aliquid laborum aut consequuntur cupiditate provident. Possimus commodi laborum ex, saepe tenetur alias repudiandae enim obcaecati, odit magni tempora iure. Tempora nisi officiis fugit, explicabo quibusdam saepe itaque ipsum natus alias odio ea. Itaque ipsa quam, nostrum neque esse cum? Placeat cupiditate temporibus adipisci. Saepe voluptates voluptas, eos fugiat iusto soluta sequi nihil quia deserunt, consectetur non dicta ipsa nemo mollitia. Nobis id ad architecto quos vitae sit molestiae sequi facilis mollitia alias quasi, sunt omnis deleniti fugiat? Esse ipsum a iure iusto optio sint aut, dolores earum voluptatum qui iste commodi maiores tenetur, nisi harum dolorum facere velit aliquid? Nihil veniam nemo repellendus deleniti ea at quas! Repellendus necessitatibus cum unde quasi ipsum voluptate temporibus laboriosam, accusantium optio ratione delectus magni sit? Eius laudantium natus blanditiis, dolorem, quis, fugit aspernatur laborum amet accusantium perspiciatis dolore possimus. Incidunt nam amet suscipit dolorum doloribus debitis voluptate quisquam qui?</div> -->
</body>
</html>
37、解决浮动产生的影响
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>解决元素浮动后的影响</title>
<!--
1、解决父元素高度塌陷问题:父元素：height: 122px;
-->
<style>
.outer {
width: 500px;
background-color: gray;
border: 1px solid black;
/* 方案一 */
/* height: 122px; */
/* 方案二 不推荐*/
/* float: left; */
/* 方案三 */
/* overflow: scroll; */
/* 方案四 */
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px;
border: 1px solid black;
}
.box1,
.box2,
.box3, .box4 {
float: left;
}
/* .box4 { */
/* 解决方案四
注意：box4不能浮动，且不能是行内元素，是块或行内块元素
clear: both; */
/* } */
/* .box4 {
display:inline-block
} */
.test {
clear: both;
}
/* 伪元素 */
/* 方案五 */
.outer::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="outer">
<!-- 整个一行是盒子0 撑开 -->
<!-- <div class="box box0">0</div> -->
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<!-- 影响3:盒子4在盒子1背后但文字被甩出 -->
<div class="box box4">4</div>
<div class="box box5">5</div>
<!-- 四个盒子都浮动时对应的解决方案 -->
<div class="test"></div>
</div>
<!-- 影响2 -->
<!-- <div style="background-color: orange;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi qui, vero illum, nisi voluptates recusandae quos consectetur dolores molestias culpa in, ducimus ex quidem voluptate? Rerum totam expedita, delectus qui laudantium ipsa atque quas esse in vitae a earum sed ea voluptatibus porro. Suscipit voluptatibus totam voluptate beatae sunt, dolor consectetur ullam nemo aliquid laborum aut consequuntur cupiditate provident. Possimus commodi laborum ex, saepe tenetur alias repudiandae enim obcaecati, odit magni tempora iure. Tempora nisi officiis fugit, explicabo quibusdam saepe itaque ipsum natus alias odio ea. Itaque ipsa quam, nostrum neque esse cum? Placeat cupiditate temporibus adipisci. Saepe voluptates voluptas, eos fugiat iusto soluta sequi nihil quia deserunt, consectetur non dicta ipsa nemo mollitia. Nobis id ad architecto quos vitae sit molestiae sequi facilis mollitia alias quasi, sunt omnis deleniti fugiat? Esse ipsum a iure iusto optio sint aut, dolores earum voluptatum qui iste commodi maiores tenetur, nisi harum dolorum facere velit aliquid? Nihil veniam nemo repellendus deleniti ea at quas! Repellendus necessitatibus cum unde quasi ipsum voluptate temporibus laboriosam, accusantium optio ratione delectus magni sit? Eius laudantium natus blanditiis, dolorem, quis, fugit aspernatur laborum amet accusantium perspiciatis dolore possimus. Incidunt nam amet suscipit dolorum doloribus debitis voluptate quisquam qui?</div> -->
</body>
</html>
37、浮动布局练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动布局练习</title>
<style>
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
}
.leftfix {
float: left;
}
.righttfix {
float: right;
}
/* 清除浮动 */
.clearfix::after {
content: '';
display: block;
clear: both;
}
.container {
width: 960px;
/* 水平居中 */
margin: 0 auto;
/* 所有的文字水平居中 */
text-align: center;
}
.logo {
width: 200px;
}
.banner1 {
width: 540px;
margin: 0 10px;
}
.banner2 {
width: 200px;
}
/* 并集选择器 */
.logo,.banner1,.banner2 {
height: 80px;
/* 垂直居中 */
line-height: 80px;
background-color: #ccc;
}
.menu {
height: 30px;
background-color: #ccc;
margin-top: 10px;
line-height: 30px;
}
.item1,.item2 {
width: 368px;
height: 198px;
line-height: 198px;
margin-right: 10px;
border: 1px solid black;
}
.content {
margin-top: 10px;
}
.item3,.item4,.item5,.item6 {
width: 178px;
height: 198px;
line-height: 198px;
border: 1px solid black;
margin-right: 10px;
}
.bottom {
margin-top: 10px;
}
.item7,.item8,.item9 {
width: 198px;
height: 128px;
line-height: 128px;
border: 1px solid black;
}
.item8 {
margin: 10px 0;
}
.footer {
height: 60px;
line-height: 60px;
margin-top: 10px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="page-header clearfix">
<div class="logo leftfix">logo</div>
<div class="banner1 leftfix">banner1</div>
<div class="banner2 leftfix">banner2</div>
</div>
<!-- 菜单 -->
<div class="menu">菜单</div>
<!-- 内容区 -->
<div class="content clearfix">
<!-- 左侧 -->
<div class="left leftfix">
<!-- 上 -->
<div class="top clearfix">
<div class="item1 leftfix">栏目一</div>
<div class="item2 leftfix">栏目二</div>
</div>
<!-- 下 -->
<div class="bottom clearfix">
<div class="item3 leftfix">栏目三</div>
<div class="item4 leftfix">栏目四</div>
<div class="item5 leftfix">栏目五</div>
<div class="item6 leftfix">栏目六</div>
</div>
</div>
<!-- 右侧 -->
<div class="right leftfix">
<div class="item7">栏目七</div>
<div class="item8">栏目八</div>
<div class="item9">栏目九</div>
</div>
</div>
<!-- 页脚 -->
<div class="footer">页脚</div>
</div>
</body>
</html>
38、相对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<!--
1、开启相对定位的元素并没有脱离文档流
2、可以超出父容器的宽度，但浮动不行
3、属性值可以为负数：left: -20px;
4、left和right不能同时写，否则left生效
4、top和bottom不能同时写，否则top生效
5、当元素开启定位（无论什么类型的定位），则层级比普通元素高
6、若两元素同时开启定位，则后写的元素会盖在先写的
7、定位可以和margin、float一起用(但不推荐)
8、应用场景：（1）对元素的位置进行微调，（2）更对和绝对定位一起使用
-->
<style>
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
/* 给盒子2开启相对定位,相对的是发生定位之前的位置 */
position: relative;
/* 指定具体的位置 */
left: 100px;
/* margin-left: 50px; */
/* float: right; */
/* top: 50px; */
}
.box3 {
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
39、绝对定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<!--
定位元素：进行绝对定位的元素
1、宽与高默认被内容撑开，并可以自由设置（相对定位的元素则没有这个特点）
应用场景：1、一个元素盖到另外一个元素上，（对应需求，鼠标进入蓝色区域，盒子2往右）
-->
<style>
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
/* 加上以下这句，则outer是盒子2 的包含块 */
position: relative;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
/* 给盒子2开启绝对定位,则盒子2脱离了文档流 */
position: absolute;
/* 参考点是 该元素的包含块
1、没脱离文档流的元素，其父元素就是包含块（对于盒子1、3，outer就是其包含块）
2、脱离文档流的元素，第一个开启定位的祖先元素，就是其包含块（对盒子2，html是其包含块）
*/
top: 220px;
left: 20px;
/* transition: 1s all linear; */
/* right: -100px;
bottom: -50px; */
/* 可以和margin一起用，取决于以上使用相应的top,left但不推荐 */
/* margin-left: 50px;
margin-top: 50px; */
/* 绝对定位的元素和浮动不能一起用 否则浮动失效*/
float: right;
}
.box3 {
background-color: green;
}
.outer:hover .box2 {
/* 参考父元素outer */
left: 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
40、固定定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<!--
1、position: fixed;
2、开启固定定位的元素脱离文档流，对后面的兄弟元素、父元素有影响
3、参考点是视口
4、可以和margin一起使用，但要参考使用的top、right、left还是bottom
5、不能和浮动一起使用，否则浮动失效
6、无论什么元素（行内、行内块、块级），设置为固定定位之后，都变成定位元素
7、left和right不能一起设置，top和bottom不能一起设置
-->
<style>
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
/* 开启固定定位 */
position: fixed;
top: 0px;
left: 0px;
}
.box3 {
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>41、粘性定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>粘性定位</title>
<!--
1、position: sticky;
2、参开点，离开启粘性定位的元素拥有“滚动机制”的祖先元素，如此网页是body
3、粘性生效位置：通过top\right\left\bottom来确定生效位置
4、失效位置：整个包含粘性定位元素的父容器被推走时
6、注意：若最近的可滚动的祖先元素不是body，则效果不同
7、不会脱离文档流，是专门用于窗口滚动时的新的定位方式
8、可以和浮动一起设置，但不推荐
9、可以通过margin调整粘性定位元素的位置，但不推荐
10、粘性定位和相对定位的特点基本一致，不同的是，粘性定位可以在元素到达某个位置是将其固定
-->
<style>
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
.page-head {
height: 100px;
text-align: center;
line-height: 100px;
background-color: orange;
font-size: 20px;
}
.item {
background-color: gray;
}
.first {
background-color: skyblue;
font-size: 40px;
position: sticky;
/* 通过top\right\left\bottom来确定生效位置 */
top: 0px;
}
.content {
/* 若最近的可滚动的祖先元素不是body */
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="page-head">头部</div>
<!-- 内容区 -->
<div class="content">
<!-- 每一项 -->
<div class="item">
<div class="first">A</div>
<h2>A1</h2>
<h2>A2</h2>
<h2>A3</h2>
<h2>A4</h2>
<h2>A5</h2>
<h2>A6</h2>
<h2>A7</h2>
<h2>A8</h2>
</div>
<div class="item">
<div class="first">B</div>
<h2>B1</h2>
<h2>B2</h2>
<h2>B3</h2>
<h2>B4</h2>
<h2>B5</h2>
<h2>B6</h2>
<h2>B7</h2>
<h2>B8</h2>
</div>
<div class="item">
<div class="first">C</div>
<h2>C1</h2>
<h2>C2</h2>
<h2>C3</h2>
<h2>C4</h2>
<h2>C5</h2>
<h2>C6</h2>
<h2>C7</h2>
<h2>C8</h2>
</div>
</div>
</body>
</html>42、定位的层级
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位的层级</title>
<!--
1、盒子2、3、4开启定位，层级是平级的，比盒子1（没有定位）高
2、后写的开启定位的元素会覆盖先写的
3、z-index调整元素的显示层级，值(无单位，纯数值)越大，显示层级越高，反之
4、盒子4的包含块是outer，z-index调整层级是会受到包含块的影响
5、只有定位的元素设置z-index才有效
6、如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么应该检查包含块的层级
-->
<style>
.outer {
width: 500px;
background-color: skyblue;
border: 1px solid black;
padding: 20px;
/* 开启绝对定位的元素的参考点，即它的包含块 */
position: relative;
/* 盒子4的包含块是outer，z-index调整层级是会受到包含块的影响 */
z-index: 2;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: #888;
}
.box2 {
background-color: orange;
/* 相对定位 */
position: relative;
top: -150px;
left: 50px;
/* 改变盒子2的层级，默认是0 */
/* z-index: 1; */
}
.box3 {
background-color: green;
/* 绝对定位 */
position: absolute;
top: 130px;
left: 130px;
}
.box4 {
background-color: red;
/* 固定定位 */
position: fixed;
top: 200px;
left: 200px;
z-index: 50;
}
.box5 {
background-color: purple;
position: fixed;
top: 300px;
left: 300px;
z-index: 10;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
</div>
<div class="box box5">5</div>
</body>
</html>43、定位的特殊应用
1、定位可以越过padding
两种特殊应用，只针对绝对定位 和 固定定位元素，不包括相对定位的元素
1、特殊应用1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位的特殊应用1</title>
<style>
.outer {
height: 400px;
background-color: #888;
position: relative;
}
.inner {
background-color: orange;
font-size: 20px;
padding: 20px;
border: 10px solid black;
position: absolute;
/* top: 0;
left: 0; */
/* width;设置内容区的宽，加上padding和border会超出 */
/* 需求：使没有设置宽高且设置绝对定位的元素宽度撑满其整个包含块 */
left: 0;
right: 0;
/* 加上以下，则撑满整个父元素 */
/* top: 0;
bottom: 0; */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好呀</div>
</div>
</body>
</html>2、特殊应用2
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>定位的特殊应用2</title>
<!--
1、定位元素必须设置宽高
-->
<style>
.outer {
width: 800px;
height: 400px;
background-color: #888;
position: relative;
}
.inner {
width: 400px;
height: 100px;
background-color: orange;
font-size: 20px;
/* 需求：让子元素块在父元素块中水平垂直居中 */
position: absolute;
/* 方案一 */
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* 方案二（不推荐） */
/* left: 50%;
top: 50%;
margin-left: -200px; width的一半
margin-top: -50px; */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好呀</div>
</div>
</body>
</html>44、CSS布局
1、版心（container）
（1）在pc端网页中，一般会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心
（2）版心宽度一般是960~1200之间
（3）版心可以是一个，也可以多个
2、布局常用类名
3、重置默认样式
http://necolas.github.io/normalize.css/
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
