前端三剑客_CSS
1、CSS简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <style>
/* 这个样式将会应用到页面中所有的p标签中的内容。 */
p{
color: yellow;
font-size: 50px;
}
</style> -->
</head>
<body>
<!--
网页分成三部分：
结构（HTML）；
表现（CSS）；
行为（JavaScript）；
CSS：
样式层叠表；
网页实际上是一个多层的结构，通过CSS考验分别为网页的每一层来设置样式，而最终我们能看到的只是网页的最上边一层。
总之一句话：CSS用来设置网页的最上边一层。
-->
<!--
使用CSS来修改元素的样式。
第一种方式（内联样式也叫行内样式）：
在标签内部通过style属性来设置元素的样式。
缺点：
1）使用内联样式只能对一个标签生效，如果希望影响到多个元素必须在每个元素中中都复制一遍。
2）当样式改变时，我们必须要一个一个的修改，非常的不方便。
注意：在开发的时候绝对不要使用内联样式。
-->
<!-- <p style="color: red; font-size: 20px;">少小离家老大回，乡音无改鬓毛衰</p> -->
<!--
第二种方式（内部样式表）：
将样式编写到head中的style标签里面，然后通过CSS的选择器来选中元素并为其设置各种样式，
可以同时为多个标签设置样式，并且修改时只需要修改移除即可全部应用。
内部样式表更加方便对样式进行复用。
缺点：
我们的内部样式表只能对一个网页器作用，它里边的样式不能跨页面进行复用。
-->
<!--
第三种方式（外部样式表）（开发时推荐使用）：
- 可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件。
语法：
<link rel="stylesheet" href="./style.css"> 注意：href是文件路径。
- 外部样式表心意通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用。
使样式可以在不同的页面之间进行复用。
- 将样式编写到外部CSS文件汇总，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
-->
<link rel="stylesheet" href="./style.css">
<p>少小离家老大回，乡音无改鬓毛衰</p>
</body>
</html>
2、CSS基本语法
<!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的基本语法：
选择器{
声明块；
}
选择器：通过选择器可以选中页面中个的指定元素。比如 p 的作用就是选中页面中所有的p元素。
声明块：通过声明块来指定要为元素设置的样式。
声明块由一个一个的声明组成。
声明块是一个名值对结构，一个样式名对应一个样式值，名和值之间以英文冒号“:”连接，以英文分号“;”结尾。
*/
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>
3、选择器
1、常用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
1）元素选择器
作用：根据标签来选中指定的元素。
语法：标签名{}
如：p{} h1{} div{}
2）id选择器
作用：根据元素的id属性值选中一个元素，注意不同元素之间的id属性应该不能相同。
语法：#id属性值{}
如：#box{} #red{}
3）类选择器
作用：根据元素的class属性值选中一组元素。
语法：.class属性值{}
如：.blue{} .abc{}
注意：元素属性中可以同时指定多个class的值，多个值之间使用空格隔开。
如：
CSS:
.red{
color:red;
}
.abc{
font-size:40px;
}
html:
<p class = "red abc">儿童相见不相识，笑问客从何处来</p>
4）通配选择器
作用：选中页面中的所有元素。
语法：*{}
如：*{color:red;}
-->
</body>
</html>
2、复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1、将class为red元素的字体设置为红色。 */
.red{
color: red;
}
/* 2、将class为red的div字体大小设置为30px */
/*
交集选择器（相当于逻辑“与”）：
作用：选中同时符合多个条件的元素。
语法：选择器1选择器2选择器3选择器n{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头。
*/
div.red{ /*选择div元素，且元素属性的类名是red的元素。*/
font-size: 30px;
}
.a.b.c{ /*元素的属性类名必须同时是a b c的元素*/
color: blue;
}
/* 下面的这种方式不太推荐使用，但是语法是没有错误的，因为通过id就可以唯一确定一个元素了，没必要在使用元素选择器。 */
/* div#box1{} */
/*
3、选择器分组（并集选择器，相当于逻辑“或”）
作用：同时选择多个选择器对应的元素。
语法：选择器1,选择器2,选择器3,选择器n{}
如：#b1,.p1,h1,span,div.red{}
*/
h1, span{
color: green;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<div class="red2 a b c">我是div2</div>
<h1>我是h1元素</h1>
<span>我是span元素</span>
</body>
</html>
3、关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
为div的子元素span设置一个红色字体（为div直接包含的span设置一个字体颜色）。
1、子元素选择器
作用：选中指定父元素的指定子元素。
语法：父元素 > 子元素
*/
div.one > span {
color: orange;
}
/*
2、后代元素选择器
作用：选中指定元素内的指定后代元素。
语法：祖先 后代
*/
/* div span {
color: skyblue;
} */
/*
3、选择下一个兄弟选择器（必须是紧挨着）
语法：兄元素 + 弟元素
注：这种方法是，兄和弟元素必须是紧挨着的且只会选择一个弟元素。
4、选择下边所有的兄弟选择器
语法：兄 ~ 弟
注：这种方法是，选择兄后面所有的弟元素。
这里的3和4两种选择器都是向下选择，出现在它上面的元素不会被选择到。
*/
/* p + span {
color: red;
} */
/* p ~ span {
color: blue;
font-size: 30px;
} */
</style>
</head>
<body>
<!--
父元素：直接包含子元素的元素叫做父元素；
子元素：直接被父元素包含的元素是子元素；
祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是他的祖先元素；
后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素；
兄弟元素：拥有相同父元素的元素时兄弟元素；
-->
<div class="one">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
</body>
</html>
4、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
[属性名] 选择含有指定属性的元素；
[属性名=属性值] 选择含有指定属性和属性值的元素；
[属性名^=属性值] 选择以指定值开头的元素
[属性名$=属性值] 选择以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有特定值的元素
注意：可以在方括号[]的前面加上元素，表示选择特定的元素。
*/
/* p[title] */ /*选择p标签中含有title属性的p元素。*/
/* p[title=abc] */
/* p[title^=abc] */
/* p[title$=abc] */
p[title*=e]
{
color: red;
}
</style>
</head>
<body>
<!-- 属性title设置的值，在页面中当鼠标移动到对应值上是，会出现title设置的值。 -->
<p title="abc">少小离家老大回，</p>
<p title="abcdef">乡音无改鬓毛衰。</p>
<p title="helloabc">儿童相见不相识，</p>
<p>笑问客从何处来。</p>
</body>
</html>
5、伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 将ul李的第一个li设置为红色。 */
/*
伪类（不存在的类，特殊的类）
1）伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素。
2）伪类一般情况下都是:开头。
比如：
:first-child 选择第一个元素
:last-child 选择最后一个元素
:nth-child() 选中第n个子元素。
特殊值：
n 第n个元素， n的范围从0到正无穷。
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数为的元素
以上这些伪类都是根据所有的子元素进行排序，即并不是指某一个类型。
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功和上述的类似，不通点是它们在同类型元素中进行排序。
:not() 否定伪类，将符合条件的元素从选择器中去除。
*/
/* ul > li:nth-child(2) {
color: red;
} */
/* ul > li:last-child{
color: red;
font-size: 30px;
} */
/* ul > li:nth-child(2){
color: blue;
font-size: 50px;
} */
/* ul > li:first-of-type {
color: red;
font-size: 40px;
} */
/*在ul标签中的所有li标签中，除了第二个li标签外，其它的颜色全部为yellogreen*/
/* ul > li:not(:nth-of-type(2)){
color: yellowgreen;
} */
</style>
</head>
<body>
<!-- ul>li*5 按tab键，快速生成下成ul li 标签 -->
<ul>
<span>我是一个span</span>
<li>第〇个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
6、超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* :link 用来表示没访问过的连接（正常的连接） */
a:link{
color: red;
}
/* :visited 用来表示访问过的连接，由于隐私原因，visited这个伪类只能修改连接的颜色。 */
a:visited{
color: orange;
}
/* :hover 用来表示鼠标移入的状态。 */
a:hover{
color: aqua;
font-size: 30px;
}
/* :active 用来表示鼠标的点击。 */
a:active{
color: yellowgreen;
}
/* 注意：上面超链接伪类的设置顺序是不能发生变化的。 */
</style>
</head>
<body>
<!--
1. 没有访问过的连接 - 蓝色。
2. 访问过的连接 - 紫色。
-->
<a href="#">访问过的连接</a>
<br><br>
<a href="javascript:;">没有访问过的连接</a>
</body>
</html>
7、伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）。
伪元素使用 :: 开头。
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示在页面中使用鼠标选中的内容
::before 元素的开始
::after 元素的最后
before 和 after 必须结合content属性来使用。
通过before 和 after 所添加的内容在页面中是无法被选中的，且这两个属性在开发中使用是最多的。
*/
p::first-letter{
font-size: 50px;
}
p::first-line{
color: yellowgreen;
}
p::selection{
background-color: greenyellow;
}
div::before{
content: '『';
}
div::after{
content: '』';
}
</style>
</head>
<body>
<div>Hello Hello How are you.</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod maiores adipisci exercitationem, magnam labore ipsum. Vero expedita fuga minus alias, omnis magnam maxime, dolorum, libero sed laudantium nesciunt explicabo dolorem.</p>
</body>
</html>
10、样式的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上。
继承是发在在祖先后带之间的。
继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
这样只需要设置一次即可让所有的元素都具有该样式。
注意：并不是所有的样式都会被继承，比如：背景相关的、布局相关等这些样式都不会被继承。
*/
p{
color: red;
}
div{
color: yellowgreen;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是p元素外面的span</span>
<div>
我是div
<span>
我是div中的span
<em>我是span中的em</em>
</span>
</div>
</body>
</html>
11、样式选择器的权重
主要解决样式不生效的问题！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
样式冲突：当我们通过不同的选择器选中了相同的元素，并且为相同的样式设置不同的值时，此时就发生样式的冲突。
发生样式冲突时，应用那个样式由选择器的权重（优先级）决定，且与选择器在页面中出现的顺序无关。
选择器的权重：
内联样式 > id选择器 > 类和伪类选择器 > 元素选择器。
*/
#box1{
background-color: yellow;
}
.red{
background-color: peru;
}
div{
background-color: palegreen;
}
div#box1{
background-color: yellow;
}
.d1{
background-color: purple;
}
.red{
background-color: red;
}
div,p,span{ /*分组选择器*/
background-color: yellowgreen;
}
/*
样式选择器的权重：
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器。 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则月优先显示（分组选择器是单独计算的），
选择器的累加不会超过其大于它的数量级，类选择器在搞也不会超过id选择器，如果优先级计算后相同，此时则优先使用靠下的样式。
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式。
注意：在开发中一定要慎用！！！
*/
</style>
</head>
<body>
<div id="box1" class="red d1 d2 d3 d4" style="background-color: chartreuse;">我是一个div</div>
</body>
</html>
12、单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
长度单位：
1）像素：
屏幕（显示器）实际上是由一个一个的小点构成的；
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰；
所以同样的200px在不同的设备下显示效果不一样；
2）百分比：
也可以将属性值设置为相对于其父元素属性的百分比；
设置百分比可以是子元素跟随父元素的改变而改变；
3）em：
em是相对于元素本身的字体大小来计算的；
1em = 1 font-size；
em会根据字体的大小改变而改变；
4）rem：
rem是相对于根元素（HTML）的字体大小来计算；
*/
.box1{
width: 200px;
height: 200px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color: aqua;
}
.box3{
font-size: 20;
width: 10em;
height: 10em;
background-color: blue;
}
html{
font-size: 20px;
}
.box4{
width: 10rem;
height: 10rem;
background-color: crimson;
}
</style>
</head>
<body>
<!-- .box1快速生成属性为box1的div标签。 -->
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
13、颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
/*
颜色单位：
1）在CSS中，可以直接使用颜色名来设置各种颜色。
如：red、orange……
但是在CSS中直接使用颜色名是非常不方便的。
2）RGB值：
RGB通过三种颜色的不同浓度来调配出不同的颜色。
R -> red, G -> green, B -> blue，即光的“三原色”。
每一种颜色的范围在 0~255（0%~100%）之间。
语法：
RGB(红色,绿色,蓝色)
3）RGBA:
就是在RGB的基础上增加了一个A，用来表示不透明度；
需要四个值，前三个和RGB一样，第四个表示不透明度，1表示完全不透明，0表示完全透明，.5（点五）表示半透明。
4）十六进制的RGB值：
语法：#红色绿色蓝色；
颜色浓度通过 00~ff；
如果颜色两位两位的重复则可以简写，如：#aabbcc -> #abc
5）HSL值与HSLA值
H 色相（0 ~ 360）；
S 饱和度，颜色的浓度 0% ~ 100%；
L 亮度，颜色的亮度 0% ~ 100%；
*/
background-color: red;
background-color: rgb(255, 0, 0);
background-color: rgb(0, 255, 0);
background-color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
background-color: rgb(0, 0, 255);
background-color: rgba(0, 0, 255, .5);
background-color: #f0f;
background-color: hsl(0, 100%, 50%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
14、文档流
**文档流（normal flow）：**网页是一个多层的结构，一层压着一层，通过CSS可以分别为每一层来设置样式。作为用户来讲只能看到最顶上一层，这些层中，最底下的一层称为“文档流”。文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。
对于我们来说元素主要有两个状态：在文档流中和不在文档流中。
在文档流中的特点：
-
块元素：
- 块元素会在页面中独占一行；
- 默认宽度是父元素的全部（会把父元素撑满）；
- 默认高度是被内容撑开（子元素）的高度；
-
行内元素
- 行内元素不会独占页面的一行，只占自身的大小；
- 行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列。
- 行内元素的默认宽度和高度都是被内容撑开。
！<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 100px;
background-color: yellowgreen;
}
.box2{
width: 100px;
background-color: red;
}
.box3{
background-color: seagreen;
}
</style>
</head>
<body>
<div class="box1">我是div1</div>
<div class="box2">我是div2</div>
<span class="box3">我是span标签</span>
<span class="box3">我是span标签</span>
<span class="box3">我是span标签</span>
<span class="box3">我是span标签</span>
<span class="box3">我是span标签</span>
</body>
</html>
15、框模型
盒子模型（box model），又叫做盒模型、框模型。
- CSS将页面中的所有元素都设置为了一个矩形盒子；
- 将元素设置为矩形盒子后，对页面的布局就编程了将不同的盒子摆放到不同的位置；
- 每一个盒子都有以下几个部分组成：
- 内容区（content）：元素中的所有的子元素和文本内容都在内容区中排列，内容区的大小有width和height两个属性来设置。
- width设置内容区宽度；
- height设置内容区高度；
- 边框（border）：边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，要设置边框，至少需要设置三个样式：
- 边框的宽度（border-width）；
- 边框的颜色（border-color）；
- 边框的样式（border-style）；
- 内边距（padding）：
- 外边距（margin）：
- 内容区（content）：元素中的所有的子元素和文本内容都在内容区中排列，内容区的大小有width和height两个属性来设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: sienna;
border-width: 10px;
border-color: springgreen;
border-style: solid;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
15.1、框模型_边框
边框（这种设置方法了解一下）：
- 边框的宽度 border-width；
- 边框的颜色 border-color；
- 边框的样式 border-style；
border-width：
- 默认值一般都是3个像素（即可以默认不写，但是不赞成）；
- border-width可以用来指定四个方向的边框的宽度，值的情况为：
- 四个值：上 右 下 左；
- 三个值：上 左右 下；
- 两个值：上下 右左；
- 一个值：上下左右；
- 除了border-width还有一组border-xxx-width：
- xxx可以是top right bottom left；
- 用来单独指定某一个变得宽度；
border-color：
- border-color用来指定边框的颜色，同样可以分别指定四个边的颜色，规则和border-width一样；
- border-color也可以省略不写，如果省略了则自动使用color的颜色值（黑色）。
border-style：
border-style指定边框的样式：solid表示实线，dotted表示点状虚线，dashed表示虚线，double表示双线。border-style的默认值是none，表示没有。则如果我们想要取消一个边框，直接将border-style设置为none即可。
设置border的常用方法：
- border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求；
- 除了border以外还有四个border-xxx；
- border-top；
- border-right；
- border-bottom；
- border-left；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
/* 内容区 */
width: 200px;
height: 200px;
background-color: slateblue;
/* 边框区 */
/* 边框的四个边都设置为10px。 */
/* border-width: 10px; */
/* 四个值：上 右 下 左 */
/* border-width: 10px 20px 20px 30px; */
/* 三个值：上 右左 下 */
/* border-width: 10px 30px 10px; */
/* 两个值：上下 右左 */
/* border-width: 10px 40px; */
/* 颜色区（其设置的方法与边框border-width规则差不多） */
/* 同时设置边框四条边的颜色 */
/* border-color: rgb(0, 255, 0); */
/* border-color: red green yellowgreen skyblue; */
/* 样式区 */
/* 样式区的设置和前面的边框区设置基本相同 */
/* 设置四个边框都是实线 */
/* border-style: solid; */
/* 分别设置四个不同边的边框 */
/* border-style: solid dotted dashed double; */
border: solid 10px orange;
/*取消右边的边框*/
border-right: none;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
15.2、框模型_内边距
内边距（padding）：
- 内容区和边框区之间的距离是内边距；
- 一共有四个方向的内边距；
- padding-top；
- padding-right；
- padding-bottom；
- padding-left；
- 内边距的设置会影响到盒子的大小；
- 背景颜色会引申到内边距上；
- 一个盒子的可见框的大小，有内容区、内边距和边框共同决定，所以在计算盒子大小是，需要将这三个区域加到一起计算。
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
padding内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样。
padding: 10px 20px 30px 40px;
padding: 10px 20px 30px; /*上 左右 下*/
padding: 10px 20px; /*上下 左右*/
padding: 10px /*四个方向*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: palegoldenrod;
border: 10px solid orange;
/* padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px; */
/* padding: 10px 20px 30px 40px; */
padding: 10px;
}
.inner{
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner"></div>
</div>
</body>
</html>
15.3、框模型_外边距
外边距（margin）：
- 外边距不会影响盒子可见框的大小，但是会影响到盒子实际占用空间的大小；
- 但是外边距会影响盒子的位置；
- 一共有四个方向的外边距：
- margin-top：上外边距，设置一个正值，元素回向下移动；
- margin-right：默认情况下，设置margin-right不会产生任何效果；
- margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动；
- margin-left：左外边距，设置一个正值，元素会向右移动；
- margin也可以设置负值，如果是负值则元素会向相反的方向移动；
- 元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素；
- margin的简写属性：margin 可以同时设置四个方向的外边距，用法和padding一样；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: paleturquoise;
border: 10px solid orange;
/* margin-top: 100px; */
/* margin-left: 100px; */
/* margin-bottom: 100px; */
margin: 100px 20px 40px 50px;
}
.box2{
width: 220px;
height: 220px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
16、盒子的水平布局
**元素水平方向的布局：**元素在其父元素中水平方向的位置有以下几个属性共同决定。
- margin-left；
- border-left；
- padding-left；
- width；
- padding-right；
- border-right；
- margin-right；
一个元素在其父元素中，水平布局必须要满足一下的等式：
"margin-left"+"border-left"+"padding-left"+"width"+"padding-right"+"border-right"+"margin-right"
= 其父元素内容区的宽度（必须满足）
在以上的等式中，如果样式没有写，则默认为0，如margin-left默认值是0。如果以上的等式中两边的等式不成立，则称为==过渡约束==，则等式会自动调整。
调整情况为：如果这七个字中没有 auto 的情况，则浏览器会自动设置margin-right值以使等式满足。这七个值中有三个值可以设置为auto，分别为width、margin-left、margin-right，如果某个值为auto，则会自动调整为auto的那个值以使等式成立。
有以下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
/* w200+tab键快速生成下面的代码 */
width: 800px;
height: 200px;
background-color: red;
border: 10px orange solid;
}
.inner{
width: 200px;
height: 200px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
"margin-left"+"border-left"+"padding-left"+"width"+"padding-right"+"border-right"+"margin-right"
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800 // 很显然这里等式不成立，称为过渡约束，调整后为
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800 // 即将margin-right的值设置为600
如果在上面的.inner类属性中添加样式：
margin-left: 100px;
/*如果设置margin-right: 600px;等式又不成立了，浏览器会自动将margin-right的值强制更改为500px*/
此时的margin-right的值自动变化为：
100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
1）如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0；
.inner{
width: auto;
height: 200px;
background-color: paleturquoise;
margin-left: auto;
margin-right: 200px;
}
即外边距被设置为auto的样式的值为0：
0 + 0 + 0 + 600 + 0 + 0 + 200 = 800
2）如果将三个值都设置为auto，则外边距都是0，宽度最大；
.inner{
width: auto;
height: 200px;
background-color: paleturquoise;
margin-left: auto;
margin-right: auto;
}
即：
0 + 0 + 0 + 800 + 0 + 0 + 0 = 800
3）如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值；
.inner{
width: 200px;
height: 200px;
background-color: paleturquoise;
margin-left: auto;
margin-right: auto;
}
即：
300 + 0 + 0 + 200 + 0 + 0 + 300 = 800
所以我们经常利用这个特点来使一个元素在其父元素中水平居中。如：
width: xxxpx;
margin: 0px auto;
17、盒子的垂直布局
默认情况下父元素的高度是被内容撑开的高度，如果父元素中设置了height样式，则父元素的高度就是height的值。子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。
使用overflow属性来属性父元素如何处理溢出的子元素，可选值：
- visible，默认值，子元素会从父元素中溢出，在父元素外部的位置显示；
- hidden，溢出内容将会被裁剪不会显示；
- scroll，生成两个滚动条（水平与垂直），通过滚动条来查看完整的内容；
- auto根据需要生成滚动条，通常比scroll生成的滚动条更加的灵活；
另外还有overflow-x处理水平溢出、overflow-y处理垂直溢出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
background-color: #bfa;
height: 200px;
width: 200px;
/* overflow: auto; */
overflow-y: auto;
}
</style>
</head>
<body>
<div class="outer">
一切存在严格地说都需要“时间”。时间证实一切，因为它改变一切。气候寒暑，草木枯荣，人从生到死，都不能缺少时间，都从时间上发生作用。
常说到“生命的意义”或“生命的价值”。其实一个人活下去真正的意义和价值，不过占有几十个年头的时间罢了。生前世界没有他，他是无意义和价值可言的，活到不能再活死掉了，他没有生命，他自然更无意义和价值可言。
正仿佛多数人的愚昧与少数人的聪明，对生命下的结论差不多都以为是“生命的意义同价值是活个几十年”，因此都肯定生活，那么吃、喝、睡觉、吵架、恋爱……活下去等待死，死后让棺木来装殓他，黄土来掩埋他，蛆虫来收拾他。
生命的意义解释的即如此单纯，“活下去、活着、倒下、死了”，未免太可怕了。因此，次一等的聪明人，同次一等的愚人，对生命的意义和价值找出第二种结论，就是“怎么样来耗费这几十个年头”。虽更肯定生活，那么吃、喝、睡觉、吵架、恋爱……然而生活得失取舍之间，到底就有了分歧，这分歧一看就明白的。大而言之，聪明人要理解生活，愚蠢人要习惯生活。聪明人以为目前并不完全好，一切应比目前更好，且竭力追求那个理想。愚蠢人对习惯完全满意，安于现状，保证习惯（在世俗观念上，这两种人称呼常常相反，安于习惯的被称为聪明人，怀抱理想的人却称愚蠢的家伙）。
两种人即同样有个“怎么来耗费这几十个年头”的打算，要从人与人之间寻找生存的意义和价值，即或择业相同，成就却不相同。同样想征服颜色线条做画家，同样想征服乐器音声做音乐家，同样想征服木石铜牙及其他材料做雕刻家，甚至于同样想征服人身行为做帝王，同样想征服人心信仰做思想家或教主，一切结果都不会相同。因此世界上有大诗人，同时也就有蹩脚诗人，有伟大的革命家，同时也有虚伪的革命家。至于两种人目的不同，择业不同，那就更一目了然了。
看出生命的意义和价值，原来如此如此，却想在生前死后使生命发生一点特殊意义和永久价值，心性绝顶聪明，为人却好像傻头傻脑，历史上的释迦、孔子、耶稣，就是这种人。这种人或出世、或入世，或革命、或复古，活下来都显得很愚蠢，死后却显得很伟大。屈原算得这种人另外一格，历史上这种情况可并不多。可是每一时间或产生一个两个，就很像样子了。这种人自然也只能活个几十年，可是他的观念、他的意见、他的风度、他的文章却可以活在人类的记忆中几千年。一切人的生命都有时间的限制，这种人的生命又似乎不大受这种限制。
话说回来，万事万物需要时间证明，可是时间本身却又像是个极其抽象的东西，从无一个人说得明白时间是个什么样子。时间并不单独存在。时间无形、无声、无色、无臭。要说明时间的存在，还得回过头来从事物去取证。从日月来去，从草木荣枯，从生命存亡找证据。正因为事事物物都可为时间作注解，时间本身反而被疏忽了。所以多数人提问到生命的意义和价值时，没有一个人敢说“生命的意义和价值，只是一堆时间”。
“前不见古人，后不见来者”，这是一个真正明白生命意义同价值的人所说的话，老先生说这话时心中的寂寞可知！能说这话的是个伟人，能理解这话的也不是个凡人。目前的活人，大家都记得这两句话，却只有那些从日光下牵入牢狱，或从牢狱中牵上刑场的倾心理想的人，最了解这两句话的意义。因为说这话的人生命的耗费，同懂这话的人生命的耗费，异途同归，完全是为事实皱眉，却胆敢对理想倾心。
他们的方法不同，他们的时代不同，他们的环境不同，他们的遭遇也不相同，相同的是他们的心，同样为人类向上向前而跳跃。
</div>
</body>
</html>
18、外边距的折叠
垂直外边距的重叠（折叠）：
- 相邻的垂直方向外边距会发生重叠现象；
- 兄弟元素：兄弟元素键的相邻垂直外边距会去两者之间的较大值（两者都是正值）。特殊情况：①如果相邻的外边距一正一负，则取两者和的，②如果相邻的外边距都是负值，则取两者中绝对值较大的值。兄弟元素之间的外边距的重叠对于开发是有利的，所以我们不需要进行处理。
- 父子元素：父子元素键相邻外边距，子元素的会传播给父元素（上外边距）。父元素外边距的折叠会影响到页面的布局，必须要进行处理。
兄弟元素：
<style>
.box1, .box2{
width: 200px;
height: 200px;
}
.box1{
background-color: #bfa;
margin-bottom: 100px;
}
.box2{
background-color: greenyellow;
margin-top: 100px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
如上，两个兄弟元素box1与box2，都在其CSS中设置了外边距，分别为margin-bottom=100px和margin-top=100px，理论上，在页面中显示的时候，这两个元素的垂直方向之间的距离应该是200px，但实际上并不会，这是因为会发生外边距的折叠。
父元素：
1）传递性
<style>
.box3{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box4{
width: 100px;
height: 100px;
background-color: red;
margin-top: 100px;
}
</style>
<div class="box3">
<div class="box4"></div>
</div>
如上，元素box4添加margin-top=100px样式后，页面变为了：
这里可看到父元素box3和box4一起向下移动了，这里我们也可以称为元素的传递性，
第一种解决方法，在box3中添加padding-top=100px，然后将box3中的width设置为100px即可。
.box3{
width: 200px;
height: 100px;
background-color: #bfa;
padding-top: 100px;
}
第二种解决方法：将box3中设置一个边框即可。
<style>
.box3{
width: 200px;
height: 199px;
background-color: #bfa;
border-top: 1px #bfa solid;
}
.box4{
width: 100px;
height: 99px;
background-color: red;
margin-top: 100px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1, .box2{
width: 200px;
height: 200px;
}
.box1{
background-color: #bfa;
margin-bottom: 100px;
}
.box2{
background-color: greenyellow;
margin-top: 100px;
}
.box3{
width: 200px;
height: 199px;
background-color: #bfa;
border-top: 1px #bfa solid;
}
.box4{
width: 100px;
height: 99px;
background-color: red;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
19、行内元素的盒模型
- 行内元素不支持设置宽度和高度；
- 行内元素可以设置padding，且垂直方向padding不会影响页面的布局（但是可能会遮挡其他元素）；
- 行内元素可以设置border，垂直方向的border不会影响页面的布局；
- 行内元素可以设置margin，垂直方向的margin不会影响页面的布局（水平方向元素之间margin的距离不会折叠）；
19.1、display与visibility
**display：**用来设置元素显示的类型，可选值如下：
- inline，将元素设置为行内元素；
- block，将元素设置为块元素；
- inline-block，将元素设置为行内块元素，行内块元素，既可以设置宽度和高度又不会独占一行（使用较少）；
- table，将元素设置为一个表格；
- none，将元素在页面中隐藏，即不会显示。
**visibility：**用来设置元素的显示状态，可选值如下：
- visible，默认值，元素在页面中正常显示；
- hidden，元素在页面中隐藏，不显示，但是依然占据页面的位置；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s1{
background-color: yellow;
/* 设置宽度、高度 */
/* width: 200px; */
/* height: 200px; */
/* 设置padding */
/* padding: 100px; */
/* 设置border */
/* border: 10px solid orange; */
/* 设置margin */
margin: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
a{
width: 100px;
height: 100px;
background-color: orange;
/* display */
display: block;
/* visibility */
/* visibility: hidden; */
}
</style>
</head>
<body>
<a href="javascript:;">超链接</a>
<span class="s1">我是span</span>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
20、浏览器的默认样式
- 通常情况下，浏览器都会为元素设置一些默认样式；
- 默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（主要是针对PC端）；
简单页面的常用方法：
/* 去除默认格式的方法 */
*{
padding: 0px;
margin: 0px;
}
ul{
/*去除ul标签中的圆点*/
list-style: none;
}
这种方法适用于简单的页面，在较为复杂的页面中，不赞成使用这种方法进行去除，建议使用下面的方法。
复杂页面的常用方法：
链接：https://pan.baidu.com/s/1uoSIfJKdL0cVlRNW6AmRpw
提取码：la7l
重置样式表：专门用来对浏览器的样式进行重置的：
- reset.css直接去除浏览器对元素的默认样式；normalize.css对元素的默认样式在所有的浏览器中进行一个统一；
以上这两个方法任何一个都可以，但是第一个比较常用，使用方法，在页面中引入所下载的文件：
<link rel="stylesheet" href="./reset.css">
建议放在自定义样式的上面，以免对我们自定义的样式进行覆盖。
21、盒子大小
默认情况下，盒子可见框的大小有内容区、内边距和边框共同决定！
**box-sizing：**用来设置盒子尺寸的计算方式（设置width和height的作用域），可选值如下：
- content-box，默认值，宽度和高度用来设置内容区的大小；
- border-box，宽度和高度用来设置整个盒子可见框的大小，即width和height指的是内容区、内边距、边框的总大小；
提示，如果使用border-box设置为box-sizing的值，如果元素设置width与height样式而没有设置内边距与边框，则可见框就是width与height（即内容区）所指定的值的大小；如果设置了内边距与边框，由于可见框的大小不能改变，此时内容区（即width与height）的大小会适当的改变。
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
padding: 10px;
border: 10px orange solid;
box-sizing: border-box;
}
22、轮廓、阴影、圆角
22.1轮廓
**outline：**用来设置元素的轮廓线，用法规则和border一模一样，轮廓和边框不同的点就是轮廓不会影响到可见框的大小（如果设置轮廓，它只会遮挡旁边离它比较近的元素）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/* 给元素添加边框，会改变元素自身可见框的大小 */
/* border: 10px solid orange; */
/* 给元素添加轮廓，轮廓的设置语法和设置边框一样，轮廓不会改变元素自身可见框的大小 */
outline: 10px solid orange;
}
</style>
</head>
<body>
<div class="box1"></div>
<span>如果使用边框，我不会被遮挡；如果使用轮廓，我就会被遮挡。</span>
</body>
</html>
22.2、阴影
**box-shadow：**用来设置元素的阴影效果，阴影不会影响页面布局，其可值如下：
- 第一个值，水平偏移量，设置阴影的水平位置，正值向右移动，左值向左移动；
- 第二个值，垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动；
- 第三个值，阴影的模糊半径；
- 第四个值，阴影的颜色；
.box2{
width: 200px;
height: 200px;
background-color: #bfa;
box-shadow: 10px 10px 20px rgba(0, 0, 0, .3);
}
22.3、圆角
**border-radius：**用来设置圆角，圆角设置圆的半径大小。其四个方向分别为：
- border-top-left-radius，左上角；
- border-top-right-radius，右上角；
- border-bottom-right-radius，右下角；
- border-bottom-left-radius，左下角；
使用以上这四个样式时，每个样式都可以设置两个值，如下：
border-top-right-radius: 30px 30px;
其中第一个值设置水平方向圆的半径，而第二个值设置的是垂直方向圆的半径，如果第一个值和第二个值相等，对应的角是一个圆角：
如果第一个值和第二个值不相等，则对应的角会出现一个椭圆：
border-radius也可以分别指定四个角的圆角，分别：
- 四个值：左上、右上、右下、左下；
- 三个值：左上、右下/左下、右下；
- 两个值：左上/右下、右上/左下；
如果想将一个div设置为圆形，则可以像下面那样设置：
border-radius: 50%;
23、浮动的简介
通过浮动可以使一个元素想向其父元素的左侧或右侧移动，使用float属性来设置元素的浮动，可选值如下：
- none，默认值，元素不浮动；
- left，元素向其父元素的左侧浮动；
- right，元素向其父元素的右侧浮动；
注意：元素设置浮动以后，水平布局的等式便不需要强制成立，且会完全从文档六中脱离，不再占用文档流中的位置，所以元素下边还在文档流中的元素会自动向上移动。
浮动元素的特点：
- 浮动元素会完全脱离文档流，不再占据文档流中的位置；
- 设置浮动以后元素会向父元素的左侧或右侧移动；
- 浮动元素默认不会从父元素中移出；
- 浮动元素向左或向右移动时，元素的最左边或最右边不会超过（一般是指水平方向）它前边的的其他浮动元素；
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移；
- 浮动元素不会超过（一般是指垂直方向的高度）它上边的浮动的兄弟元素，最多就是和它一样高；
**简单总结：**浮动目前来讲它的主要工作就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box2{
width: 500px;
height: 200px;
background-color: red;
float: left;
}
.box3{
width: 100px;
height: 200px;
background-color: #bfa;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
23.1、浮动的其它特点
- 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果；
- 元素设置浮动以后，将会从文档流中脱离，脱离了文档流的元素的一些特点也会发生变化：
- 块元素
- 块元素不在独占页面的一行；
- 脱离文档流以后，块元素的宽度和高度默认都被内容撑开；
- 行内元素：
- 行内元素脱离文档流以后会变成块元素，特点和块元素一样；
- 块元素
- 即脱离文档流以后，不需要在区分块元素和行内元素了；
24、高度塌陷问题
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，完全脱离文档流，子元素从文档流中脱离后将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局比较常见的问题，这个问题我们必须进行处理。
24.1、高度塌陷_BFC
**BFC（Block Formatting Context）块级格式化环境：**BFC是一个CSS中的一个隐含属性，可以为一个元素开启BFC，开启BFC后该元素会变成一个独立的布局区域。
元素开启BFC后的特点：
- 开启BFC的元素会不被浮动元素所覆盖；
- 开启BFC的元素的子元素和父元素的外边距不会重叠；
- 开启BFC的元素可以包含浮动的子元素；
开启元素BFC的一些特殊方式：
- 设置元素的浮动（不推荐）；
- 将元素设置为行内块元素（不推荐）；
- 将元素的overflow设置为一个非visible的值，常用的方式，为元素设置overflow=hidden即可开启BFC，以使其可以包含浮动元素。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style>
.outer{
border: 10px orange solid;
/* 通过设置浮动开启BFC */
/* float: left; */
/* 将元素转换为行内块元素开启BFC */
/* display: inline-block; */
/* 设置元素的overflow来开启BFC（推荐使用） */
overflow: auto;
}
.inner{
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.box1{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div class="box1"></div>
</body>
</html>
24.2、高度塌陷_clear
如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响。注意：这个规则只能影响使用的元素本身，不能影响其他元素。
clear：
- 作用：清除浮动元素对当前元素所产生的影响；
- 可选值：
- left，清除左侧浮动元素对当前元素的影响；
- right，清除右侧浮动元素对当前元素的影响；
- both，清除两侧中影响最大的那个元素；
- 原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不会受到其他元素的影响；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: orchid;
font-size: 50px;
float: left;
}
.box2{
width: 200px;
height: 300px;
background-color: palegreen;
font-size: 50px;
/* clear: left; */
float: right;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
font-size: 50px;
/* clear: left; */
/* clear: right; */
clear: both;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
24.3、高度塌陷_after
可以通过after伪元素在div的后面进行更改，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度塌陷_after</title>
<style>
.outer{
border: 10px red solid;
}
.inner{
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
/*
通过HTML结构来解决高度塌陷的问题，
这种办法本身没有多大问题，只是HTML是负责页面的结构，页面的样式应该是由CSS来进行设置，所以这里不赞成适用这种方式。
*/
.box1{
clear: both;
}
/* 推荐使用如下方法 */
/* 通过伪元素::after来最终完美的解决高度塌陷的问题 */
.outer::after{
content: '';
clear: both;
/* 伪元素after默认情况就是一个行内元素，所以这里还需要将其转换为块元素 */
display: block;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<!-- <div class="box1"></div> -->
</div>
</body>
</html>
24.4、clearfix
这个样式可以同时解决高度塌陷和外边距重叠的问题，当遇到这些问题时，直接使用clearfix这个类即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clearfix</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: yellowgreen;
margin-top: 100px;
}
.clearfix::before,
.clearfix::after{
/* 下面两行解决外边距重叠问题 */
content: '';
display: table;
/* 解决高度塌陷问题 */
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
25、元素定位
**定位（position）：**定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置，使用position属性来设置元素的定位，其可选值如下：
- static，默认值，元素是静止的没有开启定位；
- relative，开启元素的相对定位；
- absolute，开启元素的绝对定位；
- fixed，开启元素的固定定位；
- sticky，开启元素的粘滞定位；
偏移量（offset）：当元素开启了定位以后，可以通过变异量来设置元素的位置，值如下：
- top，定位元素与参照物的上边距离，正值，元素向下移动，负值，元素向上移动，其它的几个值类似；
- bottom，定位元素与参照物的下边距离，正值，元素向上移动，负值，元素向下移动；
- left，定位元素与参照物的左侧位置；
- right，定位元素与参照物的右侧位置；
定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下这两个值中我们只会选择其中之一，top值越大，定位元素越向下，bottom值越大，定位元素越向上；定位元素水平方向由left和right两个属性来控制，通常情况下在这两个属性中我们也只会使用一个，left值越大越靠右，right越大越靠左。
25.1、相对定位
当元素的position属性设置为relative时，则开启了元素的相对定位，其特点如下：
- 元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化；
- 相对定位是参照于元素自身在文档流中的位置进行定位的；
- 相对定位会提升元素的层级（相对于没有设置相对定位的元素来说，会被设置了相对定位的元素所覆盖）；
- 相对定位不会使元素脱离文档流；
- 相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位的简介</title>
<style>
.box1,
.box2,
.box3{
width: 200px;
height: 200px;
font-size: 50px;
}
.box1{
background-color: #bfa;
}
.box2{
background-color: orange;
/* 通过相对定位，将box2元素移动到box1元素的后面 */
position: relative;
left: 200px;
top: -200px;
}
.box3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
25.2、绝对定位
**绝对定位（absolute）（常用）：**当元素的position属性值设置为absolute时，则开启了元素的绝对定位，绝对定位有如下特点：
- 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化；
- 开启绝对定位后，元素会从文档流中脱离；
- 绝对定位会改变元素的性质，行内变块，块的宽高被内容撑开；
- 绝对定位会使元素提升一个层级；
- 绝对定位元素时相对于其包含块进行定位的；
包含块（containing block）：
- 正常情况下包含块就是离当前最近的祖先块元素，如：
<div class="parent">
<div class="child">
</div>
</div>
像这种情况下，child的最近的祖先块元素就是parent，所以它的包含块就是parent；
- 绝对定位的包含块：包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则根元素（即HTML，也称根元素、初始包含块）就是它的包含块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
div{
font-size: 50px;
}
.box1,.box2,.box3{
width: 200px;
height: 200px;
}
.box1{
background-color: #bfa;
}
.box2{
background-color: orange;
position: absolute;
left: 0px;
top: 0px;
}
.box3{
background-color: yellow;
}
.box4{
width: 400px;
height: 400px;
background-color: violet;
position: relative;
}
.box5{
width: 300px;
height: 300px;
background-color: yellowgreen;
position: relative;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">
4
<div class="box5">
5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
</html>
25.3、固定定位
固定定位（fixed）：将元素的position属性设置为fixed，则开启了元素的固定定位，固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位，固定定位的元素不会随着网页的滚动条滚动；
数学中，通常以一条横轴（x轴）和一条纵轴（y轴）来表示平面中的任何一点，其中的圆点（O点）可以在任意地方。同样浏览器也是使用了类似的特点，不过浏览器通常是以浏览器页面窗口的左上角的横轴与纵轴作为X轴和Y轴的起始点（O点），从左上角向下，表示Y加大，左上角向右，表示X加大，而也左上角为圆点的坐标轴的平面就可以称为==视口==。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body{
height: 2000px;
}
.box1{
font-size: 50px;
width: 200px;
height: 200px;
background-color: #bfa;
/* 设置固定定位后，元素不会随着页面的滚动而滚动 */
position: fixed;
}
</style>
</head>
<body>
<div class="box1">1</div>
</body>
</html>
25.4、粘滞定位
**粘滞定位（sticky）：**当元素的position属性设置为sticky时，则开启了元素的粘滞定位，粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定住，因为兼容性不好，作为了解即可。
position: sticky;
top: 100px; /*当元素随着页面的滚动到达距离页面100像素时，将其固定住*/
25.5、绝对定位元素的布局
当我们开启了绝对定位后，元素的水平方向的布局等式就需要添加left和right两个值，此时规则和之前一样只是多添加了两个值：
left + margin-left + border-left + padding-left + width +
padding-right + border-right + margin-right + right = 父元素内容区宽度
当发生过渡约束时，如果这9个值中没有auto，自自动调整right的值以使等式满足，如果有auto，则自动调整auto的值以使等式满足，可以设置auto的值有：margin、width、left、right。因为left和right的值默认是auto，所以如果不知道left和right且等式不满足时，会自动调整这两个值。
与文档流中的元素不同的是，垂直方向布局的等式也必须满足：
top + margin-top/bottom + padding-top/bottom + border-top/bottom + bottom = 等于包含块的高度
即垂直方向的9个属性也必须满足以上等式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位元素的布局</title>
<style>
.box1{
width: 500px;
height: 500px;
background-color: #bfa;
/* 开启相对定位 */
position: relative;
}
.box2{
/* 注意，如果要将width的值设置为auto，必须要先将left与right的值设置为0px */
/* width: auto; */
width: 200px;
height: 200px;
background-color: orange;
/* 开启绝对定位 */
position: absolute;
/* 通过以下margin-left/right的的设置为auto，可以使元素水平居中，但是left与right的值必须设置 */
margin-left: auto;
margin-right: auto;
left: 0px;
right: 0px;
/* 通过以下margin-top/bottom的值设置为auto，可以使元素垂直居中，但是top与bottom的值必须设置 */
margin-top: auto;
margin-bottom: auto;
top: 0px;
bottom: 0px;
/* 通过以上的设置，可以使一个元素再其父元素中居中 */
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
25.6、元素的层级
对于开启了定位的元素，可以通过z-index属性来指定元素的层级，z-index需要一个整数作为参数，值越大，元素的层级越高，元素的层级越高，越优先显示。如果元素的层级一样，则优先显示靠下（HTML结构中）的元素，祖先元素的层级再高也不会盖住后代元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的层级</title>
<style>
div{
font-size: 40px;
}
.box1,.box2,.box3{
width: 200px;
height: 200px;
}
.box1{
background-color: #bfa;
position: absolute;
z-index: 1;
}
.box2{
background-color: rgba(255, 0, 0, .3);
position: absolute;
top: 50px;
left: 50px;
z-index: 0;
}
.box3{
background-color: yellow;
position: absolute;
top: 100px;
left: 100px;
z-index: 3;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">
3
<div class="box4">4</div>
</div>
</body>
</html>
26、字体族
字体的相关样式：
color 设置字体的颜色
font-size 设置字体大小，与font-size相关的单位：
em 相当于当前元素的一个font-size；
rem 相当于根元素的一个font-size；
font-family 字体族（字体的格式），指定字体的类别。浏览器会自动使用该类别下的字体，可选值如下：
serif 衬线字体；
sans-serif 非衬线字体；
monospace 等宽字体；
font-family 可以同时指定多个字体，多个字体间使用英文,号隔开，字体生效时，优先使用第一个，第一个无法使用则使用第二个，依次类推。如：font-family: 'Courier New', Courier, monospace;
指定客户端所使用的字体：
/*
font-face可以将服务器中的字体直接提供给用户去使用
使用这中方式指定指定，会有两个问题：
1. 页面加载速度；
2. 版权；
3. 字体格式（ttf、woff）；
*/
@font-face {
/* font-family 是你给字体取的名字，这个只要符合标识符命名规则即可 */
font-family: 'myFont';
/* 服务器中字体的路径 */
src: url('./font/xxxx.ttf');
}
p{
/* 通过上面的定义，这里我们就可以使用自定义在服务器中的字体 */
font-family: myFont;
}
26.1、图标字体简介
**图标字体（iconfont）：**在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常不灵活，所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标了。
fontawesome使用步骤：
-
下载 官网：https://www.fontawesome.com 中文网：https://fa5.dashgame.com/#/
-
解压
-
将css和webfonts移动到项目中
-
使用图标字体；直接通过类名来使用图标字体：
class = "fas fa-bell"; class = "fab fa-accessible-icon";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图标字体</title>
<link rel="stylesheet" href="./fontawesome/css/all.css">
<style>
.fa-bell{
font-size: 60px;
color: yellowgreen;
}
.fa-accessible-icon{
font-size: 60px;
color: blue;
}
</style>
</head>
<body>
<i class="fas fa-bell"></i>
<i class="fab fa-accessible-icon"></i>
</body>
</html>
26.2、图标字体的使用
通过伪元素来设置图标字体：
-
找到要设置图标图标的元素通过before或after选中；
-
在content中设置字体的编码；
-
设置字体的样式：
fab: font-family: 'Font Awesome 5 Brands'; fas: font-family: 'Font Awesome 5 Free'; font-weight: 900; -
通过实体来使用图标字体：
&#x图标的编码; 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图标字体的使用</title>
<link rel="stylesheet" href="./fontawesome/css/all.css">
<style>
li{
list-style: none;
}
li::before{
content: '\f1b0';
/* 注意，这里的font-family雨font-weight是必须的，缺一不可。 */
/* font-family: 'Font Awesome 5 Brands'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.fa-dog{
font-size: 100px;
}
</style>
</head>
<body>
<i class="fas fa-dog"></i>
<i style="font-size: 40px;"></i>
<ul>
<li>锄禾日当午，</li>
<li>汗滴禾下土。</li>
<li>谁知盘中餐，</li>
<li>粒粒皆辛苦。</li>
</ul>
/*这里的类fas必须写，如果不写是不会生效的*/
<span class="fas"></span>
</body>
</html>
26.3、iconfont
注意：在选择图标的时候要选择单色图标库，将下载下来的文件解压后，文件里面的所有文件都复制到项目文件中，然后在style标签中使用link标签去引入iconfont.css即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿里云字体库</title>
<!-- 引入字体库文件 -->
<link rel="stylesheet" href="./font_aliyun/iconfont.css">
<style>
*{
margin: 0px;
padding: 0px;
}
.iconfont{
font-size: 50px;
color: red;
}
p::before{
content: '\e619';
font-family: 'iconfont';
font-size: 40px;
}
</style>
</head>
<body>
<!-- 通过实体来使用 -->
<i class="iconfont"></i>
<!-- 通过类名来使用 -->
<i class="iconfont icon-Android"></i>
<i class="iconfont icon-BugIt"></i>
<!-- 通过伪元素来实现 -->
<p>图形表</p>
</body>
</html>
26.4、行高
行高（line height）：行高指的是文字占有的实际高度。可以通过line-height来设置行高且当行高的值与其父元素的高度值一样时，这时单行文字在一个元素中会垂直居中，行高可以直接指定一个大小（单位：px、em），也可以直接为行高设置一个整数，如果是一个整数的话，行高将会是字体的指定的倍数。
行高经常还用来设置文件的行间距，行间距 = 行高 - 字体大小。字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度，行高会在字体框的上下平均分配。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行高</title>
<style>
div{
/* 设置容器div的高度为500px，宽度为默认值auto */
font-size: 50px;
height: 500px;
border: 1px orange solid;
/* 将文本垂直居中 */
/* line-height: 500px; */
/* line-height的默认值是1.33 */
/* 这时的行高为font-size的一倍，即50px。如果是2则是font-size的两倍，即100px */
line-height: 2;
/* 注意：line-height指定的是一行的的高度，而不是一个容器中多行的高度。多行高度之间的行间距=行高-字体大小*/
}
</style>
</head>
<body>
<div>今天天气真不错。good nice.今天天气真不错。good nice.今天天气真不错。good nice.今天天气真不错。good nice.</div>
</body>
</html>
26.5、字体的简写属性
font可以设置字体的相关属性，语法如下：
font: [font-style] [font-weight] font-size[/line-height] font-family;
其中的带方括号的属性值可以省略不写，且前面的font-style与font-weight顺序可以颠倒，但是后面的font-size与font-family必须写且顺序不能颠倒，每个属性之间使用空格隔开。
注意：使用font简写设置字体属性时，如果其中的一些属性没写，则会使用默认值normal，且normal可能会覆盖前面已经设置了的相关属性，如font-style、font-weight、line-height。
**font-weight 字重 **字体的加粗，可选值如下：
- normal，默认值，不加粗；
- bold，加粗；
- 100 ~ 900 九个级别（基本没用）；
font-style 字体风格，可选值如下：
- normal，正常的；
- italic，斜体；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的简写属性</title>
<style>
div{
/* font-size: 50px;
font-family: 微软雅黑, Arial, "Helvetica Neue", Helvetica, sans-serif; */
/* 通过font属性的简写，使用下面的一行就可以代替上面的两行 */
/* font: 50px 微软雅黑, Arial, "Helvetica Neue", Helvetica, sans-serif; */
/* 将字体font-weight=bold、font-style=italic、font-size=50px、line-height=2、font-family:微软雅黑 */
font: bold italic 50px/2 微软雅黑, Arial, "Helvetica Neue", Helvetica, sans-serif;
}
</style>
</head>
<body>
<div>今天天气真不错 Hello Hello.</div>
</body>
</html>
26.6、文本的水平与垂直对齐
**text-align **文本的水平对齐，可选值如下：
- left，左侧对齐；
- right，右对齐；
- center，居中对齐；
- justify，两端对齐；
vertical-align 设置元素垂直对齐，可选值如下：
- baseline，默认值，基线对齐；
- top，与父元素的顶部对齐；
- bottom，与父元素的底部对齐；
- middle，居中对齐（并不是实际意义上的居中）；
- 可以直接指定值来设置居中，如：10px上移，10个像素，-10px，下移10px；
- 也可以使用vertical-align处理图片的基线问题；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的水平与垂直对齐</title>
<style>
div{
width: 500px;
border: 1px solid orange;
/* 水平方向对齐 */
/* text-align: center; */
font-size: 50px;
}
/* 垂直方向对齐 */
span{
font-size: 20px;
border: 1px blue solid;
}
/* 图片的基线 */
p{
border: 1px solid orange;
}
/* 处理图片的基线 */
img{
/* top、middle、bottom这三个值都可以，但是不能是baseline。 */
vertical-align: top;
}
</style>
</head>
<body>
<!-- 测试垂直对齐 -->
<div>今天天气Hello<span>真不错hello</span></div>
<!-- 测试水平对齐 -->
<!-- <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid voluptatum, reprehenderit consequuntur possimus deserunt voluptas itaque reiciendis facilis beatae veritatis assumenda sapiente quos dolorum aut odio dicta, voluptatem culpa corrupti.</div> -->
<!-- 处理图片的基线 -->
<p>
<img src="../exercise/img/01/1.jpg" alt="">
</p>
</body>
</html>
26.7、文本的其他样式
text-decoration: 设置文本修饰，可选值如下：
- none，默认值，什么都没有；
- underline，下划线；
- line-through，删除线；
- overline，上划线；
text-decoration: underline;
使页面中多余的信息以点的形式显示：
white-space： 设置网页如何处理空白，可选值如下：
- normal，正常；
- nowrap，不换行；
- pre，保留空白，即，源代码中有多少空格，浏览器解析的时候就会显示多少空格；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本的其他样式</title>
<style>
.box1{
text-decoration: line-through;
/* text-decoration可以使用新的语法，但是这种在IE中不支持，在Chrome和Firefox中都可以。 */
/* 即设置了红色的点点下滑线 */
text-decoration: underline red dotted;
}
/* 将box2中未显示的信息以点点的形式隐藏。 */
.box2{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box1">今天气真不错。</div>
<div class="box2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique, hic ad tempora recusandae nesciunt dignissimos excepturi repellendus eos distinctio nostrum tenetur est, autem iste voluptatum possimus quam debitis accusamus rem?</div>
</body>
</html>
27、背景
**background-color：**设置背景颜色；
background-color: red;
**background-image：**设置背景图片；
backgound-image: url("./img/1.png"); /*这里的路径最好使用引号包裹*/
- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色；
- 如果背景的图片小于外面的容器元素，则背景图片会自动在元素中平铺，将容器元素铺满；
- 如果背景的图片大于外面的容器元素，则图片将会无法完全显示；
- 如果背景图片和外面的容器元素一样大，则会正常显示；
**background-repeat：**用来设置背景的重复方式，可选值如下：
- repeat，默认值，背景会沿着x轴、y轴双方向重复；
- repeat-x，沿着x轴方向重复；
- repeat-y，沿着y轴方向重复；
- no-repeat，背景图片不重复；
**background-position：**设置背景图片的位置，设置方式如下：
- 通过top、left、right、bottom、center几个表示方位的次来设置背景图片的位置，使用方位词时必须要同时指定两个值，如果值写一个则第二个默认就是center，例如：设置图片在右上角显示则为：background-position: top right; 在中间显示：background-position:center;
- 通过偏移量来指定背景图片的位置：水平方向偏移量 垂直方向的偏移量（偏移量可以为负值）。例如：background-position:10px 10px；
**background-clip：**设置背景的范围，可选值如下：
- border-box，默认值，背景会出现在边框的下边；
- padding-box，背景不会出现在边框的下边，只出现在内容区和内边距中；
- content-box，背景值会出现在内容区；
**background-origin：**背景图片偏移量的计算的点（原点），可选值如下：
- padding-box，默认值，background-position从内边距出开始计算；
- content-box，背景图片的偏移量从内容区处开始计算；
- border-box，背景图片的偏移量从边框处开始计算；
**background-size：**设置背景图片大小，
- 第一个值表示宽度；
- 第二个值表示高度；
- 如果只写一个，则第二个值默认是auto；
- 也可以只指定一个，cover图片的比例不变，将元素铺满（可能现实不完整）；contain图片比例不变，将图片在元素中完整显示（容器元素不会完全铺满）；
**background-attachment：**设置图片是否跟随元素移动，可选值如下：
- scroll，默认值，背景图片会跟随元素移动；
- fixed，背景图片会固定在页面中，不会随元素移动；
**background：**背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置，并且该样式没有顺序要求，也没有那个属性是必须要写的。注意点：
- background-size必须写在background-position的后边，并且使用/号隔开，background-position/background-size；
- background-origin、background-clip这两个样式，origin要写在clip的前面；
练习
01_图片列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片列表</title>
<link rel="stylesheet" href="../../02_CSS/CSS/reset.css">
<style>
/* 设置页面背景颜色 */
body {
background-color: plum;
}
/* 设置图片列表容器大小、位置、溢出处理 */
.img-list {
width: 190px;
height: 470px;
margin: 50px auto;
overflow: hidden;
background-color: silver;
}
/* 设置图片之间的间距为9px，not(:last-child)除了最后一个不设置 */
.img-list li:not(:last-child){
margin-bottom:9px;
}
/* 设置图片大小 */
.img-list .img-items img {
width: 100%;
}
</style>
</head>
<body>
<ul class="img-list">
<li class="img-items">
<a href="#">
<img src="./img/1.jpg" alt="">
</a>
</li>
<li class="img-items">
<a href="#">
<img src="./img/2.jpg" alt="">
</a>
</li>
<li class="img-items">
<a href="#">
<img src="./img/3.jpg" alt="">
</a>
</li>
</ul>
</body>
</html>
02_京东左侧导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东左侧导航条</title>
<link rel="stylesheet" href="../../02_CSS/CSS/reset.css">
<style>
body{
background-color: rgb(255, 254, 254);
}
.wapper{
width: 190px;
height: 450px;
background-color: rgb(250, 239, 250);
padding: 10px 0px;
/* 使整个边框居中 */
margin: 50px auto;
}
.wapper .items{
/*
这里如果width不指定值，那么width的默认值为auto。
这里使用auto是较好的选择，因为这样是浏览器自动进行计算的，如果将width设置为指定值，则可能会导致数据的溢出。
*/
/* width: 172px; */
height: 25px;
/* 这里不能使用margin-left，因为如果使用margin，那么空出来的值属于父元素.wapper，不再是.items的区域。 */
/* 设置items的右内边距，将文字向内移动。 */
padding: 0px 0px 0px 18px;
/* 让文字在父元素中垂直居中，只需要将父元素的line-height设置为一个与父元素height相同的值。 */
line-height: 25px;
}
li span{
font-size: 12px;
padding: 0px 2px;
}
.items a{
font-size: 14px;
/* 去除超链接的下划线。 */
/* text-decoration: none; */
}
/* 设置items的hover背景颜色。 */
.items:hover{
background-color: #f7b4b4;
}
/* 设置超链接的hover样式。 */
.items a:hover{
color: red;
}
</style>
</head>
<body>
<ul class="wapper">
<li class="items">
<a href="#">家用电器</a>
</li>
<li class="items">
<a href="#">手机</a><span>/</span>
<a href="#">运营商</a><span>/</span>
<a href="#">数码</a>
</li>
<li class="items">
<a href="#">电脑</a><span>/</span>
<a href="#">办公</a>
</li>
<li class="items">
<a href="#">家居</a><span>/</span>
<a href="#">家具</a><span>/</span>
<a href="#">家装</a><span>/</span>
<a href="#">厨具</a>
</li>
<li class="items">
<a href="#">男装</a><span>/</span>
<a href="#">女装</a><span>/</span>
<a href="#">童装</a><span>/</span>
<a href="#">内衣</a>
</li>
<li class="items">
<a href="#">美妆</a><span>/</span>
<a href="#">个人护肤</a><span>/</span>
<a href="#">宠物</a><span>/</span>
</li>
<li class="items">
<a href="#">女鞋</a><span>/</span>
<a href="#">箱包</a><span>/</span>
<a href="#">钟表</a><span>/</span>
<a href="#">珠宝</a>
</li>
<li class="items">
<a href="#">男鞋</a><span>/</span>
<a href="#">运动</a><span>/</span>
<a href="#">户外</a>
</li>
<li class="items">
<a href="#">房产</a><span>/</span>
<a href="#">汽车</a><span>/</span>
<a href="#">汽车用品</a>
</li>
<li class="items">
<a href="#">母婴</a><span>/</span>
<a href="#">玩具乐器</a>
</li>
<li class="items">
<a href="#">食品</a><span>/</span>
<a href="#">酒类</a><span>/</span>
<a href="#">生鲜</a><span>/</span>
<a href="#">特产</a>
</li>
<li class="items">
<a href="#">艺术</a><span>/</span>
<a href="#">礼品鲜花</a><span>/</span>
<a href="#">农资绿植</a>
</li>
<li class="items">
<a href="#">医药保健</a><span>/</span>
<a href="#">计生情趣</a>
</li>
<li class="items">
<a href="#">图书</a><span>/</span>
<a href="#">文娱</a><span>/</span>
<a href="#">教育</a><span>/</span>
<a href="#">电子书</a>
</li>
<li class="items">
<a href="#">机票</a><span>/</span>
<a href="#">酒店</a><span>/</span>
<a href="#">旅游</a><span>/</span>
<a href="#">生活</a>
</li>
<li class="items">
<a href="#">理财</a><span>/</span>
<a href="#">众筹</a><span>/</span>
<a href="#">白条</a><span>/</span>
<a href="#">保险</a>
</li>
<li class="items">
<a href="#">安装</a><span>/</span>
<a href="#">维修</a><span>/</span>
<a href="#">清洗</a><span>/</span>
<a href="#">二手</a>
</li>
<li class="items">
<a href="#">工业品</a>
</li>
</ul>
</body>
</html>
03_网页新闻的右侧导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页新闻的右侧导航条</title>
<link rel="stylesheet" href="../../02_CSS/CSS/reset.css">
<style>
.wapper{
width: 300px;
height: 323px;
margin: 50px auto;
border-top: 1px solid #DDDDDD;
}
.title{
/* 为了边框和文字边框宽度一致，需要将h3转换为行内块元素。 */
display: inline-block;
/* 如果宽度不设置时，默认为auto，为了这里的特殊性，这里不设置width的固定值。*/
/* width: 300px; */
height: 42px;
font-size: 16px;
font-weight: bold;
color: #404040;
line-height: 42px;
/* 通过margin-top将h3上移一个像素，盖住上边框。 */
margin-top: -1px;
/* 设置上边框 */
border-top: tomato 1px solid;
}
/* 设置图片容器的高度 */
.wapper-img{
height: 150px;
}
h3{
height: 40px;
color: #fff;
/* 加粗字体 */
font-weight: bold;
line-height: 40px;
/* 将文字上移40个像素 */
margin-top: -40px;
padding-left: 30px;
}
.li-list{
/* width: 300px; */
height: 120px;
margin-top: 12px;
}
.li-list .items{
height: 30px;
font-size: 14px;
line-height: 30px;
}
/* 设置容器中超链接的颜色、下划线。 */
.wapper a{
text-decoration: none;
color: #666;
}
/* 通过before伪元素为每一个li添加项目符号。 */
li::before{
content: '■';
font-size: 12px;
padding-right: 5px;
color: rgba(0, 0, 0, .3)
}
.title a:hover, .li-list a:hover{
color: red;
}
</style>
</head>
<body>
<div class="wapper">
<div class="title">
<a href="#">科技</a>
</div>
<div class="wapper-img">
<a href="#">
<img src="./img/4.jpeg" alt="">
<h3>阿里连发三封内部信，新年能治病？</h3>
</a>
</div>
<ul class="li-list">
<li class="items">
<a href="#">爆料：苹果MR设置不想涉足元宇宙</a>
</li>
<li class="items">
<a href="#">数字人民币APP上架掀体验潮</a>
</li>
<li class="items">
<a href="#">硅谷人：逃离大厂，拥抱Web3</a>
</li>
<li class="items">
<a href="#">一切顺利！韦伯望远镜完成“完全部署”</a>
</li>
</ul>
</div>
</body>
</html>
<a href="#">保险</a>
</li>
<li class="items">
<a href="#">安装</a><span>/</span>
<a href="#">维修</a><span>/</span>
<a href="#">清洗</a><span>/</span>
<a href="#">二手</a>
</li>
<li class="items">
<a href="#">工业品</a>
</li>
</ul>
03_网页新闻的右侧导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页新闻的右侧导航条</title>
<link rel="stylesheet" href="../../02_CSS/CSS/reset.css">
<style>
.wapper{
width: 300px;
height: 323px;
margin: 50px auto;
border-top: 1px solid #DDDDDD;
}
.title{
/* 为了边框和文字边框宽度一致，需要将h3转换为行内块元素。 */
display: inline-block;
/* 如果宽度不设置时，默认为auto，为了这里的特殊性，这里不设置width的固定值。*/
/* width: 300px; */
height: 42px;
font-size: 16px;
font-weight: bold;
color: #404040;
line-height: 42px;
/* 通过margin-top将h3上移一个像素，盖住上边框。 */
margin-top: -1px;
/* 设置上边框 */
border-top: tomato 1px solid;
}
/* 设置图片容器的高度 */
.wapper-img{
height: 150px;
}
h3{
height: 40px;
color: #fff;
/* 加粗字体 */
font-weight: bold;
line-height: 40px;
/* 将文字上移40个像素 */
margin-top: -40px;
padding-left: 30px;
}
.li-list{
/* width: 300px; */
height: 120px;
margin-top: 12px;
}
.li-list .items{
height: 30px;
font-size: 14px;
line-height: 30px;
}
/* 设置容器中超链接的颜色、下划线。 */
.wapper a{
text-decoration: none;
color: #666;
}
/* 通过before伪元素为每一个li添加项目符号。 */
li::before{
content: '■';
font-size: 12px;
padding-right: 5px;
color: rgba(0, 0, 0, .3)
}
.title a:hover, .li-list a:hover{
color: red;
}
</style>
</head>
<body>
<div class="wapper">
<div class="title">
<a href="#">科技</a>
</div>
<div class="wapper-img">
<a href="#">
<img src="./img/4.jpeg" alt="">
<h3>阿里连发三封内部信，新年能治病？</h3>
</a>
</div>
<ul class="li-list">
<li class="items">
<a href="#">爆料：苹果MR设置不想涉足元宇宙</a>
</li>
<li class="items">
<a href="#">数字人民币APP上架掀体验潮</a>
</li>
<li class="items">
<a href="#">硅谷人：逃离大厂，拥抱Web3</a>
</li>
<li class="items">
<a href="#">一切顺利！韦伯望远镜完成“完全部署”</a>
</li>
</ul>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
