一、基础认知
目标：理解CSS的作用，了解CSS语法规则，知道CSS的引入方式及其区别
学习路径：
1.CSS初识
1）CSS:层叠样式表（Cascading style sheets)
2）CSS作用是什么？
给页面中的HTML标签设置样式
3）CSS语法规则
a.写在哪里？
css写在style标签里面，style标签一般写在head标签里面，title标签下面
b.怎么写？
<!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>css初步体验</title>
<style>
/* css的代码注释 */
p {
color: red;
background-color: green;
width: 400px;
font-size: 30px;
}
</style>
</head>
<body>
<p>我是一个新的css代码</p>
</body>
</html>
2.CSS引入方式
1）内嵌式：CSS写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中
2）外联式：CSS写在一个单独的.css文件中
提示：需要通过link标签在网页中引入
3）行内式：CSS写在标签的style属性中
<!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>css的三种引入方式</title>
<!--方式一 -->
<style>
/* 内联式 */
p {
color: green;
}
</style>
<link rel="stylesheet" href="my.css">
</head>
<body>
<p>内嵌式引入方式</p>
<h3>外联式引入方式</h3>
<p style="color: blue;">行内式引入方式</p>
</body>
</html>.css文件
h3 {
color: red;
}4）CSS常见三种引入方式的特点区别都有哪些？（书写位置、作用范围、使用场景）？
二、基础选择器
目的：理解选择器的作用，能够使用基础选择器在HTML中选择元素
学习路径：
1.标签选择器
1）结构：标签名{ css属性名：属性值;}
2）作用：通过标签名，找到页面中所有这类标签，设置样式
3）注意点：
a.标签选择器选择的是一类标签，而不是单独某一个
b.标签选择器无论嵌套关系多深，都能找到对应的标签
<!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>
/* 标签选择器 所有的这个标签都是这个样式*/
p {
color: red;
}
</style>
</head>
<body>
<p>111</p>
<p>222</p>
<p>333</p>
</body>
</html>
项目里面所有的这个标签都是这个样式
2.类选择器
1）结构：.类名{css属性名:属性值};
2）作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
3）注意点：
a.所有标签都有class属性，class属性的属性值称为类名（类似于名字)
b.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
c.一个标签可以同时有多个类名，类名之间以空格隔开
<!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>
.red {
color: red;
}
.size {
font-size: 30px;
}
</style>
</head>
<body>
<p class="red size">1111</p>
<p class="size">3333</p>
<div class="red">2222</div>
</body>
</html>哪个标签用这个样式，这个标签就能设置为这个值
3.id选择器
1）结构：#id属性值{css属性名:属性值};
2）作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
3）注意点：
a.所有标签上都有id属性
b.id属性值类似于身份证，在一个页面中是唯一的，不可重复的
c.一个标签上只能有一个id属性值
d.一个选择器只能选中一个标签
<!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>id选择器</title>
<style>
#blue {
color: blue;
}
</style>
</head>
<body>
<p id="blue">id选择器</p>
</body>
</html>一个标签只能添加一个id选择器，一个id选择器只能优化一个标签
4.通配符选择器
1）结构：*{css属性名：属性值};
2）作用：找到页面中所有的标签，设置样式
3）注意点：
a.在开发中使用极少，只会在极其特殊的情况下才会用到
b.在基础班小页面中可能会用于去除标签默认的margin和padding
<!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: red;
}
</style>
</head>
<body>
<p>1111</p>
<div>2222</div>
<p>33333</p>
<p>44444</p>
<h3>5555</h3>
</body>
</html>所有的都会设置成一样的
三、字体和文本样式
1.字体大小
1）属性名：font-size
2）取值：数字+px;
3）注意点：
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
<!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>
p {
font-size: 25px;
}
</style>
</head>
<body>
<p>我是字号设置</p>
</body>
</html>
2.字体粗细
1）属性名：font-weight
2）取值：
3）注意点：
a.不是所有字体都提供九种粗细，因此部分取值页面没有变化
b.实际开发中以：正常、加粗两种取值最多
<!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>
p {
font-weight: 700;
}
h1 {
font-weight: 400;
}
</style>
</head>
<body>
<p>我是文字变粗设置</p>
<h1>我是文字变细设置</h1>
</body>
</html>
3.字体样式（是否倾斜）
1）属性名：font-style
2）取值：
正常值（默认值）：normal
倾斜：italic
<!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>
p {
font-style: italic;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<p>我要变倾斜</p>
<em>我要变正常</em>
</body>
</html>
4.字体系列font-family
1）属性名：font-family
2）常见属性：具体字体1，具体字体2，具体字体3，具体字体4......字体系列
具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等......
字体系列：sans-serif、serif、monospace等
3）渲染规则：
a.从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
b.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
4）注意点：
a.如果字体名称中存在多个单词，推荐使用引号包裹
b.最后一项字体系列不需要引号包裹
c.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正常显示
5）常见的字体设置样式
<!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>
div {
font-family: STHeiti;
}
</style>
</head>
<body>
<div>设置宋体样式</div>
</body>
</html>
<style>
div {
font-family: STHeiti,苹方,sans-serif;
}
</style>5.样式的层叠问题
1）问题：
给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？
2）结果：
如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
3）TIP：
CSS层叠样式表，所谓的层叠即叠加的意思，表示样式可以一层一层的叠层覆盖
6.字体font相关属性的连写
1）属性名：font（复合属性）
2）取值：font:style weight size family
3）复合属性：一个属性冒号后面书写多个值的写法
4）省略要求：
只能省略前两个，如果省略了相当于设置了默认值
5）注意点：如果需要同时设置单独和连写形式
a.要么把单独的样式写在连写下面
b.要么把单独的样式写在连写的里面
<!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>font复合属性</title>
<style>
p {
font: italic 700 25px STHeiti;
}
</style>
</head>
<body>
<p>
我是一个文本编辑器，需要设置为倾斜、加粗、25号字、宋体
</p>
</body>
</html>
7.文本缩进
1）属性名：text-indent
2）取值：
数字+px
数字+em(推荐：1em = 当前标签的font-size的大小)
<body>
<p>2006年，参演电视剧《与青春有关的日子》，开始在影视圈崭露头角 [1] [69] 。2005年，拍摄古装剧《锦衣卫》。2007年，主演赵宝刚导演的青春剧《奋斗》；同年，主演首部电影《走着瞧》。2008年，主演滕华涛执导的电视剧《蜗居》，饰演80后城市青年小贝 [1] 。2009年，在电影《海洋天堂》中扮演自闭症患者王大福；同年，参演抗战剧《雪豹》 [2] </p>
</body>我们可以使用数字+px的方式来设置缩进几个字，但是是按字的大小来设置的，如果是16px的字那么缩进2个字符就是32px，这种方式不方便，原因是如果后续改变了字的大小，那么我们就需要改变缩进的这个值，但是如果是2em的话，那么后续不管是怎样修改字的大小，都是缩进2个字符
<style>
/* p {
text-indent: 32px;
} */
p {
text-indent: 2em;
}
</style>8.文本水平对齐方式
1）属性名：text-align
2）取值：
3）注意点：
如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素）设置
<!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>
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>新闻标题</h1>
</body>
</html>
4）text-align:center能让哪些元素水平居中？
a.文本
b.span标签、a标签
c.input标签、img标签
5）注意点：如果想要让以上的元素水平居中，text-align:center需要给以上元素的父元素进行设置
<!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>
body {
text-align: center;
}
</style>
</head>
<body>
<img src="../image/iphone.png">
</body>
</html>如果是对h1标签来说，我们是对里面的文字进行居中，所以说是h1标签进行设置，如果是对image标签进行设置，他的父标签是body，所以需要对body进行设置
9.文本修饰
1）属性名：text-decoration
2）取值：
3）注意点：
开发中使用text-decoration:none清除a标签默认的下划线
<!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>
h1 {
text-decoration: underline;
}
p {
text-decoration: line-through;
}
div {
text-decoration: overline;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>aaaaaaaa</h1>
<p>bbbbbbbb</p>
<div>cccccccc</div>
<a href="#">我是超链接</a>
</body>
</html> 
10.行高
1）作用：控制一行的上下行间距
2）属性名：line-height
3）取值：
a.数字+px
b.倍数（当前标签font-size的倍数）
4）应用：
a.让单行文本垂直居中可以设置line-height,文字父元素高度
b.网页精准布局时，会设置line-height:1可以取消上下边距
c.行高与font连写的注意点：
> 如果同时设置了行高和font连写，注意覆盖问题
> font:style weight size/line-height family
<!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>
/* p {
line-height: 50px;
} */
p {
line-height: 2;
}
</style>
</head>
<body>
<p>2006年，参演电视剧《与青春有关的日子》，开始在影视圈崭露头角 [1] [69] 。2005年，拍摄古装剧《锦衣卫》。2007年，主演赵宝刚导演的青春剧《奋斗》；同年，主演首部电影《走着瞧》。2008年，主演滕华涛执导的电视剧《蜗居》，饰演80后城市青年小贝 [1] 。2009年，在电影《海洋天堂》中扮演自闭症患者王大福；同年，参演抗战剧《雪豹》 [2] </p>
</body>注意行高不仅仅指的是文字的高度
11.行高和复合属性连用
<style>
p {
font: italic 700 30px/2 STHeiti;
}
</style>
12.单行文本垂直居中
垂直居中技巧：设置行高属性值 = 自身高度属性值
<style>
/* 文字是单行 */
/* 垂直居中技巧：设置行高属性值 = 自身高度属性值 */
div {
width: 400px;
height: 400px;
line-height: 400px;
text-align: center;
background-color: pink;
}
</style>
13.拓展 颜色取值
1）属性名：
如：文字颜色:color
如：背景颜色：background-color
2）属性值
14.标签水平居中方法总结margin:0 auto
1）如果需要让div、p、h（大盒子)水平居中？
可以通过margin: 0 auto;实现
2）注意点：
a.如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可
b.margin:0 auto一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
3）任何标签里面不加文字，设置了宽和高都是可以显示的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签居中</title>
<style>
p {
width: 300px;
height: 50px;
background-color: green;
}
div {
width: 300px;
height: 200px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<p></p>
<div></div>
</body>
</html>
如果有文字的话不设置宽高也能进行显示，但是没有文字的话，不要设置宽高和背景色才能显示出
四、Chrome调试工具
1.怎样打开调试界面
双击谷歌浏览器，选择检查就可以查看代码
2.检查代码默认是在右面显示的，如果想要显示到下面，就点击竖的3个按钮
3.检查代码报错，左边是标签，右边显示标签的css样式设置，如果是黄色的感叹号，那么就显是写的代码语法有问题，如果是删除线，那么就是属性被进行了覆盖或者是自己进行了注释
4.直接修改他的属性值
如果要增大或者是减少他的一些属性值的话，直接在控制台单选中这个数值，然后按键盘上的上下按钮键，就可以修改
5.添加属性值
直接在css控制板上面单击，然后就出现了：可以添加进行调试
五、综合案例
所有的标签里面都可以进行其他标签的嵌套，但是一般用的是div标签
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 800px;
height: 600px;
margin: 0 auto;
background-color: #f2f2eb;
}
h1 {
text-align:center;
}
.spanone {
color: #808080;
}
.spantwo {
color: #87ceeb;
font-weight: 700;
}
.suojin {
text-indent: 2em;
/* margin: 0 auto; */
/* text-align: center; */
}
.duanluo {
text-align: center;
}
.cancelLine {
text-decoration: none;
}
</style>
</head>
<body>
<div>
<h1>《自然》评选科学的10个计算机代码项目</h1>
<p class="duanluo"><span class="spanone">2077年01月28日14:58</span> <span class="spantwo">新浪科技</span> <a href="#" class="cancelLine">新浪新闻</a></p>
<hr>
<p class="suojin">
2019年，实践视界望远镜团队让世界首次看到了黑洞的样子，不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片，研究团队还发布了这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
</p>
<p class="suojin">
这种模式正变得越来越普遍，从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学迈克尔因"为复杂化学系统创造了多尺度模型“与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。”我们今天确实拥有相当可观的计算能力，“他说，”问题在于，我们仍然需要思考.“
</p>
<p class="suojin">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论多强大，也是毫无用处的，如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》杂志将目光投向了幕后，着眼于过去几年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目</p>
<p class="suojin">
最初的现代计算机并不容易操作，当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰极其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化，利用Fortran，用户可以用人类可读的指令来编程，例如x=3+5，然后由编译器将这些指令转换成快速、高效的机器代码。
</p>
</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>综合案例2</title>
<style>
body {
background-color: #f5f5f5;
}
.divone {
width: 234px;
height: 300px;
text-align: center;
background-color: #ffffff;
margin: 0 auto;
}
img {
width: 160px;
height: 160px;
}
.spanone {
font-size: 14px;
line-height: 25px;
text-align: center;
}
.ptwo {
font-size: 12px;
line-height: 30px;
color: #cccccc;
text-align: center;
line-height: 30px;
}
.pthree {
font-size: 14px;
color: #ffa500;
text-align: center;
}
</style>
</head>
<body>
<div class="divone">
<img src="../image/iphone.png">
<!-- 不能使用p标记 因为p标签之间段落和段落之间默认是有间隔的 -->
<div class="spanone">小米13</div>
<div class="ptwo">成年人的玩具</div>
<div class="pthree">1999元</div>
</div>
</body>
</html>实现的效果是：
需要注意的是，不能使用p标签去布局下面的内容，因为p标签是自带间隔的，如果使用p标签，效果如下：
3段文字之间的间隔会比较大，已经超出了行高
六、选择器进阶
目标：能够理解复合选择器的规则，并使用复合选择器在HTML中选择元素
学习路径：
1.复合选择器
1）后代选择器：空格
a.作用：HTML标签的嵌套关系，选择父元素后代中满足条件的元素
b.选择器语法：选择器1 选择器2{css}
c.结果:在选择器1所找到标签的后代（儿子、孙子、重孙子...）中，找到满足选择器2的标签，设置样式
d.注意点：
> 后代包括：儿子、孙子、重孙子...
> 后代选择器中，选择器与选择器之间通过空格隔开
<!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>
div p {
color: red;
}
</style>
</head>
<body>
<p>我是第一个p标签</p>
<div>
<p>我是第二个p标签</p>
</div>
</body>
</html>
2)子代选择器：>
a.作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
b.选择器语法：选择器1>选择器2{css}
c.结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
d.注意点：
> 子代只包括：儿子
> 子代选择器中，选择器与选择器之间通过>隔开
<!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>
/* 后代选择器，只要是他的后代颜色都进行变化，所以第一个链接和第二个链接都变色 */
/* div a {
color: red;
} */
/* 后代选择器只是他的儿子会，其他的不会 */
div>a {
color: red;
}
</style>
</head>
<body>
<div>
<a href="#">我是第一个超链接</a>
<p>
<a href="#">我是第二个超链接</a>
</p>
</div>
</body>
</html>
2.并集选择器
1）作用：同时选择多组标签，设置相同的样式
2）选择器语法：选择器1，选择器2{css}
3)结果：找到选择器1和选择器2选中的标签，设置样式
4）注意点：
> 并集选择器中的每组选择器之间通过,来隔开
> 并集选择器中的每组选择器可以是基础选择器或者是复合选择器
> 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style>
h1,
p,
div {
color: red;
}
</style>
</head>
<body>
<h1>这是一个h1标签</h1>
<p>这是一个p标签</p>
<div>这是一个div标签</div>
</body>
</html>
3.交集选择器 ：紧挨着
1）作用：选中页面中同时满足多个选择器的标签
2）选择器语法：选择器1选择器2{css}
3）结果：（既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
4）注意点：
> 交集选择器中的选择器之间是紧挨着的，没有东西分隔
> 交集选择器中如果有标签选择器，标签选择器必须写在最前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style>
/* .one {
color:red;
} */
div.one {
color: red;
}
</style>
</head>
<body>
<div class="one">我是一个div标签</div>
<p>我是第二个p标签</p>
<p class="one">我是一个p标签</p>
</body>
</html>4.hover伪类选择器
1）作用：选中鼠标悬停在元素的状态，设置样式
2）选择器语法：选择器：hover{css}
3）注意点：
>伪类选择器选中的元素的某种状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
a:hover {
color: red;
background-color: green;
}
div:hover {
color: blue;
}
</style>
</head>
<body>
<a href="#">我是一个超链接</a>
<div>我是一个div标签</div>
</body>
</html>
5.Emmet语法
1）作用：通过简写语法，快速生成代码
2）语法：
类似于刚刚学习的选择器的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emmet语法</title>
<style>
/* css属性的话一般都是首字母 */
/* 宽高和背景色一起设置 */
/* w300+w400+bgc */
div {
width: 300px;
height: 400px;
background-color: #fff;
}
</style>
</head>
<body>
<!-- 生成一个同级标签 标签1+标签2 -->
<!-- div+p -->
<div></div>
<p></p>
<!-- 生成父子集语法 标签1>标签2 -->
<!-- div>p -->
<div>
<p></p>
</div>
<!-- 生成ul li -->
<!-- ul>li*3 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 生成ul ,li,里面有3个111 -->
<!-- ul>li{111}*3 -->
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<!-- 生成ul,li里面有1，2，3，生成的是有序的数字 -->
<!-- ul>li{$}*3 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- 交集选择器 -->
<!-- p.one -->
<p class="one"></p>
</body>
</html>七、背景属性
目标：能够使用背景相关属性，装饰元素的背景样式
学习路径：
1.背景颜色
1）属性名：background-color(bgc)
2）属性值：
颜色取值：关键字、rgb表示法，rgba表示法，十六进制...
3）注意点：
> 背景颜色默认值是透明:rgba(0,0,0,0),transparent
> 背景颜色不会影响盒子大小，并且能看清盒子的大小和位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 400px;
/* background-color: #bbb; */
/* background-color: rebeccapurple; */
background-color: rgba(240, 230, 190, .5);
}
</style>
</head>
<body>
<div>111</div>
</body>
</html>2.背景图片
1）属性名：background-image(bgi)
2）属性值：background-image:url('图片的路径')
3）注意点：
> 背景图片中url中可以省略引号
> 背景图片默认是在水平和垂直方向上平铺的
> 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
<!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>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(image/1.jpg);
}
</style>
</head>
<body>
<div>1111</div>
</body>
</html>如果设置的背景图片的大小没有盒子的大小大，那么里面的图片就会显示多个，如果背景图片比盒子大，那么就会显示不全
3.背景平铺
1）属性名：background-repeat(bgr)
2）属性值：
3)注意点：
如果背景图片比标签的尺寸大，那么设置bgr属性没有效果，还是显示不全，只能显示部分照片，但是如果背景图片比盒子的尺寸小，那么默认是水平和垂直方向的平铺，如果不想平铺就设置no-repeat，但是不平铺只还是显示原尺寸大小，并不是将这个图片显示成和盒子大小一样的尺寸，给填充满
4.背景位置
1）属性名：background-position(bgp)
2）属性值：background-position:水平方向位置 垂直方向位置
3）注意点：
方向名词取值和坐标值可以混使用，第一个取值表示水平，第二个取值表示垂直
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景位置</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(image/bgi.jpg);
background-repeat: no-repeat;
/* background-position: right bottom; */
/* background-position: center center; */
background-position: 50px 50px;
/* 使用像素的时候如果是正数，左右方向是向右，上下方向是向下 */
/* 使用像素的时候如果是负数，左右方向是向左，上下方向是向上 */
/* background-repeat: repeat-x; */
}
</style>
</head>
<body>
<div>1111</div>
</body>
</html>
5.背景相关属性的连写形式
1）属性名：background(bg)
2）属性值：单个属性值的合写，取值之间以空格隔开
3）书写顺序：
推荐：background:color image repeat position
4）省略问题：
> 可以按照需求省略
> 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url()
5)注意点：
> 如果需要设置单独的样式和连写，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面
<!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>
div {
width: 400px;
height: 400px;
background: pink url(image/bgi.jpg) no-repeat bottom center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>需要注意的是，这几个属性的先后位置是可以不按顺序的，但是对于背景的位置，如果是按英文单词来写是可以不按顺序的，但是如果是写数字，一定是水平 垂直
6.（拓展）img标签和背景图片的区别
需求 ：需要在网页中展示一张图片的效果？
方法一：直接写上img标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
方式二：div标签+背景图片
需要设置div宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
八、元素显示模式
目标：能够认识三种常见的元素显示模式，并通过代码实现不同元素显示模式的转换
学习路径：
1.块级元素
1）显示特点：
a.独占一行（一行只能显示一个）
b.宽度默认是父元素的宽度，高度默认由内容撑开
c.可以设置宽高
d.代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......
<!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>
div {
width: 300px;
height: 300px;
background-color:pink;
}
</style>
</head>
<body>
<span>111</span>
<!-- 使用div的时候，即使上一个标签是不换行的，但是div这个也会换行，默认独占一行 -->
<div>第一个div</div>
<div>第二个div</div>
</body>
</html>
2.行内元素
1)显示特点
a.一行可以显示多个
b.宽度和高度默认由内容撑开
c.不可以设置宽高
d.代表标签：
a、span、b、u、i、s、strong、ins、em、del...
可以使用宽高和背景色来判断这个元素是块级元素还是行内元素
<!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>
span {
background-color: pink;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<span>我是第一个行内元素</span> <span>我是第二个行内元素</span>
</body>
</html>
可以看到即使我们对行内元素设置了宽高但是宽高没有起作用
3.行内块元素
1）显示特点
a.一行可以显示多个
b.可以设置宽高
2)代表标签
a.input、textarea、button、select....
b.特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
<!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>
button {
width: 300px;
height: 300px;
background-color:pink;
}
</style>
</head>
<body>
<button type="button">我是一个行内块元素</button>
<button type="button">我是二个行内块元素</button>
</body>
</html>
4.元素显示模式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素模式之间的相互转化</title>
<style>
div {
width: 50px;
height: 50px;
background-color: pink;
display: inline;
}
p {
width: 50px;
height: 50px;
background-color: pink;
display: inline-block;
}
span {
width: 50px;
height: 50px;
background-color: pink;
display: block;
}
a {
width: 80px;
height: 80px;
background-color: pink;
display: inline-block;
}
button {
width: 80px;
height: 80px;
background-color: pink;
display: inline;
}
img {
width: 80px;
height: 80px;
background-color: pink;
display: inline-block;
}
</style>
</head>
<body>
<!-- 将div块级元素转换成行内元素 -->
<div>111</div> <div>222</div>
<!-- 将p块级元素转换成行内块元素 -->
<p>333</p>
<!-- 将span行内元素转换成块级元素 -->
<span>444</span>
<!-- 将a行内元素转换成行内块元素 -->
<a href="#">我是一个超链接</a>
<!-- 将行内块元素转换成行内元素 -->
<button type="button">我是第一个button</button>
<button type="button">我是第二个button</button>
<!-- 将img行内块元素转换成块级元素 -->
<img src="../背景颜色/image/1.jpg">
<img src="../背景颜色/image/bgi.jpg">
</body>
</html>
5.HTML嵌套规范注意点
1)块级元素一般作为大容器，可以嵌套，文本、块级元素、行内元素、行内块元素等......
但是：p标签不要嵌套div、p、h等块级元素
a.p标签和h标签不能互相嵌套
b.p标签里面不能嵌套div标签
2）a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- p标签和h标签不能互相嵌套 -->
<p>
<h1>我是h1标题</h1>
</p>
<!-- p标签里面不能嵌套div标签 -->
<p>
<div>我是一个div标签</div>
</p>
</body>
</html>可以查看浏览器对这种的标签解释，是把h1标签和div标签没有嵌套在标签里面的
所以不能把h1标签写在p标签里面，div标签也不能，因为不嵌套，不显示效果
九、三大特性
目标：能够认识CSS的继承和层叠特性
学习路径：
1.继承性
1）特性：子元素有默认继承父元素样式的特点（子承父业）
2）可以继承的常见属性（文字控制属性都可以继承）
a.color
b.font-style,font-weight,font-size,font-family
c.text-indent,text-align
d.line-height
e.......
3)注意点：
> 可以通过调试工具判断样式是否可以继承
> 继承性只能对子集没有特殊属性的进行设置，比如a标签自带蓝色，那么他就不会继承到他的父级，只能对a标签进行单独的设置，再比如是h系列标签，自带文字大小，那么他就不会继承到父级的文字大小属性，只能对自己进行设置
<!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>
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>我是一个p标签</p>
</div>
</body>
</html>
可以看到我们虽然是对div标签设置的样式，但是p标签里面的内容也变成了红色，是因为p标签写在了div标签的里面，写着里面那么就是p标签继承自div标签，所以p便签里面的内容会生效
4）继承失效的特殊情况
> 如果元素有默认浏览器样式，此时继承性仍然存在，但是不会生效
a.a标签的color会继承失效
b.h系列标签的font-size会继承失效
<!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>
div {
color: red;
font-size: 15px;
}
</style>
</head>
<body>
<div>
<!-- <p>我是一个p标签</p> -->
<a href="#">我是一个超链接</a>
<h1>我是h1标题</h1>
</div>
</body>
</html>
可以看到a标签自带蓝色，所以对div设置成红色，也是不起作用，h1标签 有自己的字号，所以对div设置字号，不起效果
2.层叠性
1）特性：
> 给同一个标签设置不同的样式，此时样式会层层叠加，会共同作用在标签上
> 给同一个标签设置相同的属性，此时样式会层层叠加，最终写在最后的样式会生效
2）注意点：
当样式冲突时，只有当选择器样式优先级相同时，才能通过层叠性判断结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 当设置的标签属性相同的时候，最后一个会生效 */
color: red;
color: green;
}
.one {
/* 当设置的标签属性不同的时候，如果没有冲突，那么会都生效，但是当冲突的时候，优先级高的生效 */
font-size: 30px;
}
</style>
</head>
<body>
<div class="one">111</div>
</body>
</html>3.优先级
1）目标：能认识不同的选择器的优先级公式，能够进行CSS权重叠加计算，分析并解决CSS冲突问题
2）不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
3）优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
4）注意点：
a.!important写在属性值的后面，分号的前面
b.!important不能提升继承的优先级，只要是继承优先级最低
c.实际开发中不建议使用!important
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color: red;
}
div {
color: green !important;
}
.box {
color: pink;
}
#box {
color: orange;
}
</style>
</head>
<body>
<!-- 当一个标签使用了多个选择器的时候，样式冲突的时候到底谁生效 -->
<div class="box" id="box" style="color: purple;">111</div>
</body>
</html>上述代码中如果使用了!important，那么最后显示绿色，如果没有使用!important，就是紫色，没有使用行内样式，就是橙色，没有使用#box就是粉色，没有使用.box，就是绿色
5）!important不能给继承添加，自己有样式无法继承父级样式
4.权重叠加计算
1）场景：如果是复合选择器，此时需要通过权重叠加计算方式，判断最终哪个选择器优先级最高会生效
2）权重叠加计算公式：（每一级之间不存在进位）
3）比较规则
a.先比较第一级数字，如果比较出来了，之后的统统不看，
b.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，后面的统统不看
c.......
d.如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）
注意点：!important如果不是继承关系，则权重最高，天下第一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* {行内 id 类 标签} */
/* {0,1,0,1} */
div #one {
color: orange;
}
/* {0,0,2,0} */
.father .son {
color: skyblue;
}
/* {0,0,1,1} */
.father p {
color: purple;
}
/* {0,0,0,2} */
div p {
color: pink;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">我是一个标签</p>
</div>
</body>
</html>最终显示效果为橙色
5.权重叠加计算案例题
判断的原则：
1）首先看是不是继承的关系，也就是通过选择器能不能直接定位到这一个标签
2）如果是继承关系，那么!important不生效，因为有自己的样式的时候，父类是不生效的，如果不是继承关系，直接定位到自己，那么!important最高
3）如果里面包含了交集选择器，那么他也算个数
4）如果都能定位到自己，那么就按照{行内，id,类，标签}的个数来进行判断
5）如果都是继承关系，那么就看继承里面谁最高，看继承哪个父级，哪个父级高，哪个选择器生效
6）如果都能定位到自己，按照{行内，id,类，标签}个数判断，优先级又相同的情况下，那么按照层叠性，最下面的生效
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 先判断是不是继承关系，能不能精确到这一个标签，如果是继承关系，那么优先级最低，而且!important对其没有作用 */
/* 如果精确到这一个标签，那么就按照原则 */
/* {行内，id，类，标签} */
/* !important最高 */
/* {0,2,0,0} */
#father #son {
color: blue;
}
/* {0，1，1，1} */
#father p.c2 {
color: black;
}
/* {0,0,2,2} */
div.c1 p.c2 {
color: red;
}
/* 继承 */
#father {
color: green !important;
}
/* 继承 */
div#father.c1 {
color: yellow;
}
/* {0,1,0,0} */
#son {
color: skyblue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
这行文本是什么颜色?
</p>
</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>Document</title>
<style>
div div {
color: skyblue;
}
div {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<div>
这行文本是什么颜色？
</div>
</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>Document</title>
<style>
/* {0,0,0,12} */
div div div div div div div div div div div div {
color: red;
}
.one {
color: pink;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="one">这行文字是什么颜色？</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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>Document</title>
<style>
.c1 .c2 div {
color: blue;
}
/* {0,1,0,1} */
div #box3 {
color: green;
}
/* {0,1,0,1} */
/* 当权重相同的时候，按照层叠性，写在最后的生效 */
/* 这个不是继承关系，也能直接选中里面的div */
#box1 div {
color: yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
这行文本是什么颜色?
</div>
</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>Document</title>
<style>
/* 如果都是继承，那么就看继承里面谁最高，看继承哪个父级，哪个父级高，哪个选择器生效 */
/* 继承 */
div p {
color: red;
}
/* 继承 */
.father {
color: blue;
}
</style>
</head>
<body>
<div class="father">
<p class="son">
<span>
文字
</span>
</p>
</div>
</body>
</html>最终颜色为红色
十、项目实战
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>Document</title>
<style>
span {
width: 100px;
height: 60px;
background-color: red;
display: inline-block;
text-align: center;
line-height: 60px;
color: white;
}
span:hover{
background-color: orange;
}
a {
width: 100px;
height: 60px;
background-color: red;
display: inline-block;
text-align: center;
line-height: 60px;
color: white;
text-decoration: none;
}
a:hover {
background-color: orange;
}
div {
width: 100px;
height: 60px;
background-color: red;
display: inline-block;
text-align: center;
line-height: 60px;
color: white;
}
div:hover {
background-color: orange;
}
</style>
</head>
<body>
<span>导航1</span> <span>导航2</span> <span>导航3</span> <span>导航4</span>
<span>导航5</span>
<!-- <div>导航1</div> <div>导航2</div> <div>导航3</div> <div>导航4</div>
<div>导航5</div> -->
<!-- <a href="#">导航1</a> <a href="#">导航2</a> <a href="#">导航3</a> <a href="#">导航4</a> <a href="#">导航5</a> -->
</body>
</html>1）使用span标签或者是div标签，他鼠标落在上面的时候是箭头
2）鼠标悬停的伪类选择器标签和:hover之间不能含有空格，否则不生效
2.五彩导航图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
width: 120px;
height: 58px;
display: inline-block;
text-align: center;
line-height: 58px;
color: white;
text-decoration: none;
}
.one {
background-image: url(shizhanImage/bg1.png);
}
.one:hover {
background-image: url(shizhanImage/bg5.png);
}
.two {
background-image: url(shizhanImage/bg2.png);
}
.two:hover {
background-image: url(shizhanImage/bg6.png);
}
.three {
background-image: url(shizhanImage/bg3.png);
}
.three:hover {
background-image: url(shizhanImage/bg7.png);
}
.four {
background-image: url(shizhanImage/bg4.png);
}
.four:hover {
background-image: url(shizhanImage/bg8.png);
}
</style>
</head>
<body>
<a class="one" href="#">五彩导航</a>
<a class="two" href="#">五彩导航</a>
<a class="three" href="#">五彩导航</a>
<a class="four" href="#">五彩导航</a>
</body>
</html>
十一、Chrome调试工具
查错流程（遇到样式出不来，要学会通过调试工具找错）
在谷歌浏览器里面进行检查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fahter .son .sun {
color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="sun">孙子</div>
</div>
</div>
</body>
</html>
可以看到上面的代码拼写错误，在谷歌浏览器里面我们查看css的设计样式，发现没有style样式，就去看选择器是不是拼写错误，或者是选择器设置错误
十二、PxCook的基本使用(像素大厨）
1.打开像素大厨，创建一个项目
2. 输入项目的名称，根据自己开发的设备端，选择设备，我们这里选择Web,然后创建项目
3.创建成功以后，直接将png图片或者是jpg图片或者是psd文件拖进来
4.如果是png图片或者是jpg图片，那么就选择是设计模式，如果是psd格式的就选择开发模式。
5.在设计模式中如果是png图片或者是jpg图片，我们量尺寸可以使用尺子，如果要进行颜色提取，可以选择喷子提取器，如果要是移动图片，就选择小手抓手工具
6.如果是psd格式，我们直接定位就可以
十三、盒子模型
目标：能够认识盒子模型的组成，能够掌握盒子模型边框、内边距、外边距的设置方法
学习路径：
1.盒子模型的介绍
1）盒子的概念
1.1 页面中的每一个标签，都可看作是一个“盒子”，通过盒子的视角更方便的进行布局
1.2 浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象的称之为盒子
2）盒子模型
css中规定每个盒子分别由：内容区域（content）、内边距区域(padding)，边框区域(border),外边距区域(margin）构成，这就是盒子模型
3）记忆：可以联想现实中的包装盒
4）盒子模型的简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid black;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div>111</div>
<div>222</div>
</body>
</html>
2.内容区域的宽度和高度
1）作用：利用width和height属性默认设置是盒子内容区域的大小
2）属性：width/height
3）常见取值：数字+px
宽度和高度设置的是内容的宽度和高度，比如对div标签进行宽高的设置，在没有加边框内边距的情况下，那么整个盒子的大小就是200px和200px，内容的大小也是200px,200px,但是如果加了20的内边距，那么内容的大小就是200px，200px，整个盒子就变成了240px，240px
3.边框（border)
1）属性名：border
2）属性值：单个取值的连写，取值之间以空格隔开
如：border ：10px solid red;
10是边框的粗细,solid是实线还是虚线，red是边框的颜色 solid是实线 dashed是虚线
dotted是点线
3）快捷键：bd+回车键
需要注意的是，给一个标签设置背景色，设置的是整个盒子的背景色，包括内容内边距和边框，但是给标签设置宽高指的就是内容的宽高，默认而不是整个盒子的宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* solid是实线 dashed是虚线 dotted是点线 */
border: 5px dashed black;
}
</style>
</head>
<body>
<div>111</div>
</body>
</html>
4）边框(border)-单方向设置
a.场景：只给盒子的某个方向设置边框
b.属性名:border-方位名词
c.属性值：连写的取值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* solid是实线 dashed是虚线 dotted是点线 */
/* border: 5px dashed black; */
/* 上面边框的设置 */
border-top: 5px dashed black;
/* 下面边框的设置 */
border-bottom: 5px dashed black;
/* 左边边框的设置 */
border-left: 5px dashed black;
/* 右边边框的设置 */
border-right: 5px dashed black;
}
</style>
</head>
<body>
<div>111</div>
</body>
</html>可以通过border-方向来设置单独的边框的样式
5）盒子实际大小初级计算公式
需求：盒子尺寸为400*400，背景绿色，边框为10px，实线黑色，如何完成？
> 盒子实际大小初级计算公式？
> 解决，当盒子被border撑大后，如何满足需求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 盒子尺寸 = width /height +边框线 */
width: 380px;
height: 380px;
background-color: green;
border: 10px solid black;
/* border会撑大盒子的尺寸 */
}
</style>
</head>
<body>
<div>111</div>
</body>
</html>如果让盒子的尺寸为400*400，又有边框，则需要将宽高进行相减边框
6）盒子模型案例
实现一个类似下面尺寸的盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 360px;
height: 360px;
background-color: #f6cad1;
border: 10px solid #030af1;
}
</style>
</head>
<body>
<div></div>
</body>
</html>7）新浪导航
需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果
布局顺序：从外往内，从上往下
每一个盒子的样式：
a.宽高
b.辅助的背景颜色
c.盒子模型的部分：border、padding、margin
d.其他样式：color、font-、text-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
height: 80px;
border-top: 5px solid #ef8b34;
border-bottom: 1px solid #edeef0;
}
a {
height: 80px;
width: 160px;
color: #4c4c4c;
display: inline-block;
text-decoration: none;
text-align: center;
line-height: 80px;
}
a:hover {
background-color: #edeef0;
color: orange;
}
</style>
</head>
<body>
<div>
<!-- 从外到内：先宽高背景色 放内容 调节内容的位置， 控制文字细节 -->
<a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a>
</div>
</body>
</html>4.内边距(padding）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
padding: 50px;
/* padding可以当作复合属性使用，表示单独设置某个方向的内边距 */
/* padding 最多取4个值 */
/* 四值：上 右 下 左 */
padding: 10px 20px 40px 80px;
/* 三值：上 左右 下 */
padding: 10px 40px 80px;
/* 两值：上下 左右 */
padding: 10px 80px;
/* 多值写法，永远都是从上开始顺时针转一圈，如果数不够，看对面 */
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>1）盒子实际大小终极计算公式
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
盒子实际大小终极计算公式：
解决：当盒子被border和padding 撑大后，如何满足需求？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 240px;
height: 240px;
background-color: pink;
border: 10px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html> 
2）CSS3盒模型（自动内减）
需求：盒子尺寸300*300，背景粉色，边框10px，实线黑色，上下左右20px的内边距，如何完成？
解决方法：
a.手动内减
操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦
b.自动内减
操作：给盒子设置box-sizing:border-box (默认为content-box)即可
优点：浏览器会自动计算多余大小，自动在内容中减去
我们设置边框和内边距以后，会撑大盒子，因为我们设置的宽高只是内容的宽高，不是整个盒子的宽高，但是如果想要在设置边框和内边距之后不撑大盒子，让设置的宽高为整个盒子的宽高，那么就设置box-sizing:border-box，那么整个盒子的宽高就是自己设置的宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid black;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>在没有加box-sizing之前是160*160，加了以后是100*100
5.外边距(margin)
外边距和内边距的写法一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 20px;
margin-left: 50px;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>外边距直接写margin，就是上下左右四个都是这个取值的外边距，如果想直接写某一个方向，就用-方向来设置某个方向就行，也可以设置2个值，也可以设置3个值
6.清除默认内外边距
1）场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
比如：body标签默认有margin:8px
比如：p标签默认有上下的margin
比如：ul标签默认有上下的margin和padding-left
2）解决方案：
橙色的是外边距，绿色的是内边距
3）实验：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>111</p>
<p>222</p>
<h1>h1</h1>
<ul>
<li>444</li>
</ul>
</body>
</html>
添加通配符属性：
<style>
* {
margin: 0;
padding: 0;
}
</style>
可以看到所有的样式自带边距的样式都没了
7.版心居中
版心就是网页的有效内容，给标签设置margin:0 auto就可以
0是指上下边距，auto是指左右边距，左右都为auto说明左右的边距相等，设置为auto，浏览器会自动计算，浏览器的宽度减去内容的宽度/2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 1000px;
height: 300px;
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<!-- 版心居中 -->
<!-- 版心：网页的有效内容 -->
<div>文字</div>
</body>
</html>
8.网页新闻列表案例
1）需求：根据设计图，通过PxCook量取数据，代码在网页中完成一致的效果
2）布局顺序：从外往内，从上往下
3）每一个盒子的样式：
a.宽高
b.辅助的背景颜色
c.盒子模型的部分：border、padding、margin
d.其他样式：color、font-、text-、......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.one{
width: 500px;
height: 400px;
/* box-sizing: border-box; */
border: 1px solid #cccccc;
margin: 50px auto;
/* background-color: pink; */
padding: 42px 30px 0;
}
* {
margin: 0;
padding: 0;
/* 所有的标签都可能设置内边距和border，都内减模式 */
box-sizing: border-box;
}
.biaoti {
color: #000000;
font-size: 30px;
border-bottom: 1px solid #ccc;
/* padding-bottom: 9px; */
}
/* 去掉列表的符号 */
ul {
list-style: none;
}
li {
height: 50px;
border-bottom: 1px dashed #ccc;
line-height: 50px;
padding-left: 28px;
}
a {
color: black;
text-decoration: none;
font-size: 18px;
}
</style>
</head>
<body>
<div class="one">
<h2 class="biaoti">最新文章/New Articles</h2>
<ul>
<li><a href="#">北京招聘网页设计、平面设计、php</a></li>
<li><a href="#">体验javascript的魅力</a></li>
<li><a href="#">jquery世界来临</a></li>
<li><a href="#">网页设计的梦想</a></li>
<li><a href="#">jquery中的响应式编程是什么</a></li>
</ul>
</div>
</body>
</html>
9.外边距折叠现象-合并现象
1）场景：垂直布局的块级元素，上下的margin会合并
2）结果：最终两者距离为margin的最大值
3）解决方案：避免就好，只给其中一个盒子设置margin即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 50px;
height: 50px;
background-color: pink;
margin-bottom: 50px;
}
.two {
width: 50px;
height: 50px;
background-color: pink;
margin-top: 60px;
}
</style>
</head>
<body>
<div class="one">
111
</div>
<div class="two">
222
</div>
</body>
</html>
盒子111和盒子222之间的距离为60px,所以要想让111和222之间距离为50，那么只需要设置111的下外边距或者是222的上外边距为50px就可以
10.外边距折叠现象-塌陷现象
1）场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
2）结果：导致父元素一起往下移动
3）解决方案：
a.给父元素设置border-top或者是padding-top(分隔父子元素的margin-top)
b.给父元素设置overflow:hidden
c.把子级转换成行内块元素
d.设置浮动
4）需求：设置1个150*150的父亲盒子，设置一个50*50的儿子盒子，让儿子盒子的顶部距离父亲盒子为30px的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 150px;
height: 150px;
background-color: pink;
}
.son {
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>方案一：
直接给father设置padding-top
<style>
.father {
width: 150px;
height: 150px;
background-color: pink;
padding-top: 30px;
}
.son {
width: 50px;
height: 50px;
background-color: green;
}
</style>
方案二：给son设置margin-top
<style>
.father {
width: 150px;
height: 150px;
background-color: pink;
}
.son {
width: 50px;
height: 50px;
background-color: green;
margin-top: 30px;
}
</style> 
此时会发现30像素作用到了父亲的上面，儿子和父子的上面还是紧挨着，这种现象叫做塌陷现象，解决方案，第一种就是给父亲设置padding-top，需要注意的就是给父亲设置padding-top以后，就不需要再给儿子设置margin-top了， 不然会设置成2次
3）解决塌陷问题的方案一：
只给父亲设置30px，儿子不设置
<style>
.father {
width: 150px;
height: 150px;
background-color: pink;
padding-top: 30px;
box-sizing: border-box;
}
.son {
width: 50px;
height: 50px;
background-color: green;
}
</style>方案二：
给父亲设置border-top，给儿子设置margin-top
<style>
.father {
width: 150px;
height: 150px;
background-color: pink;
border-top: 1px solid black;
box-sizing: border-box;
}
.son {
width: 50px;
height: 50px;
background-color: green;
margin-top: 30px;
}
</style>方案三：给父亲设置overflow:hidden，儿子设置margin-top
<style>
.father {
width: 150px;
height: 150px;
background-color: pink;
overflow: hidden;
box-sizing: border-box;
}
.son {
width: 50px;
height: 50px;
background-color: green;
margin-top: 30px;
}
</style>方案四：父亲不进行任何的设置，给儿子设置margin-top，把儿子转换成行内块
<style>
.father {
width: 150px;
height: 150px;
background-color: pink;
box-sizing: border-box;
}
.son {
width: 50px;
height: 50px;
background-color: green;
margin-top: 30px;
display: inline-block;
}
</style>12.行内元素内外边距问题
对于行内元素来说，设置内外边距，他的左右是起效果的，但是上下是不起效果的，如果想要上下有效果，就给他设置line-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
/* margin: 100px; */
padding: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<span>span</span> <span>span</span>
</body>
</html>
十四、浮动
让标签在一行排，且没有问题的一行排布，左右排
1.结构伪类选择器
目标：能够使用结构伪类选择器在HTML中定位元素
1）作用与优势
1）作用：根据元素在HTML中的结构关系查找元素
2）优势：减少对于HTML中类的依赖，有利于保持代码整洁
3）场景：常用于查找某父级选择器中的子元素
2）选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选中第一个 */
li:first-child {
background-color: green;
}
/* 选中最后一个 */
li:last-child {
background-color: red;
}
/* 选中第5个 */
li:nth-child(5) {
background-color: blue;
}
/* 选中倒数第一个 */
li:nth-last-child(2) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>这是第1个li标签</li>
<li>这是第2个li标签</li>
<li>这是第3个li标签</li>
<li>这是第4个li标签</li>
<li>这是第5个li标签</li>
<li>这是第6个li标签</li>
<li>这是第7个li标签</li>
<li>这是第8个li标签</li>
</ul>
</body>
</html>
3） n的注意点：
a.n为：0，1，2，3，4，5，6......
b.通过n可以组成常见公式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 第偶数个li的标签的背景 */
li:nth-child(2n) {
background-color: aqua;
}
/* 第奇数个li标签的背景 */
li:nth-child(2n+1) {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>第1个li标签</li>
<li>第2个li标签</li>
<li>第3个li标签</li>
<li>第4个li标签</li>
<li>第5个li标签</li>
<li>第6个li标签</li>
<li>第7个li标签</li>
<li>第8个li标签</li>
</ul>
</body>
</html>
4）结构伪类选择器的易错点
问题：在下列案例中，如果需要找到第一个a标签，如何去查找？
多级嵌套的时候需要写父类，如果父类和子类只是一层级关系就不需要写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:first-child a{
color: red;
}
li:nth-child(2) a:nth-child(3) {
color: pink;
} */
/* 这个会使所有的标签都是红色*/
a:first-child {
color: red;
}
</style>
</head>
<body>
<ul>
<li><a>我是第一个超链接</a></li>
<li>
<a>我是第二一个超链接</a>
<a>我是第二二个超链接</a>
<a>我是第二三个超链接</a>
<a>我是第二四个超链接</a>
<a>我是第二五个超链接</a>
<a>我是第二六个超链接</a>
</li>
<li><a>我是第三个超链接</a></li>
<li><a>我是第四个超链接</a></li>
<li><a>我是第五个超链接</a></li>
<li><a>我是第六个超链接</a></li>
<li><a>我是第七个超链接</a></li>
<li><a>我是第八个超链接</a></li>
</ul>
</body>
</html>
如果设置父类，直接给a:first设置就会导致下面的效果，都是红色
2.伪元素
1）目标：能够使用伪元素在网页中创建内容
2）伪元素：一般在页面中的非主体内容可以使用伪元素
3）区别：
a.元素：HTML设置的标签
b.伪元素：由CSS模拟出来的标签效果
4）种类：
5）注意点：
a.必须设置content属性才能生效
b.伪元素默认是行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.father::before {
/* content必须添加，否则不生效 */
content: '老鼠';
color: green;
width: 100px;
height: 100px;
background-color: red;
/* 默认是行内元素，宽高不生效 */
}
.father::after {
content: '大米';
}
</style>
</head>
<body>
<!-- 伪元素，通过css创建标签，装饰性的不重要的小图 -->
<!-- 找父级，在这个父级里面创建子级标签 -->
<div class="father">爱</div>
</body>
</html>我们并没有添加标签来存放文字，但是我们使用css伪元素创建了标签，可以显示文字
3.标准流
1）目标：能够认识标准流的默认排布方式极其特点
2）标准流：又称为文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
3）常见标准排版规则
a.块级元素：从上往下，垂直布局，独占一行
b.行内元素或行内块元素：从左往右，水平布局，空间不够自动拆行
4.浮动
目标：能够认识使用浮动的作用，了解浮动的特点
学习路径：
1）浮动的作用
2）浮动的代码
a.我们上面设置过div横向排布，将这个div设置成行内块，但是如果将div标签进行了换行或者是添加了空格，那么div之间就有了间隙，不能够完美排布。横排无法完美排布有边距，竖排没有边距，紧挨着
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
display: inline-block;
}
.one {
background-color: pink;
}
.two {
background-color: green;
}
</style>
</head>
<body>
<!-- 标签换行会添加空格 -->
<div class="one">111</div>
<div class="two">222</div>
</body>
</html>
b.使用浮动实现图文环绕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
float: left;
}
</style>
</head>
<body>
<img src="1.jpg">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</body>
</html>没有实现左浮动之前的效果就是文字在图片的后面进行排布
实现以后就是图文环绕
c.浮动的简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
}
.one {
background-color: pink;
float: left;
}
.two {
background-color: green;
float: left;
}
</style>
</head>
<body>
<!-- 标签换行会添加空格 -->
<div class="one">111</div>
<div class="two">222</div>
</body>
</html>可以看到即使换行了，两个div也是紧挨着
3）浮动的特点
a.浮动元素会脱离标准流（简称：拖标），在标准流中不占中心位置，相当于从地面飘到了空中
b.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
c.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
d.浮动元素有特殊的显示效果（一行可以显示多个且可以设置宽高）
e.注意点：浮动的元素不能通过text-align:center或者是margin:0 auto来设置居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 默认浮动的标签顶对齐 */
/* 浮动之后的表现是在一行显示，且宽高生效，浮动后的标签具备行内块特点 */
/* 因为有浮动，不能生效，盒子无法水平居中 */
.one {
width: 100px;
height: 100px;
background-color: pink;
}
.two {
width: 200px;
height: 200px;
background-color: green;
}
.three {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<div class="one">111</div>
<div class="two">222</div>
<div class="three">333</div>
</body>
</html>没有设置浮动前，3个标签是按行排的
给标签一设置左浮动
.one {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}效果如下，给标签一设置了左浮动，那么这个标签就悬空了，第二个标签就变成了浏览器中的第一个标签，标签悬空，但是他后面那个标签的文字，还是会显示到第一个标签的左边，第一个标签不会覆盖掉第二个标签的文字
给第二个标签和第一个标签同时加左浮动，那么两个标签都悬空，第三个标签成为了浏览器当中的第一个标签，两个会覆盖到第三个标签的上面，第二个标签会在第一个标签的后面排布
.one {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: green;
float: left;
}
如果给3个标签都设置左浮动，那么都会悬空紧挨着排布，浮动的会找它的上一个浮动标签进行排布
4）浮动的案例
如果要实现左右排版的话，需要进行浮动，但是浮动的话是无法实现版心居中的，所以说可以设置一个父元素，在给他的子元素进行布局，设置浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
height: 40px;
background-color: #333333;
}
.two {
height: 100px;
width: 1226px;
background-color: #ffc0cb;
margin: 0 auto;
}
.three {
height: 460px;
width: 1226px;
margin: 0 auto;
}
.four {
height: 460px;
width: 234px;
background-color: #ffa500;
float: left;
}
.five {
width: 992px;
height: 460px;
background-color: #87ceeb;
float: left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three">
<div class="four"></div>
<div class="five"></div>
</div>
</body>
</html>
5）css书写顺序（浏览器的执行效率更高）
a.浮动/display
b.盒子模型相关的属性： margin border padding 宽高背景色
c.文字的样式
6）小米案例
需要注意的是，如果进行排布的话，每一条或者是每一行，都可以使用列表的方式来排布，也可以使用创建多个div的方式来排布，但是最好是使用li来设置排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 1226px;
height: 614px;
margin: 0 auto;
}
.left {
float: left;
margin-right: 14px;
width: 234px;
height: 614px;
background-color: #800080;
box-sizing: border-box;
}
.right {
float: right;
width: 978px;
height: 614px;
float: right;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
ul {
/* 去掉列表的前面的点点 */
list-style: none;
}
li {
width: 234px;
height: 300px;
background-color: #87ceeb;
float: left;
margin-right: 14px;
margin-bottom: 14px;
}
/* 第4个li和 */
.content .right li:nth-child(4n) {
margin-right: 0px;
}
.right ul li:nth-child(n+5) {
margin-bottom: 0px;
}
</style>
</head>
<body>
<!-- 如果父级的宽度不够，那么会换行，浮动不上去 -->
<div class="content">
<div class="left"></div>
<div class="right">
<!-- 用li或者是8个div都可以 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
</body>
</html>
7）网页导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 640px;
height: 50px;
margin: 0 auto;
}
li {
float: left;
width: 80px;
height: 50px;
background-color: #ffc0cb;
text-align: center;
}
li:hover {
background-color: green;
}
a {
font-size: 16px;
margin: 0 auto;
color: white;
text-decoration: none;
line-height: 50px;
}
</style>
</head>
<body>
<!-- 主导航里面需要使用li里面包裹a标签 -->
<ul>
<li><a href="#">新闻1</a></li>
<li><a href="#">新闻2</a></li>
<li><a href="#">新闻3</a></li>
<li><a href="#">新闻4</a></li>
<li><a href="#">新闻5</a></li>
<li><a href="#">新闻6</a></li>
<li><a href="#">新闻7</a></li>
<li><a href="#">新闻8</a></li>
</ul>
</body>
</html>注意点：
1）margin:0 auto使标签居中只对块级元素生效
2）要是想要让行内元素和行内块元素居中显示，那么需要对他的父级元素进行设置text-algin:center
3）浮动只有左浮动和右浮动
5.清除浮动
1）清除浮动介绍
a.含义：清除浮动带来的影响
b.影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
c.原因：子元素浮动后->不占位置
d.目的：需要父元素有高度，从而不影响其他网页元素的布局
2）布局的本身的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top {
margin: 0 auto;
width: 1000px;
height: 300px;
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>效果：
3）去除掉上面父级的div的高度
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}效果如下，因为子级是浮动的，所以对于浏览器来说第一个元素是底部的元素，因为有时候我们是不会提前设置高度的，比如后台返回多少数据我们不确定，所以不能提前设置高度
4）父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受到影响，显示到上面的位置
5）清除浮动的方法：（主要有5种）
a.直接设置父元素高度
特点：简单粗暴、方便
缺点：有些布局中不能固定父元素高度，如：新闻列表、京东推荐模块
.top {
margin: 0 auto;
width: 1000px;
height: 300px;
background-color: pink;
}b.额外标签法
操作：
在父元素内容的最后添加一个块级元素
给添加的块级元素设置clear:both
特点：
会在页面中添加额外的标签，会让页面的HTML结构变复杂
<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="bottom"></div>
</body> .clearfix {
clear: both;
}c.单伪元素清除法
操作：用伪元素代替了额外标签
特点：
优点：项目中使用，直接给标签加类即可清除浮动
<body>
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
<!-- 通过css添加标签 -->
</div>
<div class="bottom"></div>
</body> /* 单伪元素清除浮动 */
.clearfix::after {
content: '';
/* 伪元素添加的标签是行内，需要块 */
display: block;
clear: both;
/* 为了兼容性 */
height: 0;
visibility: hidden;
}d.双伪元素清除法
操作：
特点：
优点：项目中使用，直接给标签加类即可清除浮动
<body>
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body> /* .clearfix::before 作用：解决外边距塌陷问题 */
/* 外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置 */
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after {
clear: both;
}e.给父元素设置overflow：hidden
操作：直接给父元素设置overflow：hidden
特点：优点，方便
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
overflow: hidden;
}<body>
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>十五、定位
目标：能够说出定位的常见应用场景，并且能够说出不同定位方式的特点
学习路径：
1.定位的基本介绍
1）网页常见布局方式
a.标准流
块级元素独占一行---->垂直布局
行内元素/行内块元素一行显示多个----> 水平布局
b.浮动（浮动只对块级元素起作用，并且只能设置左浮动和右浮动）
可以让原本垂直布局的块级元素变成水平布局
c.定位
可以让元素自由的摆放在网页的任意位置
一般用于盒子之间的层叠情况
2.定位的基本使用
1）定位的常见应用场景
a.可以解决盒子与盒子之间的层叠问题
定位之后的元素层级最高，可以层叠在其他盒子的上面
b.可以让盒子始终固定在屏幕的某个位置
2）使用定位的步骤
a.设置定位方式
属性名；position
常见属性值；
b.设置偏移值
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般就是就近原则（离哪边近用那个）
3.静态定位
1）介绍：静态定位是默认值，就是之前认识的标准流
2）代码：postion:static;
3）注意点：
a.静态定位就是之前的标准流，不能通过方位属性进行移动
b.之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* css书写顺序 1.定位/浮动/display 2.盒子模型 3.文字属性 */
.box {
position: static;
left: 100px;
top: 200px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<div class="box">box</div>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
4.相对定位
1）介绍：自恋型定位，相对于自己之前的位置进行移动
2）代码：position:relative
3）特点：
a.需要配合方位属性进行移动
b.相对于自己原来位置进行移动
c.在页面中占位置---->没有脱标
4）应用场景：
a.配合绝对定位组CP(子绝父相）
b.用于小范围移动
5）注意点：
如果left和right都有，以left为准，如果top和bottom都有，以top为准
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* css书写顺序 1.定位/浮动/display 2.盒子模型 3.文字属性 */
.box {
position: relative;
left: 100px;
top: 200px;
/* 1.占有原来的位置
2.仍然具备标签原有的显示模式特点
3.改变原来残章自己的位置
*/
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<div class="box">box</div>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
5.绝对定位
1）介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
2）代码：position:absolute;
3）特点：
a.需要配合方位属性实现移动
b.默认相对于浏览器可视区域进行移动
c.在页面中不占位置---->已经脱标
4）应用场景：
配合绝对定位组CP（子绝父相）
5）使用
先找已经定位的父级，如果有这样的父级就以这个父级为参照物
有父级，但父级没有定位，以浏览器窗口为参照进行定位
6）情况一：父级没有定位的时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* css书写顺序 1.定位/浮动/display 2.盒子模型 3.文字属性 */
.box {
/* 绝对定位：
先找已经定位的父级，如果有这样的父级就以这个父级为参照物
有父级，但父级没有定位，以浏览器窗口为参照进行定位
*/
position: absolute;
left: 0;
top: 0;
/*
1.脱标不占位置
2.改变标签的显示模式特点：具体行内块特点（在一行共存，且宽高生效）
*/
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<div class="box">box</div>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>
6.子绝父相
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
}
.son {
/* 父级相对，儿子绝对 */
position: relative;
width: 300px;
height: 300px;
background-color: skyblue;
}
.sun {
position: absolute;
right: 20px;
bottom: 50px;
width: 200px;
height: 200px;
background-color: green;
}
/* 绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位 */
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="sun"></div>
</div>
</div>
</body>
</html>
2）子绝父相水平居中案例
需求：使用子绝父相，让子盒子在父盒子中水平居中（父子元素任意宽度下都能实现）
使用绝对定位的盒子不能使用margin:0 auto来设置居中
方法一：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -150px;
width: 300px;
height: 300px;
background-color:pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>方法二：
使用位移，会自动计算宽度高度的一半。
<style>
.box {
position: absolute;
left: 50%;
top: 50%;
/* 位移：自己宽度高度的一半 */
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
background-color:pink;
}
</style>3）二维码显示案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */
.nav {
height: 40px;
border-bottom: 1px solid #ccc;
}
/* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */
ul {
list-style: none;
width: 1200px;
margin: 0 auto;
}
ul li {
float: left;
width: 20%;
height: 40px;
border-right: 1px solid #ccc;
/* 自动内减 */
box-sizing: border-box;
text-align: center;
line-height: 40px;
}
ul .last {
border-right: none;
}
ul li a {
/* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 */
/* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */
display: block;
/* 宽度不设置块元素会默认占满一行 */
height: 40px;
text-decoration: none;
color: #000;
}
ul li .app {
position: relative;
}
.code {
position: absolute;
left: 50%;
top: 41px;
transform: translate(-50%);
}
</style>
</head>
<body>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">我要投资</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 -->
<li><a href="#" class="app">手机微金所 <img src="./images/code.jpg" alt="" class="code"> </a></li>
<li class="last"><a href="#">个人中心</a></li>
</ul>
</div>
</body>
</html>
4）banner定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.banner {
position: relative;
margin: 0 auto;
width: 1226px;
height: 600px;
}
.mask {
position: absolute;
left: 0;
bottom: 0;
height: 150px;
/* 绝对定位的盒子显示模式具备行内块特点，加宽高生效，如果没有宽度也没有内容，盒子的宽度尺寸就是0 */
/* 如果子级和父级的宽度相同,子级的宽度可以使用100% */
width: 100%;
/* width: 1226px; */
background-color: rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<div class="banner">
<img src="images/bg.jpg" alt="">
<div class="mask"></div>
</div>
</body>
</html>
7.固定定位
1）介绍：死心眼型定位，相对于浏览器进行定位移动
2）代码：position:fixed;
3）特点：
a.需要配合方位属性实现移动
b.相对于浏览器可视区域进行移动
c.在页面中不占位置-->已经脱标
4）应用场景：
让盒子固定在屏幕中的某个位置
5）浏览器进行滑动，使用了固定定位的不随浏览器的移动而移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* css书写顺序 1.定位/浮动/display 2.盒子模型 3.文字属性 */
.box {
position: fixed;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: pink;
/*
1.脱标-不占位置
2.改变位置参考浏览器窗口
3.具备行内块特点
*/
}
</style>
</head>
<body>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<div class="box">box</div>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>
8.元素的层级关系
1）不同布局方式元素的层级关系：
标准流<浮动<定位
2）不同定位之间的层级关系：
a.相对、绝对、固定默认层级相同
b.此时HTML中写在下面的元素层级更高，会覆盖掉上面的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
.one {
position: absolute;
left: 20px;
right: 50px;
background-color: pink;
z-index: 1;
}
.two {
position: absolute;
left: 50px;
top: 100px;
background-color: skyblue;
}
/*
默认情况下，定位的盒子，后来者居上
z-index整数，取值越大，显示顺序越靠上，z-index的默认值是0
注意：z-index必须配合定位才生效
*/
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>十六、装饰
目标：能够完成元素的装饰效果
学习路径：
1.垂直对齐方式
1）认识基线（了解）
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
行内、行内块都可以看成是一个字
2）文字对齐方式
场景：解决行内/行内块元素垂直对齐方式
问题：当图片和文字在一行中显示时，其实底部不是对齐的
3）垂直对齐方式
a.属性名：vertical-align
b.属性值：
4）主要是解决两个行内块或者行内标签的对齐方式
a.案例一：让两个input标签对齐
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 浏览器遇到行内和行内块标签当作文字处理，默认文字是按基线对齐 */
input {
height: 50px;
box-sizing: border-box;
vertical-align: middle;
}
</style>
</head>
<body>
<input type="text"><input type="button" name="" id="" value="搜索">
</body>
b.案例二：让图片和input标签垂直对齐
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
vertical-align: middle;
}
</style>
</head>
<body>
<img src="images/1.jpg" alt=""><input type="text">
</body>
c.案例三：让input标签在盒子的顶部没有间隙
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
}
input {
vertical-align: top;
}
</style>
</head>
<body>
<div class="father">
<input type="text" name="" id="">
</div>
</body>
d.案例四：div不加高度，里面放置一个图片，默认图片是占不满div的高度的
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
background-color: pink;
}
img {
/* 浏览器默认把行内和行内块标签当文字处理，默认基线对齐，所以把格式转换掉，转换成块级元素，就没有基线对齐 */
/* vertical-align: middle; */
}
</style>
</head>
<body>
<div class="father">
<img src="images/1.jpg" alt="">
</div>
</body>
解决方案一：
设置vertical-align:middle
方案二：
设置display:block，因为基线对齐是针对行内和行内块的，所以说转换成块级元素就不会显示有问题
img {
/* 浏览器默认把行内和行内块标签当文字处理，默认基线对齐，所以把格式转换掉，转换成块级元素，就没有基线对齐 */
/* vertical-align: middle; */
display: block;
}
e.案例五，让图片水平垂直居中，图片垂直居中，需要给父级设置行高等于高度，图片设置vertical-align为middle。让图片水平居中，需要给父级设置text-align为center
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 600px;
height: 600px;
background-color: pink;
line-height: 600px;
text-align: center;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="father">
<img src="images/1.jpg" alt="">
</div>
</body>
2.光标类型
1）场景：设置鼠标光标在元素上时显示的样式
2）属性名：cursor
3）常见属性值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/* 小手效果 */
/* cursor: pointer; */
/* 工字形 表示可以复制*/
/* cursor: text; */
/* move 十字形光标，表示用户可以移动 */
cursor: move;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>3.边框圆角
1）边框圆角
场景：让盒子四个角变的圆润，增加网页细节、提升用户体验
属性名：border-radius
常见取值：数字+px、百分比
原理：
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
margin: 50 auto;
width: 200px;
height: 200px;
background-color: pink;
/* 一个值表示4个角都是相同的 */
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<style>
.box {
margin: 50 auto;
width: 200px;
height: 200px;
background-color: pink;
/* 一个值表示4个角都是相同的 */
/* border-radius: 10px; */
/* 4个值，左上，右上，右下，左下 -----从左上顺时针转一圈 */
border-radius: 10px 20px 40px 80px;
}
</style>
<style>
.box {
margin: 50 auto;
width: 200px;
height: 200px;
background-color: pink;
/* 一个值表示4个角都是相同的 */
/* border-radius: 10px; */
/* 4个值，左上，右上，右下，左下 -----从左上顺时针转一圈 */
/* border-radius: 10px 20px 40px 80px; */
/* 没有赋值的看对角 */
border-radius: 10px 40px 80px;
}
</style> 
<style>
.box {
margin: 50 auto;
width: 200px;
height: 200px;
background-color: pink;
/* 一个值表示4个角都是相同的 */
/* border-radius: 10px; */
/* 4个值，左上，右上，右下，左下 -----从左上顺时针转一圈 */
/* border-radius: 10px 20px 40px 80px; */
/* 没有赋值的看对角 */
border-radius: 10px 40px 80px;
/* 没有赋值的看对角 */
border-radius: 10px 80px;
}
</style>
2）边框圆角的常见应用
a.画一个正圆
盒子必须是正方形
设置边框圆角为盒子宽度的一半---->border-radius:50%
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
/* 50%,取盒子尺寸的一半 */
border-radius: 50%;
}
</style>
b.胶囊按钮
盒子要求是长方形
设置----->border-radius：盒子高度的一半
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 80px;
background-color: pink;
border-radius: 40px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
4.overflow溢出部分显示效果
1）溢出部分：指的是盒子内容部分所超出盒子范围的区域
2）场景：控制内容溢出部分的显示效果，如：隐藏、显示、滚动条.....
3）属性名：overflow
4）常见属性值：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
/* 溢出隐藏 */
/* overflow: hidden; */
/* 滚动：无论内容是否超出都显示滚动条的位置 */
}
</style>
</head>
<body>
<div class="box">我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果我是div,测试溢出显示效果</div>
</body>默认超出盒子的部分是显示的
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
/* 溢出隐藏 */
overflow: hidden;
/* 滚动：无论内容是否超出都显示滚动条的位置 */
}
</style>设置为hidden之后就只显示盒子区域的内容
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
/* 溢出隐藏 */
/* overflow: hidden; */
/* 滚动：无论内容是否超出都显示滚动条的位置 */
overflow: scroll;
}
</style>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
/* 溢出隐藏 */
/* overflow: hidden; */
/* 滚动：无论内容是否超出都显示滚动条的位置 */
/* overflow: scroll; */
/* 滚动：auto能够自动判断是否显示滚动条，如果文字内容超出了盒子范围，就显示，如果没有超出，就不显示 */
overflow: auto;
}
</style> 
5.元素本身隐藏
1）场景：让某元素本身在屏幕中不可见。如：鼠标hover之后元素隐藏
2）常见属性：
a.visibility:hidden
b.display:none
3）区别：
visibility:hidden是占位的
display:none是不占位的
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
.one {
/* 占位隐藏效果 */
visibility: hidden;
/* 不占位隐藏 */
/* display: none; */
background-color: pink;
}
.two {
background-color: green;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>使用visibility的效果：
使用display的效果：
<style>
div {
width: 200px;
height: 200px;
}
.one {
/* 占位隐藏效果 */
/* visibility: hidden; */
/* 不占位隐藏 */
display: none;
background-color: pink;
}
.two {
background-color: green;
}
</style> 
4）实际案例：二维码案例，让鼠标悬停的时候二维码显示隐藏
.code {
position: absolute;
left: 50%;
top: 41px;
transform: translate(-50%);
display: none;
}
/* 鼠标悬停 显示二维码图片 */
.nav li a:hover img {
display: block;
}鼠标悬停的时候照片隐藏，所以是a:hover img
6.元素整体透明度
1）场景：让某元素整体（包括内容）一起变透明
2）属性名：opacity
3）属性值：0~1之间的数字
1表示完全不透明
0表示完全透明
4）opacity会让元素整体透明，包括里面的内容，如：文字、子元素等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
opacity: 0.5;
}
</style>
</head>
<body>
<div>
<img src="images/product.png" alt="">
这是一个透明的文字
</div>
</body>
</html>
7.（拓展）边框合并
1）场景：让相邻表格边框进行合并，得到细线边框效果
2）代码：border-collapse：collapse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
border: 1px solid #000;
/* 注意: 一定要加给table标签 : 做细线表格 */
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- border="1" width="400" height="300"cellspacing="0" -->
<table>
<caption><h3>前端与移动开发学员学习情况</h3></caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小姐姐</td>
<td>女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>小哥哥</td>
<td>男</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>大姐姐</td>
<td>女</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">总成绩</td>
<td colspan="2">300</td>
</tr>
</tfoot>
</table>
</body>
</html>
8.（拓展）用CSS画三角形
1）场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成
2）实现原理：
利用盒子边框完成
3）实现步骤：
a.设置一个盒子
b.设置四周不同颜色的边框
c.将盒子宽高设置为0，仅保留边框
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* width: 100px;
height: 100px; */
width: 0;
height: 0;
/* background-color: pink; */
/* 如果是transparent 透明 */
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid orange;
}
</style>
</head>
<body>
<div></div>
</body>
十七、选择器拓展
目标：能够完成伪类选择器选择元素的不同状态
学习路径：
1.链接伪类选择器
2.焦点伪类选择器
1）场景：用于选中元素获取焦点时状态，常用于表单控件
2）选择器语法：
3）效果：
表单控件获取焦点时默认会显示外部轮廓线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 获得焦点的状态 */
/* 获得焦点：把光标点到input里面 */
input:focus {
background-color: pink;
}
</style>
</head>
<body>
<input type="text" name="" id="">
</body>
</html> 
当获取到焦点，鼠标在文本框里面的时候，文本变颜色，当鼠标移出，恢复到原来的颜色
3.属性选择器
1）场景：通过元素上的HTML标签属性来选择元素，常用于选择input标签
2）选择器语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* text:背景色是粉色 password背景色是skyblue */
input[type="text"] {
background-color: pink;
}
input[type="password"] {
background-color: skyblue;
}
</style>
</head>
<body>
<input type="text" name="" id="">
<input type="password" name="" id="">
</body>
</html>
扫一扫
2095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
