HTML5+CSS3的学习(三)

2018版李立超html+css基础 103集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1sW411T78k?spm_id_from=333.999.0.0

2019版李立超前端html5+css3 148集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from=333.999.0.0

五、盒子模型

在网页中一切皆是盒子

• CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。

• 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。

• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

一个盒子我们会分成几个部分：

  • 内容区(content)

  • 内边距(padding)

  • 边框(border)

  • 外边距(margin)

image-20200220161938665

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒模型</title><style>.box1{/* 内容区（content），元素中的所有的子元素和文本内容都在内容区中排列  内容区的大小由width 和 height两个属性来设置width 设置内容区的宽度height 设置内容区的高度          */width: 200px;height: 200px;background-color: #bfa;/* 边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部边框的大小会影响到整个盒子的大小要设置边框，需要至少设置三个样式：边框的宽度 border-width边框的颜色 border-color边框的样式 border-style*/border-width: 10px;border-color: red;border-style: solid;}</style>
</head>
<body><!-- 盒模型、盒子模型、框模型（box model）- CSS将页面中的所有元素都设置为了一个矩形的盒子- 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置- 每一个盒子都由一下几个部分组成：内容区（content）内边距（padding）边框（border）外边距（margin）--><div class="box1"></div>    
</body>
</html>

image-20200322214859152

1.内容区(content)

• 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。

• 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。

• 通过width和height两个属性可以设置内容区的大小。

• width和height属性只适用于块元素。

2.内边距(padding)

• 顾名思义，内边距指的就是元素内容区与边框以内的空间。

• 默认情况下width和height不包含padding的大小。

• 使用padding属性来设置元素的内边距。

• 例如：

– padding:10px 20px 30px 40px

​ – 这样会设置元素的上、右、下、左四个方向的内边距。

• padding:10px 20px 30px;

​ – 分别指定上、左右、下四个方向的内边距

• padding:10px 20px;

​ – 分别指定上下、左右四个方向的内边距

• padding:10px;

​ – 同时指定上左右下四个方向的内边距

• 同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{width: 200px;height: 200px;background-color: #bfa;/*设置边框*/border: 10px red solid;/** 内边距（padding），指的是盒子的内容区与盒子边框之间的距离* 	一共有四个方向的内边距，可以通过：* 		padding-top* 		padding-right* 		padding-bottom* 		padding-left* 			来设置四个方向的内边距* * 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,* 	盒子的大小由内容区、内边距和边框共同决定* 	盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width*  可见宽的高度 = border-top-width + padding-top + height  + padding-bottom + border-bottom-width*//*设置上内边距*//*padding-top: 100px;*//*设置右内边距*//*padding-right: 100px;padding-bottom: 100px;padding-left: 100px;*//** 使用padding可以同时设置四个边框的样式，规则和border-width一致*//*padding: 100px;*//*padding: 100px 200px;*//*padding: 100px 200px 300px;*/padding: 100px 200px 300px 400px;}/** 创建一个子元素box1占满box2*/.box2{width: 100%;height: 100%;background-color: yellow;}			</style></head><body>		<div class="box1"><div class="box2"></div></div>		</body>
</html>

image-20200313201908506

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 200px;height: 200px;background-color: #bfa;border: 10px orange solid;/* 内边距（padding）- 内容区和边框之间的距离是内边距- 一共有四个方向的内边距：padding-toppadding-rightpadding-bottompadding-left- 内边距的设置会影响到盒子的大小- 背景颜色会延伸到内边距上一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算*//* padding-top: 100px;padding-left: 100px;padding-right: 100px;padding-bottom: 100px; *//* padding 内边距的简写属性，可以同时指定四个方向的内边距规则和border-width 一样*/padding: 10px 20px 30px 40px;padding: 10px 20px 30px ;padding: 10px 20px ;padding: 10px ;}.inner{width: 100%;height: 100%;background-color: yellow;}</style>
</head>
<body><div class="box1"><div class="inner"></div></div>
</body>
</html>

image-20200322215158651

3.边框(border)

• 可以在元素周围创建边框，边框是元素可见框的最外部。

• 可以使用border属性来设置盒子的边框：

​ – border:1px red solid;

​ – 上边的样式分别指定了边框的宽度、颜色和样式。

• 也可以使用border-top/left/right/bottom分别指定上左右下四个方向的边框。

• 和padding一样，默认width和height不包括边框的宽度。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">			.box{width: 200px;height: 200px;background-color: #bfa;/*设置边框大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none* *//*border-width:10px ;border-color: red;border-style: solid;*//** border* 	- 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色* 	- 而且没有任何的顺序要求* 	- border一指定就是同时指定四个边不能分别指定* * border-top border-right border-bottom border-left* 	可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效*//*border: red solid 10px   ;*//*border-left: red solid 10px   ;*//*border-top: red solid 10px;border-bottom: red solid 10px;border-left: red solid 10px;*/border: red solid 10px;border-right: none;				}			</style></head><body>		<div class="box"></div>		</body>
</html>

image-20200313201739278

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>边框</title><style>.box1{width: 200px;height: 200px;background-color: #bfa;/* 边框边框的宽度 border-width边框的颜色 border-color边框的样式 border-style*//* border-width: 10px; 默认值，一般都是 3个像素border-width可以用来指定四个方向的边框的宽度值的情况四个值：上 右 下 左三个值：上 左右 下两个值：上下 左右一个值：上下左右除了border-width还有一组 border-xxx-widthxxx可以是 top right bottom left用来单独指定某一个边的宽度                    *//* border-width: 10px; *//* border-top-width: 10px;border-left-width: 30px; */color: red;/* border-color用来指定边框的颜色，同样可以分别指定四个边的边框规则和border-width一样border-color也可以省略不写，如果省略了则自动使用color的颜色值*//* border-color: orange red yellow green;border-color: orange; *//* border-style 指定边框的样式solid 表示实线dotted 点状虚线dashed 虚线double 双线border-style的默认值是none 表示没有边框*//* border-style: solid dotted dashed double;border-style: solid; *//* border-width: 10px;border-color: orange;border-style: solid; *//* border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求除了border以外还有四个 border-xxxborder-topborder-rightborder-bottomborder-left*//* border: solid 10px orange; *//* border-top: 10px solid red;border-left: 10px solid red;border-bottom: 10px solid red; */border: 10px red solid;border-right: none;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>

image-20200322215056595

边框的样式

• 边框可以设置多种样式：

  • – none（没有边框）

  • – dotted（点线）

  • – dashed（虚线）

  • – solid（实线）

  • – double（双线）

  • – groove（槽线）

  • – ridge（脊线）

  • – inset（凹边）

  • – outset（凸边）

4.外边距(margin)

• 外边距是元素边框与周围元素相距的空间。

• 使用margin属性可以设置外边距。

• 用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。

• 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以margin:0 auto可以使元素居中。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">			.box1{width: 200px;height: 200px;background-color: #bfa;border: 10px solid red;/** 外边距指的是当前盒子与其他盒子之间的距离，* 	他不会影响可见框的大小，而是会影响到盒子的位置。* 盒子有四个方向的外边距：* 	margin-top* 	margin-right* 	margin-bottom* 	margin-left* * 由于页面中的元素都是靠左靠上摆放的，* 	所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，* 	而如果是设置右和下外边距会改变其他盒子的位置*//** 设置box1的上外边距，盒子上边框和其他的盒子的距离*//*margin-top: 100px;*//** 左外边距*//*margin-left: 100px;*//*设置右和下外边距*//*margin-right: 100px;margin-bottom: 100px;*//** 外边距也可以指定为一个负值，* 	如果外边距设置的是负值，则元素会向反方向移动*//*margin-left: -150px;margin-top: -100px;margin-bottom: -100px;*//*margin-bottom: -100px;*//** margin还可以设置为auto，auto一般只设置给水平方向的margin* 	如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值* 	垂直方向外边距如果设置为auto，则外边距默认就是0* * 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，* 	就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto* 	以使子元素在父元素中水平居中*//*margin-left: auto;margin-right: auto;*//** 外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,* 	规则和padding一样*/margin: 0 auto;}			.box2{width: 200px;height: 200px;background-color: yellow;}			</style></head><body><div class="box1"></div><div class="box2"></div></body>
</html>

image-20200313202024090

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">			.box1{width: 100px;height: 100px;background-color: red;/** 为上边的元素设置一个下外边距*/margin-bottom: 100px;}/** 垂直外边距的重叠* 	- 在网页中相邻的垂直方向的外边距会发生外边距的重叠* 		所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和* 		如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素*/.box2{width: 100px;height: 100px;background-color: green;/*** 为下边的元素设置一个上外边距*/margin-top: 100px;}.box3{width: 200px;height: 100px;background-color: yellow;/*为box3设置一个上边框*//*border-top: 1px red solid;*//*padding-top: 1px;*/padding-top: 100px;}.box4{width: 100px;height: 100px;background-color: yellowgreen;/** 为子元素设置一个上外边距，使子元素的位置下移*//*margin-top: 100px;*/}			</style></head><body>		<div class="box3"><div class="box4"></div></div>		<div class="box1"></div><div class="box2"></div></body>
</html>

image-20200313202111650

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 200px;height: 200px;background-color: #bfa;border: 10px red solid;/* 外边距（margin）- 外边距不会影响盒子可见框的大小- 但是外边距会影响盒子的位置- 一共有四个方向的外边距：margin-top- 上外边距，设置一个正值，元素会向下移动margin-right- 默认情况下设置margin-right不会产生任何效果margin-bottom- 下外边距，设置一个正值，其下边的元素会向下移动margin-left- 左外边距，设置一个正值，元素会向右移动- margin也可以设置负值，如果是负值则元素会向相反的方向移动- 元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身而设置下和右外边距会移动其他元素- margin的简写属性margin 可以同时设置四个方向的外边距 ，用法和padding一样- margin会影响到盒子实际占用空间*//* margin-top: 100px;margin-left: 100px;margin-bottom: 100px; *//* margin-bottom: 100px; *//* margin-top: -100px; *//* margin-left: -100px; *//* margin-bottom: -100px; *//* margin-right: 0px; */margin: 100px;}.box2{width: 220px;height: 220px;background-color: yellow}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

image-20200322215338951

外边距的折叠

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1 , .box2{width: 200px;height: 200px;font-size: 100px;}/* 垂直外边距的重叠（折叠）- 相邻的垂直方向外边距会发生重叠现象- 兄弟元素- 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）- 特殊情况：如果相邻的外边距一正一负，则取两者的和如果相邻的外边距都是负值，则取两者中绝对值较大的- 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理- 父子元素- 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）- 父子外边距的折叠会影响到页面的布局，必须要进行处理        */.box1{background-color: #bfa;/* 设置一个下外边距 */margin-bottom: 100px;}.box2{background-color: orange;/* 设置一个上外边距 */margin-top: 100px;}.box3{width: 200px;height: 200px;background-color: #bfa;/* padding-top: 100px; *//* border-top: 1px #bfa solid; */}.box4{width: 100px;height: 100px;background-color: orange;margin-top: 100px;}</style>
</head>
<body><div class="box3"><div class="box4"></div></div><!-- <div class="box1"></div><div class="box2"></div> -->  
</body>
</html>

image-20200322215907115

5.盒子的水平方向的布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒子的水平布局</title><style>.outer{width: 800px;height: 200px;border: 10px red solid;}.inner{/* width: auto;  width的值默认就是auto*/width: 200px;height: 200px;background-color: #bfa;margin-right: auto;margin-left: auto;/* margin-left: 100px;margin-right: 400px *//* 元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定“margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足，注意当设置了浮动之后这个等式便不需要满足了）0 + 0 + 0 + 200 + 0 + 0 + 0 = 8000 + 0 + 0 + 200 + 0 + 0 + 600 = 800100 + 0 + 0 + 200 + 0 + 0 + 400 = 800100 + 0 + 0 + 200 + 0 + 0 + 500 = 800- 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整- 调整的情况：- 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足- 这七个值中有三个值和设置为autowidthmargin-leftmaring-right- 如果某个值为auto，则会自动调整为auto的那个值以使等式成立0 + 0 + 0 + auto + 0 + 0 + 0 = 800  auto = 8000 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 600200 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 400auto + 0 + 0 + 200 + 0 + 0 + 200 = 800  auto = 400auto + 0 + 0 + 200 + 0 + 0 + auto = 800  auto = 300- 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0- 如果将三个值都设置为auto，则外边距都是0，宽度最大- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值所以我们经常利用这个特点来使一个元素在其父元素中水平居中示例：width:xxxpx;margin:0 auto;*/}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>   
</body>
</html>

image-20200322215559397

6.盒子垂直方向的布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>        .outer{background-color: #bfa;height: 600px;/* 默认情况下父元素的高度被内容撑开height不写或height：auto;*/}.inner{width: 100px;background-color: yellow;height: 100px;margin-bottom: 100px;            }.box1{width: 200px;height: 200px;background-color: #bfa;/* 子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出使用 overflow 属性来设置父元素如何处理溢出的子元素可选值：visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示hidden 溢出内容将会被裁剪不会显示scroll 生成两个滚动条，通过滚动条来查看完整的内容auto 根据需要生成滚动条overflow-x: 单独处理水平方向的overflow-y: 垂直方向*/overflow: auto;           }.box2{width: 100px;height: 400px;background-color: orange;}    </style>
</head>
<body><!-- <div class="outer"><div class="inner"></div><div class="inner"></div></div> --><div class="box1">在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口</div>
</body>
</html>

image-20200322215719686

7.盒子模型

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒子模型</title><style type="text/css">.box1{/** 使用width来设置盒子内容区的宽度* 使用height来设置盒子内容区的高度* * width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，* 	盒子可见框的大小由内容区，内边距和边框共同决定*/width: 300px;height: 300px;/*设置背景颜色*/background-color: #bfa;/** 为元素设置边框* 	要为一个元素设置边框必须指定三个样式* 		border-width:边框的宽度，默认一般是3px* 		border-color:边框颜色* 		border-style:边框的样式*//** 设置边框的宽度*//*border-width:10px ;*//*使用border-width可以分别指定四个边框的宽度如果在border-width指定了四个值，则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的如果指定三个值，则三个值会分别设置给	上  左右 下如果指定两个值，则两个值会分别设置给 上下 左右	如果指定一个值，则四边全都是该值	除了border-width，CSS中还提供了四个border-xxx-widthxxx的值可能是top right bottom left专门用来设置指定边的宽度	* *//*border-width:10px 20px 30px 40px ;*//*border-width:10px 20px 30px ;*//*border-width: 10px 20px ;*/border-width: 10px;/*border-left-width:100px ;*//** 设置边框的颜色* 和宽度一样，color也提供四个方向的样式，可以分别指定颜色* border-xxx-color*/border-color: red;/*border-color: red yellow orange blue;*//*border-color: red yellow orange;*//*border-color: red yellow;*//** 设置边框的样式* 	可选值：* 		none，默认值，没有边框* 		solid 实线* 		dotted 点状边框* 		dashed 虚线* 		double 双线* * style也可以分别指定四个边的边框样式，规则和width一致，* 	同时它也提供border-xxx-style四个样式，来分别设置四个边*//*border-style: double;*/border-style: solid dotted dashed double; }					</style></head><body><div class="box1"></div></body>
</html>

image-20200313201528785

9.浏览器的默认样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，* 	所以为很多的元素都设置了一些默认的margin和padding，* 	而它的这些默认样式，正常情况下我们是不需要使用的。* * 所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉* 	*//** 清除浏览器的默认样式*/*{margin: 0;padding: 0;}.box1{width: 100px;height: 100px;background-color: #bfa;}p{background-color: yellow;}						</style></head><body><div class="box1"></div>	<p>我是一个段落</p><p>我是一个段落</p><p>我是一个段落</p>		<ul><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul></body>
</html>

image-20200313202251853

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>默认样式</title><!-- <link rel="stylesheet" href="./css/reset.css"> --><link rel="stylesheet" href="./css/normalize.css"><!-- 重置样式表：专门用来对浏览器的样式进行重置的reset.css 直接去除了浏览器的默认样式normalize.css 对默认样式进行了统一--><style>/* 默认样式：- 通常情况，浏览器都会为元素设置一些默认样式- 默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）*//* body{margin: 0;}p{margin: 0;}ul{margin: 0;padding: 0;/* 去除项目符号 * /list-style:none; } *//* *{margin: 0;padding: 0;} */.box1{width: 100px;height: 100px;border: 1px solid black;}</style>
</head>
<body>    
<div class="box1"></div><p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>
</body>
</html>

image-20200322220232428

10.行内元素的盒模型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.s1{background-color: yellow;/* 行内元素的盒模型- 行内元素不支持设置宽度和高度- 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局- 行内元素可以设置border，垂直方向的border不会影响页面的布局- 行内元素可以设置margin，垂直方向的margin不会影响布局*//* width: 100px;height: 100px; *//* padding: 100px; *//* border: 100px solid red; */margin: 100px;}.box1{width: 200px;height: 200px;background-color: #bfa;}a{/* display 用来设置元素显示的类型可选值：inline 将元素设置为行内元素block 将元素设置为块元素inline-block 将元素设置为行内块元素 行内块，既可以设置宽度和高度又不会独占一行table 将元素设置为一个表格none 元素不在页面中显示visibility 用来设置元素的显示状态可选值：visible 默认值，元素在页面中正常显示hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置*/display: block;visibility: hidden;width: 100px;height: 100px;background-color: orange;}</style>
</head>
<body><a href="javascript:;">超链接</a><a href="javascript:;">超链接</a><span class="s1">我是span</span><span class="s1">我是span</span><div class="box1"></div>
</body>
</html>

image-20200322220047458

11.盒子的尺寸

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 100px;height: 100px;background-color: #bfa;padding: 10px;border: 10px red solid;/* 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）可选值：content-box 默认值，宽度和高度用来设置内容区的大小width和height为100px，即内容区的大小border-box 宽度和高度用来设置整个盒子可见框的大小width 和 height 指的是内容区 和 内边距 和 边框的总大小*/            box-sizing: border-box;}   </style>
</head>
<body><div class="box1"></div>   
</body>
</html>

image-20200322220402573

12.轮廓和圆角

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>轮廓和圆角</title><style>.box1{width: 200px;height: 200px;background-color: #bfa;/* box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局，默认为在.box1的下面，所以要设置其他值才能看到第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动第三个值 阴影的模糊半径第四个值 阴影的颜色*/box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ; 
/* outline 用来设置元素的轮廓线，用法和border一模一样轮廓和边框不同的点，就是轮廓不会影响到可见框的大小（页面的布局）    */           }/* .box1:hover{outline: 10px red solid;} */.box2{width: 200px;height: 200px;background-color: orange;/* border-radius: 用来设置圆角 圆角设置的圆的半径大小*//* border-top-left-radius: 设置走上角 *//* border-top-right-radius: 设置右上角  *//* border-bottom-left-radius:  *//* border-bottom-right-radius:  */ /* border-top-left-radius:50px 100px;左上角的x方向和y方向 *//* border-radius 可以分别指定四个角的圆角四个值 左上 右上 右下 左下三个值 左上 右上/左下 右下 两个个值 左上/右下 右上/左下  *//* border-radius: 20px / 40px; *//* 将元素设置为一个圆形 */border-radius: 50%;}</style>
</head>
<body><!-- <div class="box1"></div> --><div class="box2"></div>
</body>
</html>

image-20200322220545632

13.display

• 我们不能为行内元素设置width、height、margin-top和margin-bottom。

• 我们可以通过修改display来修改元素的性质。

• 可选值：

– block：设置元素为块元素

– inline：设置元素为行内元素

– inline-block：设置元素为行内块元素

– none：隐藏元素（元素将在页面中完全消失）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">			a{background-color: #bfa;/** 将一个内联元素变成块元素，* 	通过display样式可以修改元素的类型* 		可选值：* 			inline：可以将一个元素作为内联元素显示* 			block: 可以将一个元素设置块元素显示* 			inline-block：将一个元素转换为行内块元素* 					- 可以使一个元素既有行内元素的特点又有块元素的特点* 						既可以设置宽高，又不会独占一行* 			none: 不显示元素，并且元素不会在页面中继续占有位置*/display: none;/*为其设置一个宽和高*/width: 500px;height: 500px;}.box{width: 100px;height: 100px;background-color: orange;/** display: none;* 	使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置*//*display: none;*//** visibility* 	- 可以用来设置元素的隐藏和显示的状态* 	- 可选值：* 		visible 默认值，元素默认会在页面显示* 		hidden 元素会隐藏不显示	* * 使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，* 		但是它的位置会依然保持*/visibility:hidden ;}			</style></head><body>		<div class="box"></div>		<a href="#">我是一个大大的超链接</a>		<span>hello</span>		</body>
</html>

image-20200313202535572

14.内联框架(iframe)

<!-- 内联框架，用于向当前页面中引入一个其他页面src 指定要引入的网页的路径frameborder 指定内联框架的边框 可以指定0（无边框）或1（有边框）--><iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

<!-- 使用内联框架可以引入一个外部的页面使用iframe来创建一个内联框架属性：src ：指向一个外部页面的路径，可以使用相对路径width：height：name ：可以为内联框架指定一个name属性在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索		-->
<iframe src="demo02.html" name="tom"></iframe>

image-20200311151656147

15.音视频

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- audio 标签用来向页面中引入一个外部的音频文件的音视频文件引入时，默认情况下不允许用户自己控制播放停止属性：controls 是否允许用户控制播放autoplay 音频文件是否自动播放- 如果设置了autoplay 则音乐在打开页面时会自动播放但是目前来讲大部分浏览器都不会自动对音乐进行播放 loop 音乐是否循环播放  --><!-- <audio src="./source/audio.mp3" controls autoplay loop></audio> --><!-- <audio src="./source/audio.mp3" controls></audio> --><!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 --><audio controls><!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ --><source src="./source/audio.mp3"><source src="./source/audio.ogg"><!--ie8--><embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100"></audio><!-- 使用video标签来向网页中引入一个视频- 使用方式和audio基本上是一样的--><video controls><source src="./source/flower.webm"><source src="./source/flower.mp4"><embed src="./source/flower.mp4" type="video/mp4"></video><iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
</body>
</html>

image-20200315143853225

16.块级元素和行级元素(内联元素、内嵌元素)的区别

HTML中的元素可分为两种类型：块级元素和行级元素。这些元素的类型是通过文档类型定义（DTD）来指明。

  • 块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如p,ul,form,div等标签元素。

  • 行内元素：元素在一行内水平排列，高度由元素的内容决定，height属性不起作用，如span,input等元素。

1.块级元素:block element

  • 每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；

  • 块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如只能包含块级元素。其他的块级元素则可以包含 行级元素如

    .也有一些则既可以包含块级，也可以包含行级元素。

  • div 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

2.行内元素:inline element

  • 也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，
  • 常见内联元素 a，span 元素，iframe元素和元素样式的display:inline的都是行内元素。例如文字这类元素，各个字母之间横向排列，到最右端自动折行。

3.block(块)元素的特点

①、总是在新行上开始；

②、高度，行高以及外边距和内边距都可控制；

③、宽度缺省是它的容器的100%，除非设定一个宽度。

④、它可以容纳内联元素和其他块元素

4.inline元素的特点

①、和其他元素都在一行上；

②、高，行高及外边距和内边距不可改变；

③、宽度就是它的文字或图片的宽度，不可改变

④、内联元素只能容纳文本或者其他内联元素

行内元素注意点

  • 设置宽度width 无效。
  • 设置高度height 无效，可以通过line-height来设置。
  • 设置margin 只有左右margin有效，上下无效。
  • 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
 <!-- 块元素（block element），独占一行- 在网页中一般通过块元素来对页面进行布局行内元素（inline element）- 行内元素主要用来包裹文字- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素- 块元素中基本上什么都能放- p元素中不能放任何的块元素浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正比如：标签写在了根元素的外部p元素中嵌套了块元素根元素中出现了除head和body以外的子元素... ...-->

5.常见的块状元素

  • address – 地址
  • blockquote – 块引用
  • center – 举中对齐块
  • dir – 目录列表
  • div – 常用块级容易，也是CSS layout的主要标签
  • dl – 定义列表
  • fieldset – form控制组
  • form – 交互表单
  • h1 – 大标题
  • h2 – 副标题
  • h3 – 3级标题
  • h4 – 4级标题
  • h5 – 5级标题
  • h6 – 6级标题
  • hr – 水平分隔线
  • isindex – input prompt
  • menu – 菜单列表
  • noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
  • noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
  • ol – 有序表单
  • p – 段落
  • pre – 格式化文本
  • table – 表格
  • ul – 无序列表

6.常见的内联元素

  • a – 锚点
  • abbr – 缩写
  • acronym – 首字
  • b – 粗体(不推荐)
  • bdo – bidi override
  • big – 大字体
  • br – 换行
  • cite – 引用
  • code – 计算机代码(在引用源码的时候需要)
  • dfn – 定义字段
  • em – 强调
  • font – 字体设定(不推荐)
  • i – 斜体
  • img – 图片
  • input – 输入框
  • kbd – 定义键盘文本
  • label – 表格标签
  • q – 短引用
  • s – 中划线(不推荐)
  • samp – 定义范例计算机代码
  • select – 项目选择
  • small – 小字体文本
  • span – 常用内联容器，定义文本内区块
  • strike – 中划线
  • strong – 粗体强调
  • sub – 下标
  • sup – 上标
  • textarea – 多行文本输入框
  • tt – 电传文本
  • u – 下划线

7.行内元素与块级元素的不同

区别一：

**块级：**块级元素会独占一行，默认情况下宽度自动填满其父元素宽度

**行内：**行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

区别二：

**块级：**块级元素可以设置宽高

**行内：**行内元素不可以设置宽高

区别三：

**块级：**块级元素可以设置margin，padding

**行内：**行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

区别四：

块级：display:block;

行内：display:inline;

可以通过修改display属性来切换块级元素和行内元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>		<!--块元素和内联元素div就是一个块元素，所谓的块元素就是会独占一行的的元素,无论他的内容有多少他都会独占一整行。p h1 h2 h3 ... div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，div元素主要用来对页面进行布局的	span是一个内联元素（行内元素）	所谓的行内元素，指的是只占自身大小的元素，不会占用一行常见的内联元素：a img iframe spanspan没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式	块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素a元素可以包含任意元素，除了他本身p元素不可以包含任何块元素			--><p><div>我是一个span</div></p><a href="#"><a href="#">我是一个超链接</a></a><a href="#"><div style="background-color:red ; width: 200px;">我是一个div</div></a><div style="background-color:yellow ; width: 200px;">我是一个div</div><p>我是一个p标签</p><p>我是一个p标签</p><hr /><span>我是一个span</span><span>我是一个span</span><span>我是一段文字</span>		</body>
</html>

image-20200312153910247

17.内联元素的盒子

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">span{background-color: #bfa;}.box1{width: 100px;height: 100px;background-color: red;}.s1{/*内容区、内边距 、边框 、外边距* *//** 内联元素不能设置width和height*//*width: 200px;height: 200px;*//** 设置水平内边距,内联元素可以设置水平方向的内边距*/padding-left: 100px ;padding-right: 100px ;/** 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局*//*padding-top: 50px;padding-bottom: 50px;*//** 为元素设置边框,* 	内联元素可以设置边框，但是垂直的边框不会影响到页面的布局*/border: 1px blue solid;/** 水平外边距* 	内联元素支持水平方向的外边距*/margin-left:100px ;margin-right: 100px;/** 内联元素不支持垂直外边距*//*margin-top: 200px;margin-bottom: 200px;*/}.s2{/** 为右边的元素设置一个左外边距* 水平方向的相邻外边距不会重叠，而是求和*/margin-left: 100px;}					</style></head><body><span class="s1">我是一个span</span><span class="s2">我是一个span</span><span>我是一个span</span><span>我是一个span</span><div class="box1"></div></body>
</html>

image-20200313202437558

18.visibility

• visibility属性主要用于元素是否可见

• 和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。

• 可选值：

  • visible：可见的

  • hidden：隐藏的

19.overflow

• 当相关标签里面的内容超出了样式的宽度和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子。

• 可以通过overflow来控制内容溢出的情况。

• 可选值：

  • visible：默认值
  • scroll：添加滚动条
  • auto：根据需要添加滚动条
  • hidden：隐藏超出盒子的内容
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">			.box1{width: 200px;height: 200px;background-color: #bfa;/** 子元素默认是存在于父元素的内容区中，* 		理论上讲子元素的最大可以等于父元素内容区大小* 	如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，* 		超出父元素的内容，我们称为溢出的内容*  父元素默认是将溢出内容，在父元素外边显示，* 	通过overflow可以设置父元素如何处理溢出内容：* 		可选值：* 			- visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示* 			- hidden, 溢出的内容，会被修剪，不会显示* 			- scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容* 					- 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条* 			- auto，会根据需求自动添加滚动条，* 						需要水平就添加水平* 						需要垂直就添加垂直* 						都不需要就都不加*/overflow: auto;}.box2{width: 100px;height: 500px;background-color: red;}</style></head><body>	<div class="box1">在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪 </div>		</body>
</html>

image-20200313202656508

20.文档流

• 文档流指的是文档中可现实的对象在排列时所占用的位置。

• 将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

• 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放。

• 这样一来每一个块元素都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>		<!-- 文档流文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中元素在文档流中的特点块元素1.块元素在文档流中会独占一行，块元素会自上向下排列。2.块元素在文档流中默认宽度是父元素的100%3.块元素在文档流中的高度默认被内容撑开内联元素1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。2.在文档流中，内联元素的宽度和高度默认都被内容撑开	-->		<!-- 当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距--><div style="background-color: #bfa;"><div style="height: 50px;"></div></div><div style="width: 100px; height: 100px; background-color: #ff0;"></div><span style="background-color: yellowgreen;">我是一个span</span><span style="background-color: yellowgreen;">我是一个span</span><span style="background-color: yellowgreen;">我是一个span</span><span style="background-color: yellowgreen;">我是一个span</span><span style="background-color: yellowgreen;">我是一个span</span><span style="background-color: yellowgreen;">我是一个span</span></body>
</html>

image-20200313202752160

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 100px;background-color: yellow;}.box2{width: 100px;background-color: red;}span{background-color: #bfa;}</style>
</head>
<body><!-- 文档流（normal flow）- 网页是一个多层的结构，一层摞着一层- 通过CSS可以分别为每一层来设置样式- 作为用户来讲只能看到最顶上一层- 这些层中，最底下的一层称为文档流，文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列- 对于我们来元素主要有两个状态在文档流中不在文档流中（脱离文档流）- 元素在文档流中有什么特点：- 块元素- 块元素会在页面中独占一行(自上向下垂直排列)- 默认宽度是父元素的全部（会把父元素撑满）- 默认高度是被内容撑开（子元素）- 行内元素- 行内元素不会独占页面的一行，只占自身的大小- 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素则元素会换到第二行继续自左向右排列（书写习惯一致）- 行内元素的默认宽度和高度都是被内容撑开--><div class="box1">我是div1</div><div class="box2">我是div2</div><span>我是span1</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span>
</body>
</html>

image-20200322214232402

21.浮动(float)

• 所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。

• 浮动使用float属性。

• 可选值：

  • – none：不浮动

  • –left：向左浮动

  • – right：向右浮动

• 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。

• 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。

• 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围。

• 浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。

• 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。

• 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。

• 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个块元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮动的简介</title><style>.box1{width: 400px;height: 200px;background-color: #bfa;/* 通过浮动可以使一个元素向其父元素的左侧或右侧移动使用 float 属性来设置于元素的浮动可选值：none 默认值 ，元素不浮动left 元素向左浮动right 元素向右浮动注意，元素设置浮动以后，水平布局的等式便不需要强制成立元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动浮动的特点：1、浮动元素会完全脱离文档流，不再占据文档流中的位置2、设置浮动以后元素会向父元素的左侧或右侧移动，3、浮动元素默认不会从父元素中移出4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高简单总结：浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局    */float: left;}.box2{width: 400px;height: 200px;background-color: orange;float: left;}.box3{width: 200px;height: 200px;background-color: yellow;float: right;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body>
</html>

image-20200324134731045

浮动其他的特点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;}.box1{width: 100px;height: 100px;background-color: #bfa;/* 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果*/float: left;}.box2{background-color: yellowgreen;/*元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化脱离文档流（浮动）的特点：块元素：1、块元素不在独占页面的一行2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开行内元素：行内元素脱离文档流以后会变成块元素，特点和块元素一样（可以设置宽高）脱离文档流以后，不需要再区分块和行内了*/float: left;}.box3{background-color: orange}.s1{float: left;width: 200px;height: 200px;background-color: yellow;}</style>
</head>
<body><!-- <div class="box1"></div><p>在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 
这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，
使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，</p> --><span class="s1">我是一个span</span><!-- <div class="box2">helloaaaaa</div> --><!-- <div class="box3">hello</div> -->    
</body>
</html>

image-20200324134925635

清除浮动

• clear属性可以用于清除元素周围的浮动对元素的影响。

• 也就是元素不会因为上方出现了浮动元素而改变位置

• 可选值：

  • –left：忽略左侧浮动
  • –right：忽略右侧浮动
  • – both：清除两侧浮动元素对当前元素的影响，清除对他影响最大的那个元素的浮动
  • – none：不忽略浮动，默认值
.clear {clear: both;
}
<div class="clear"></div>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title>		<style type="text/css">			.box1{width: 100px;height: 100px;background-color: yellow;/** 设置box1向左浮动*/float: left;}.box2{width: 200px;height: 200px;background-color: yellowgreen;/** 由于受到box1浮动的影响，box2整体向上移动了100px* 我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能* clear可以用来清除其他浮动元素对当前元素的影响* 可选值：* 		none，默认值，不清除浮动* 		left，清除左侧浮动元素对当前元素的影响* 		right，清除右侧浮动元素对当前元素的影响* 		both，清除两侧浮动元素对当前元素的影响* 				清除对他影响最大的那个元素的浮动*//** 清除box1浮动对box2产生的影响* 清除浮动以后，元素会回到其他元素浮动之前的位置*//*clear: left;*/float: right;}.box3{width: 300px;height: 300px;background-color: skyblue;clear: both;}			</style>		</head><body>	<div class="box1"></div><div class="box2"></div><div class="box3"></div>		</body>
</html>

image-20200313214820126

clear

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{font-size: 50px;}.box1{width: 200px;height: 200px;background-color: #bfa;float: left;}.box2{width: 400px;height: 150px;background-color: #ff0;float: right;}.box3{width: 200px;height: 200px;background-color: orange;/* 由于box1的浮动，导致box3位置上移也就是box3收到了box1浮动的影响，位置发生了改变如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响clear- 作用：清除浮动元素对当前元素所产生的影响- 可选值：left 清除左侧浮动元素对当前元素的影响right 清除右侧浮动元素对当前元素的影响both 清除两侧中最大影响的那侧原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响*/clear: both;}</style>
</head>
<body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>    
</body>
</html>

image-20200324135459751

浮动1

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{width: 600px;height: 200px;background-color: red;/** 块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，* 	如果希望块元素在页面中水平排列，可以使块元素脱离文档流* 使用float来使元素浮动，从而脱离文档流* 	可选值：* 		none，默认值，元素默认在文档流中排列* 		left，元素会立即脱离文档流，向页面的左侧浮动* 		right，元素会立即脱离文档流，向页面的右侧浮动* * 当为一个元素设置浮动以后（float属性是一个非none的值），* 	元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动* 	元素浮动以后，会尽量向页面的左上或这是右上漂浮，* 	直到遇到父元素的边框或者其他的浮动元素* 	如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素* 	浮动的元素不会超过他上边的兄弟元素，最多最多一边齐*/float: left;}.box2{width: 600px;height: 200px;background-color: yellow;float: left;}.box3{width: 200px;height: 200px;background-color: green;float: right;}					</style></head><body>		<div class="box1"></div><div class="box2"></div><div class="box3"></div>		</body>
</html>

image-20200313203604858

浮动2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.box1{width: 100px;height: 100px;background-color: #bfa;/** 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，* 	所以我们可以通过浮动来设置文字环绕图片的效果*/ /*box1向左浮动*/float: left;}.p1{background-color: yellow;}			</style></head><body>		<div class="box1"></div><p class="p1">在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在</p>		</body>
</html>

image-20200313203700163

浮动3

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{/** 在文档流中，子元素的宽度默认占父元素的全部*/background-color: #bfa;/** 当元素设置浮动以后，会完全脱离文档流.* 	块元素脱离文档流以后，高度和宽度都被内容撑开*//*float: left;*/}.s1{/** 开启span的浮动* 	内联元素脱离文档流以后会变成块元素*/float: left;width: 100px;height: 100px;background-color: yellow;}			</style></head><body>		<div class="box1">a</div><span class="s1">hello</span>		</body>
</html>

image-20200313203752936

22.简单布局

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*清除默认样式*/*{margin: 0;padding: 0;}/*设置头部div*/.header{/*设置一个宽度*/width: 1000px;/*设置一个高度*/height: 120px;/*设置一个背景颜色*/background-color: yellowgreen;/*设置居中*/margin: 0 auto;}/*设置一个content*/.content{/*设置一个宽度*/width: 1000px;/*设置一个高度*/height: 400px;/*设置一个背景颜色*/background-color: orange;/*居中*/margin: 10px auto;}/*设置content中小div的样式*/.left{width: 200px;height: 100%;background-color: skyblue;/*向左浮动*/float: left;}.center{width: 580px;height: 100%;background-color: yellow;/*向左浮动*/float: left;/*设置水平外边距*/margin: 0 10px;}.right{width: 200px;height: 100%;background-color: pink;/*向左浮动*/float: left;}/*设置一个footer*/.footer{/*设置一个宽度*/width: 1000px;/*设置一个高度*/height: 120px;/*设置一个背景颜色*/background-color: silver;/*居中*/margin: 0 auto;}			</style></head><body><!-- 头部div --><div class="header"></div><!-- 主体内容div --><div class="content"><!-- 左侧div --><div class="left"></div><!-- 中间div --><div class="center"></div><!-- 右侧div --><div class="right"></div>			</div><!-- 底部信息div --><div class="footer"></div>		</body>
</html>

image-20200313203947706

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>header, main, footer{width: 1000px;margin: 0 auto;}/* 设置头部 */header{height: 150px;background-color: silver;}/* 设置主体 */main{height: 500px;background-color: #bfa;margin: 10px auto;}nav, article, aside{float: left;height: 100%;}/* 设置左侧的导航 */nav{width: 200px;background-color: yellow;}/* 设置中间的内容 */article{width: 580px;background-color: orange;margin: 0 10px;}/* 设置右侧的内容 */aside{width: 200px;background-color: pink;}/* 设置底部 */footer{height: 150px;background-color: tomato;}</style>
</head>
<body><!-- 创建头部 --><header></header><!-- 创建网页的主体 --><main><!-- 左侧导航 --><nav></nav><!-- 中间的内容 --><article></article><!-- 右边的边栏 --><aside></aside></main><!-- 网页的底部 --><footer></footer>
</body>
</html>

image-20200324135046895

23.高度塌陷

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box1{/*为box1设置一个边框*/border: 10px red solid;}.box2{width: 100px;height: 100px;background-color: blue;/** 在文档流中，父元素的高度默认是被子元素撑开的，* 	也就是子元素多高，父元素就多高。* 但是当为子元素设置浮动以后，子元素会完全脱离文档流，* 	此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。* 	由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。* * 所以在开发中一定要避免出现高度塌陷的问题,* 	我们可以将父元素的高度写死，以避免塌陷的问题出现，* 	但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。*//*为子元素设置向左浮动*/float: left;}.box3{height: 100px;background-color: yellow;}			</style></head><body>		<div class="box1"><div class="box2"></div></div>		<div class="box3"></div>		</body>
</html>

image-20200313214216924

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.outer{border: 10px red solid;/* BFC(Block Formatting Context) 块级格式化环境- BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC开启BFC该元素会变成一个独立的布局区域- 元素开启BFC后的特点：1.开启BFC的元素不会被浮动元素所覆盖2.开启BFC的元素子元素和父元素外边距不会重叠（如果重叠子元素的（margin）会传递给父元素，所以开启bfc（overflow:hidden）之后就可以设置子元素相对父元素的位置，而不会一起移动）3.开启BFC的元素可以包含浮动的子元素- 可以通过一些特殊方式来开启元素的BFC：1、设置元素的浮动（不推荐）2、将元素设置为行内块元素（不推荐）3、将元素的overflow设置为一个非visible的值- 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素*//* float: left; *//* display: inline-block; */overflow: hidden;}.inner{width: 100px;height: 100px;background-color: #bfa;/* 高度塌陷的问题：在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！*/float: left;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div><div style="width: 200px;height: 200px;background-color:yellow;"></div></body>
</html>

image-20200324135152437

BFC

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 200px;height: 200px;background-color: #bfa;/* float: left; */overflow: hidden;}.box2{width: 200px;height: 200px;background-color: orange;overflow: hidden;}.box3{width: 100px;height: 100px;background-color: yellow;margin-top: 100px;}</style>
</head>
<body><div class="box1"><div class="box3"></div></div><!-- <div class="box2"></div> --></body>
</html>

image-20200324135355633

解决高度塌陷1

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.box1{border: 10px red solid;/** 根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context* 	简称BFC，该属性可以设置打开或者关闭，默认是关闭的。* 当开启元素的BFC以后，元素将会具有如下的特性：* 	1.父元素的垂直外边距不会和子元素重叠	* 	2.开启BFC的元素不会被浮动元素所覆盖* 	3.开启BFC的元素可以包含浮动的子元素* * 如何开启元素的BFC* 	1.设置元素浮动* 		- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失* 			而且使用这种方式也会导致下边的元素上移，不能解决问题* 	2.设置元素绝对定位* 	3.设置元素为inline-block* 		- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式* 	4.将元素的overflow设置为一个非visible的值* 	* 推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。	*//*overflow: hidden;*//**但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。* 在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，* 该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题* 开启方式很多，我们直接使用一种副作用最小的：* 	直接将元素的zoom设置为1即可* *//** zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍* zoom:1表示不放大元素，但是通过该样式可以开启hasLayout* zoom这个样式，只在IE中支持，其他浏览器都不支持*/zoom:1;overflow: hidden;}.box2{width: 100px;height: 100px;background-color: blue;float: left;}.box3{height: 100px;background-color: yellow;}			</style></head><body>		<div class="box1"><div class="box2"></div></div>		<div class="box3"></div>		</body>
</html>

image-20200313214354123

解决高度塌陷2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{border: 1px solid red;}.box2{width: 100px;height: 100px;background-color: blue;float: left;}		/** 解决高度塌陷方案二：* 	可以直接在高度塌陷的父元素的最后，添加一个空白的div，* 	由于这个div并没有浮动，所以他是可以撑开父元素的高度的，* 	然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，* 	基本没有副作用* * 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。*/.clear{clear: both;}			</style></head><body><div class="box1"><div class="box2"></div><div class="clear"></div></div></body>
</html>

image-20200313214455996

解决高度塌陷3

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.box1{border: 1px solid red;}.box2{width: 100px;height: 100px;background-color: blue;float: left;}/*通过after伪类，选中box1的后边*//** 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，* 	这样做和添加一个div的原理一样，可以达到一个相同的效果，* 	而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用*/.clearfix:after{/*添加一个内容*/content: "";/*转换为一个块元素*/display: block;/*清除两侧的浮动*/clear: both;}/** 在IE6中不支持after伪类,* 	所以在IE6中还需要使用hasLayout来处理*/.clearfix{zoom:1;}						</style></head><body><div class="box1"><div class="box2"></div></div></body>
</html>

image-20200313214624411

高度塌陷的最终解决方案

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{border: 10px red solid;/* overflow: hidden; */}.box2{width: 100px;height: 100px;background-color: #bfa;float: left;}/*第一种方法*/.box3{clear: both;}/*第二种方法*/.box1::after{content: '';display: block;clear: both;}</style>
</head>
<body><div class="box1"><div class="box2"></div><!-- <div class="box3"></div> --></div></body>
</html>

image-20200324135622075

24.clearfix

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 200px;height: 200px;background-color: #bfa;}/* .box1::before{content: '';display: table;} */.box2{width: 100px;height: 100px;background-color: orange;margin-top: 100px;}/* clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可解决外边距重叠：.clearfix::before{content: '';  //添加一个空内容display: table;  //显示为表格}// 解决高度塌陷：.clearfix::after{content: '';display: table;clear:both}*/.clearfix::before,.clearfix::after{content: '';display: table;clear: both;}</style>
</head>
<body><div class="box1 clearfix"><div class="box2"></div></div></body>
</html>

image-20200324135724629

25.导航条

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>导航条</title><style type="text/css">			/** 清除默认样式*/*{margin:0;padding:0;}/** 设置ul*/.nav{/*去除项目符号*/list-style: none;/*为ul设置一个背景颜色*/background-color: #6495ED;/*设置一个宽度*//** 在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout*/width: 1000px;/*设置元素居中*/margin: 50px auto;/*解决高度塌陷*/overflow: hidden;}/*** 设置li*/.nav li{/*设置li向左浮动*/float: left;width: 12.5%;}.nav a{/*将a转换为块元素*/display: block;/*为a指定一个宽度*/width: 100%;/*设置文字居中*/text-align: center;/*设置一个上下内边距*/padding: 5px 0;/*去除下划线*/text-decoration: none;/*设置字体颜色*/color: white;/*设置加粗*/font-weight: bold;}/** 设置a的鼠标移入的效果*/.nav a:hover{background-color: #c00;}						</style></head><body>		<!-- 创建导航条的结构 --><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li><li><a href="#">首页</a></li><li><a href="#">新闻</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></body>
</html>

image-20200313214727458

26.开班信息

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*清除默认样式*/*{                                                                                                  margin: 0;padding: 0;}/*统一页面中的字体*/body{font: 12px/1 宋体;}/*设置outer的大小*/.outer{width: 300px;/*height: 473px;*//*background-color: #bfa;*//*设置outer居中效果*/margin: 50px auto;}/** 设置title的边框*/.title{/*设置上边框*/border-top:2px #019e8b solid ;/*设置盒子的高度*/height: 36px;/*设置背景样式*/background-color: #f5f5f5;/*设置title的行高*/line-height: 36px;/*设置title的内边距*/padding: 0px 22px 0px 16px;}/*设置title中的超链接* */.title a{float: right;/*设置字体颜色*/color: red;}/*设置h3*/.title h3{font: 16px/36px "微软雅黑";}/*设置内容*/.content{border: 1px solid #deddd9;/*设置内边距*/padding: 0px 28px 0px 20px;}/*设置内容中的超链接*/.content a{color: black;/*去除超链接的下划线*/text-decoration: none;/*设置字体大小*/font-size: 12px;}/*为超链接添加一个hover伪类*/.content a:hover{color: red;/*为超链接添加下划线*/text-decoration: underline;}/*设置内容中的标题*/.content h3{margin-top: 14px;margin-bottom: 16px;}/** 设置右侧的a的样式*/.content .right{/*设置向右浮动*/float: right;}/*设置ul的样式*/.content ul{/*去除项目符号*/list-style: none;/*为ul设置一个下边框*/border-bottom: 1px dashed #deddd9;}/*取消最后一个ul的边框*/.content .no-border{border: none;}/*设置内容中的红色字体*/.content .red{color: red;font-weight: bold;}/*设置内容中的li*/.content li{margin-bottom: 15px;}</style></head><body>		<!--创建一个外层div，容纳整个内容--><div class="outer"><!-- 开班信息的头部 --><div class="title"><a href="#">16年面授开班计划</a><h3>近期开班</h3></div><!-- 开班信息的主要内容 --><div class="content"><h3><a href="#">JavaEE+云计算-全程就业班</a></h3><ul><li><a class="right" href="#"><span class="red">预约报名</span></a><a href="#">开班时间：<span class="red">2016-04-27</span></a></li><li><a class="right" href="#"><span class="red">无座，名额爆满</span></a><a href="#">开班时间：<span class="red">2016-04-07</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2016-03-15</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2016-02-25</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2015-12-26</span></a></li></ul><h3><a href="#">Android+人工智能-全程就业班</a></h3><ul><li><a class="right" href="#"><span class="red">预约报名</span></a><a href="#">开班时间：<span class="red">2016-04-10</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2016-03-17</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2016-02-20</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2015-12-23</span></a></li></ul><h3><a href="#">前端+HTML5-全程就业班</a></h3><ul class="no-border"><li><a class="right" href="#"><span class="red">预约报名</span></a><a href="#">开班时间：<span class="red">2016-05-10</span></a></li><li><a class="right" href="#"><span>开班盛况</span></a><a href="#">开班时间：<span>2016-03-16</span></a></li></ul></div>		</div>	</body>
</html>

image-20200313214951793

27.定位(postition)

• position属性可以控制Web浏览器如何以及在何处显示特定的元素。

• 可以使用position属性把一个元素放置到网页中的任何位置。

• 可选值：

  • – static

  • – relative

  • – absolute

  • – fixed

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{font-size: 60px;}.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{width: 200px;height: 200px;background-color: orange;/*定位（position）- 定位是一种更加高级的布局手段- 通过定位可以将元素摆放到页面的任意位置- 使用position属性来设置定位可选值：static 默认值，元素是静止的没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位sticky 开启元素的粘滞定位- 相对定位：- 当元素的position属性值设置为relative时则开启了元素的相对定位- 相对定位的特点：1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化2.相对定位是参照于元素在文档流中的位置进行定位的3.相对定位会提升元素的层级4.相对定位不会使元素脱离文档流5.相对定位不会改变元素的性质块还是块，行内还是行内- 偏移量（offset）- 当元素开启了定位以后，可以通过偏移量来设置元素的位置top- 定位元素和定位位置上边的距离bottom- 定位元素和定位位置下边的距离- 定位元素垂直方向的位置由top和bottom两个属性来控制通常情况下我们只会使用其中一- top值越大，定位元素越向下移动- bottom值越大，定位元素越向上移动left- 定位元素和定位位置的左侧距离right- 定位元素和定位位置的右侧距离- 定位元素水平方向的位置由left和right两个属性控制通常情况下只会使用一个- left越大元素越靠右- right越大元素越靠左*/          position: relative;left: 100px;top: -200px;}.box3{width: 200px;height: 200px;background-color: yellow;}</style>
</head>
<body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></body>
</html>

image-20200324135837346

相对定位(relative)

• 每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。

• 当将position属性设置为relative时，则开启了元素的相对定位。

• 当开启了相对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。

相对定位的特点：

  1. 如果不设置元素的偏移量，元素位置不会发生改变。

  2. 相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。

  3. 相对定位不会改变元素原来的特性。

  4. 相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title>	<style type="text/css">.box1{width: 200px;height: 200px;background-color: red;}/*不推荐，.box2{width: 200px;height: 200px;background-color: yellow;margin-top:-200px;margin-left:200px*/.box2{width: 200px;height: 200px;background-color: yellow;/** 定位：* 	- 定位指的就是将指定的元素摆放到页面的任意位置* 		通过定位可以任意的摆放元素* 	- 通过position属性来设置元素的定位* 		-可选值：* 			static：默认值，元素没有开启定位* 			relative：开启元素的相对定位* 			absolute：开启元素的绝对定位* 			fixed：开启元素的固定定位（也是绝对定位的一种）*//** 当元素的position属性设置为relative时，则开启了元素的相对定位* 	1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化*  2.相对定位是相对于元素在文档流中原来的位置进行定位（即自己原来的位置）* 	3.相对定位的元素不会脱离文档流* 	4.相对定位会使元素提升一个层级（即可以覆盖其他的元素）* 	5.相对定位不会改变元素的性质，块还是块，内联还是内联*/position: relative;/** 当开启了元素的定位（position属性值是一个非static的值）时，* 	可以通过left right top bottom四个属性来设置元素的偏移量* 	left：元素相对于其定位位置的左侧偏移量* 	right：元素相对于其定位位置的右侧偏移量* 	top：元素相对于其定位位置的上边的偏移量* 	bottom：元素相对于其定位位置下边的偏移量* * 通常偏移量只需要使用两个就可以对一个元素进行定位，* 	一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位*//*left: 100px;top: 200px;*/left: 200px;				}.box3{width: 200px;height: 200px;background-color: yellowgreen;				}.s1{position: relative;width: 200px;height: 200px;background-color: yellow;}			</style>		</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div><span class="s1">我是一个span</span>		</body>
</html>

image-20200313221320685

绝对定位(absolute)

• 绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。

• 当将position属性设置为absolute时，则开启了元素的绝对定位。

• 当开启了绝对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。

绝对定位的特点

  1. 绝对定位会使元素完全脱离文本流。

  2. 绝对定位的块元素的宽度会被其内容撑开。

  3. 绝对定位会使行内元素变成块元素。

  4. 一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title>		<style type="text/css">.box1{width: 200px;height: 200px;background-color: red;}.box2{width: 200px;height: 200px;background-color: yellow;/** 当position属性值设置为absolute时，则开启了元素的绝对定位* * 绝对定位：* 	1.开启绝对定位，会使元素脱离文档流* 	2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化* 	3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）* 		如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位* 	4.绝对定位会使元素提升一个层级* 	5.绝对定位会改变元素的性质，* 		内联元素变成块元素，* 		块元素的宽度和高度默认都被内容撑开*/position: absolute;/*left: 100px;top: 100px;*/}.box3{width: 300px;height: 300px;background-color: yellowgreen;}.box4{width: 300px;height: 300px;background-color: orange;/*开启box4的相对定位*//*position: relative;*/}.s1{width: 100px;height: 100px;background-color: yellow;/*开启绝对定位*/position: absolute;}</style></head><body>		<div class="box1"></div><div class="box5"><div class="box4"><div class="box2"></div></div></div>		<div class="box3"></div>		<span class="s1">我是一个span</span></body>
</html>

image-20200313221437630

image-20200313221518657

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{font-size: 60px;}.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{width: 200px;height: 200px;background-color: orange;/* 绝对定位- 当元素的position属性值设置为absolute时，则开启了元素的绝对定位- 绝对定位的特点：1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化2.开启绝对定位后，元素会从文档流中脱离（即下方的元素会浮上来被覆盖）3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开4.绝对定位会使元素提升一个层级5.绝对定位元素是相对于其包含块进行定位的包含块( containing block )- 正常情况下：包含块就是离当前元素最近的祖先块元素<div> <div></div> </div><div><span><em>hello</em></span></div>- 绝对定位的包含块:包含块就是离它最近的开启了定位的祖先元素（只要不是static：默认值），如果所有的祖先元素都没有开启定位则根元素就是它的包含块- html（根元素、初始包含块）*/position: absolute;/* left: 0;top: 0; */bottom: 0;right: 0;}.box3{width: 200px;height: 200px;background-color: yellow;}.box4{width: 400px;height: 400px;background-color: tomato;position: relative;}.box5{width: 300px;height: 300px;background-color: aliceblue;/* 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>

image-20200324135938242

绝对定位元素的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 500px;height: 500px;background-color: #bfa;position: relative;}.box2{width: 100px;height: 100px;background-color: orange;position: absolute;margin: auto;/* 水平布局left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度- 当我们开启了绝对定位后:水平方向的布局等式就需要添加left 和 right 两个值此时规则和之前一样只是多添加了两个值：当发生过度约束（9个值加在一起不满足等式）：如果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 + height = 包含块的高度*/left: 0;right: 0;top: 0;bottom: 0;}</style>
</head>
<body><div class="box1"><div class="box2"></div>
</div></body>
</html>

image-20200324142234720

固定定位（fixed）

• 固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。

• 当将position属性设置为fixed时，则开启了元素的固定定位。

• 当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。

• 固定定位的其他特性和绝对定位类似。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title>		<style type="text/css">.box1{width: 200px;height: 200px;background-color: red;}.box2{width: 200px;height: 200px;background-color: yellow;/** 当元素的position属性设置fixed时，则开启了元素的固定定位* 	固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样* 不同的是：* 		固定定位永远都会相对于浏览器窗口进行定位* 		固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动* * IE6不支持固定定位*/position: fixed;left: 0px;top: 0px;}.box3{width: 200px;height: 200px;background-color: yellowgreen;}			</style>		</head><body style="height: 5000px;"><div class="box1"></div><div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;"><div class="box2"></div></div>		<div class="box3"></div></body>
</html>
<!--黄色盒子始终不动-->

image-20200313221728543

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{font-size: 60px;height: 2000px;}.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{width: 200px;height: 200px;background-color: orange;/*固定定位：- 将元素的position属性设置为fixed则开启了元素的固定定位- 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样唯一不同的是固定定位永远参照于浏览器的视口进行定位固定定位的元素不会随网页的滚动条滚动*/position: fixed;left: 0;top: 0;}.box3{width: 200px;height: 200px;background-color: yellow;}.box4{width: 400px;height: 400px;background-color: tomato;}.box5{width: 300px;height: 300px;background-color: aliceblue;}</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><!--2始终不动-->    
</body>
</html>

image-20200324140040029

粘滞定位（sticky）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>导航条</title><link rel="stylesheet" href="./css/reset.css"><style>body{height: 3000px;}/* 设置nav的大小 */.nav{/* 设置宽度和高度 */width: 1210px;height: 48px;/* 设置背景颜色 */background-color: #E8E7E3;margin:100px auto;/* 粘滞定位- 当元素的position属性设置为sticky时则开启了元素的粘滞定位- 粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定*/position: sticky;top: 10px;}/* 设置nav中li */.nav li{/* 设置li向左浮动，已使菜单横向排列 */float: left;/* 设置li的高度 *//* height: 48px; *//* 将文字在父元素中垂直居中 */line-height: 48px;}/* 设置a的样式 */.nav a{/* 将a转换为块元素 */display: block;/* 去除下划线 */text-decoration: none;/* 设置字体颜色 */color: #777777;/* 修改字体大小 */font-size: 18px;padding: 0 39px;}.nav li:last-child a{padding: 0 42px 0 41px;}/* 设置鼠标移入的效果 */.nav a:hover{background-color: #3F3F3F;color: #E8E7E3;}</style>
</head><body><!-- 创建导航条的结构 --><ul class="nav"><li><a href="#">HTML/CSS</a></li><li><a href="#">Browser Side</a></li><li><a href="#">Server Side</a></li><li><a href="#">Programming</a></li><li><a href="#">XML</a></li><li><a href="#">Web Building</a></li><li><a href="#">Reference</a></li></ul></body></html>

image-20200324142112127

28.z-index

• 当元素开启定位以后就可以设置z-index这个属性。

• 这个属性可以提升定位元素所在的层级

• z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index值较大的元素会显示在网页的最上层。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>层级</title>		<style type="text/css">.box1{width: 200px;height: 200px;background-color: red;position: relative;z-index: 2;opacity: 0.5;filter: alpha(opacity=50);}.box2{width: 200px;height: 200px;background-color: yellow;/*开启绝对定位*/position: absolute;/*设置偏移量*/				top: 100px;left: 100px;/** 如果定位元素的层级是一样，则下边的元素会盖住上边的* 通过z-index属性可以用来设置元素的层级* 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级* 	层级越高，越优先显示* * 对于没有开启定位的元素不能使用z-index*/z-index: 25;/*指定不透明度。从0.0（完全透明）到1.0（完全不透明）*/opacity: 0.5;filter: alpha(opacity=50);}.box3{width: 200px;height: 200px;background-color: yellowgreen;/*position: relative;z-index: 3;*/position: absolute;top: 200px;left: 200px;z-index: 30;/** 设置元素的透明背景* opacity可以用来设置元素背景的透明，* 	它需要一个0-1之间的值* 		0 表示完全透明* 		1 表示完全不透明* 		0.5 表示半透明*/opacity: 0.5;/** opacity属性在IE8及以下的浏览器中不支持* IE8及以下的浏览器需要使用如下属性代替* 	alpha(opacity=透明度)* 透明度，需要一个0-100之间的值* 	0 表示完全透明* 	100 表示完全不透明* 	50 半透明* * 这种方式支持IE6，但是这种效果在IE Tester中无法测试*/filter: alpha(opacity=50);}.box4{width: 200px;height: 200px;background-color: orange;/*开启相对定位*/position: relative;/** 父元素的层级再高，也不会盖住子元素*/z-index: 20;top: 500px;}.box5{width: 100px;height: 100px;background-color: skyblue;/*开启绝对定位*/position: absolute;z-index: 10;}			</style>		</head><body style="height: 5000px;"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"><div class="box5"></div></div></body>
</html>

image-20200313221933610

29.元素的层级

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{font-size: 60px;}.box1{width: 200px;height: 200px;background-color: #bfa;position: absolute;/* 对于开启了定位元素，可以通过z-index属性来指定元素的层级z-index需要一个整数作为参数，值越大元素的层级越高元素的层级越高越优先显示如果元素的层级一样，则优先显示靠下的元素（结构上）重点：祖先的元素的层级再高也不会盖住后代元素*//* z-index: 3; */}.box2{width: 200px;height: 200px;background-color: rgba(255 , 0, 0, .3);position: absolute;top: 50px;left: 50px;/* z-index: 3; */}.box3{width: 200px;height: 200px;background-color: yellow;position: absolute;top: 100px;left: 100px;z-index: 3;}.box4{width: 100px;height: 100px;background-color: orange;position: absolute;}</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>

image-20200324142353320

源码获取

至此，我们的HTML5+CSS3的学习(三)就讲解完成了。下篇我们将介绍元素背景、表格等内容，源码素材可以通过关注我的微信公众号 我爱学习呀嘻嘻 ，回复关键字HTML5+CSS3源码素材进行获取哦。

image-20211108230322493

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

相关文章

  1. 中国筒式过滤器行业市场供需与战略研究报告

    出版商&#xff1a;贝哲斯咨询 获取报告样本&#xff1a;筒式过滤器是安装在管道上能除去流体中的较大固体杂质&#xff0c;使机器设备、仪表能正常工作和运转&#xff0c;达到稳定工艺过程&#xff0c;保障安全生产的作用。当液体通过筒体进入滤篮后&#xff0c;固体杂质颗粒…...

    2024/4/13 23:08:49
  2. 中国碳氢分析仪行业市场供需与战略研究报告

    【出版商】贝哲斯咨询 【免费目录下载】碳氢元素分析仪是一种主要用于测定煤和其它有机物中碳和氢的含量的仪器。 碳氢分析仪市场的企业竞争态势 该报告涉及的主要国际市场参与者有Emerson、Super Systems、Teledyne Analytical Instruments、SICK、Agilent、PerkinElmer、Th…...

    2024/4/13 23:09:09
  3. Jetson Nano 安装使用Darknet

    由于最近要做一些图像相关的项目&#xff0c;对我来说图像识别是一个全新的领域&#xff0c;从零开始&#xff0c;正在慢慢摸索&#xff0c;记录一些自己做过的一些工作&#xff0c;也方便自己以后查看自己的一些踩坑记录。网上得教程也非常多&#xff0c;但是我还是决定先看看…...

    2024/4/13 23:09:04
  4. Android——六大基本布局总结，腾讯T3亲自讲解

    <LinearLayout android:layout_width“match_parent” android:layout_height“wrap_content” android:orientation“horizontal” > <TextView android:layout_width“wrap_content” android:layout_height“200dp” android:layout_weight“1” android:b…...

    2024/4/18 20:46:04
  5. 磨机和磨床行业调研报告 - 市场现状分析与发展前景预测

    出版商&#xff1a;贝哲斯咨询 获取报告样本&#xff1a; 企业竞争态势 磨机和磨床市场报告涉及的主要国际市场参与者有Buehler、C.W. Brabender Instruments、The Fitzpatrick Co、BioSpec Products、Extec、Hosokawa、Fritsch、SCP Science、Buhler、Glen Mills、McCrone、…...

    2024/4/20 6:40:57
  6. 离子注入机行业调研报告 - 市场现状分析与发展前景预测

    出版商&#xff1a;贝哲斯咨询 获取报告样本&#xff1a; 企业竞争态势 该报告涉及的主要国际市场参与者有Applied Materials、Axcelis Technologies、OEM Group、Intevac、Nissin Ion Equipment、Sumitomo Heavy Industries、ULVAC、Zhongkexin Electronics等。这些参与者的…...

    2024/4/18 6:02:01
  7. 社群裂变有哪几种玩法？

    不同的App在运营的需求上面千差万别&#xff0c;视频类、阅读类、工具类等产品在运营手段上是截然不同。 但是APP积分商城&#xff0c;是一个适用于所有App的经典运营工具。从传统行业来看&#xff0c;大到银行、航空公司&#xff0c;小到超市、百货商店&#xff0c;甚至是街边…...

    2024/4/19 4:37:54
  8. 杂项专题-学习笔记：模拟退火

    杂项专题-学习笔记&#xff1a;模拟退火1. 前言2. 详解3. 总结4. 参考资料1. 前言 模拟退火&#xff0c;是一种随机化算法&#xff0c;OI 中经常用来骗分&#xff0c;我因为不知道这算啥所以把它放在杂项里面了&#xff08;貌似题目有点奇怪&#xff09;。 模拟退火这个算法是…...

    2024/4/13 23:09:04
  9. 中国拼图游戏市场现状研究分析与发展前景预测报告（2022）

    【报告篇幅】&#xff1a;104 【报告图表数】&#xff1a;149 【报告出版时间】&#xff1a;2021年12月 报告摘要 2021年中国拼图游戏市场销售收入达到了 万元&#xff0c;预计2028年可以达到 万元&#xff0c;2022-2028期间年复合增长率(CAGR)为 %。中国市场核心厂商包括S…...

    2024/4/13 23:08:44
  10. 甜酱汁行业调研报告 - 市场现状分析与发展前景预测

    出版商&#xff1a;贝哲斯咨询 获取报告样本&#xff1a; 企业竞争态势 该报告涉及的主要国际市场参与者有Machpie、Amul、Hershey、Mapro、Eurofrutta、Bdfoods、Hermansfoods、Felbro、Atkinsandpotts、Tracklements等。这些参与者的市场份额、收入、公司概况和SWOT分析都包…...

    2024/5/5 14:11:27
  11. 算1 - n的阶乘和末6位(超详细)

    这里需要一点数学知识&#xff1a;要计算只包含加法, 减法和乘法的整数表达式除以正整数n 的余数, 可以在每步计算之后对n取余, 结果不变. 神马意思呢这句话&#xff1f; 就以本题为栗子&#xff0c;计算&#xff08;1!2!3!...n!&#xff09;%1000000 注意是每步计算之后对…...

    2024/4/13 23:08:34
  12. 2022年全球市场机械泵密封总体规模、主要生产商、主要地区、产品和应用细分研究报告

    本文研究全球市场、主要地区和主要国家机械泵密封的销量、销售收入等&#xff0c;同时也重点分析全球范围内主要厂商&#xff08;品牌&#xff09;竞争态势&#xff0c;机械泵密封销量、价格、收入和市场份额等。针对过去五年&#xff08;2017-2021&#xff09;年的历史情况&am…...

    2024/4/20 13:12:15
  13. leetcode-884：两句话中的不常见单词

    leetcode-884&#xff1a;两句话中的不常见单词题目解题方法一&#xff1a;哈希map题目 题目链接 句子 是一串由空格分隔的单词。每个 单词 仅由小写字母组成。 如果某个单词在其中一个句子中恰好出现一次&#xff0c;在另一个句子中却 没有出现 &#xff0c;那么这个单词就是…...

    2024/4/19 14:49:09
  14. 硬质PVC门窗行业研究及十四五规划分析报告

    2022-2028全球及中国硬质PVC门窗行业研究及十四五规划分析报告 2021年全球硬质PVC门窗市场规模大约为1182亿元&#xff08;人民币&#xff09;&#xff0c;预计2028年将达到1748亿元&#xff0c;2022-2028期间年复合增长率&#xff08;CAGR&#xff09;为8.3%。未来几年&#x…...

    2024/4/17 4:44:42
  15. 中国碳化硅喷嘴市场趋势报告、技术动态创新及市场预测

    【出版商】贝哲斯咨询 【免费目录下载】碳化硅喷嘴是由一种新陶瓷材料&#xff08;碳化硅&#xff09;制成的喷嘴&#xff0c;主要应用于电厂脱硫。喷嘴的类型主要涵盖螺旋实心锥喷嘴和涡流空心锥喷嘴。碳化硅喷嘴由新陶瓷材料制成&#xff0c;具有耐高温、抗氧化、高强度、耐…...

    2024/4/7 18:43:44
  16. 【踔厉奋发，笃行不怠】中创算力召开2021年终工作会议

    2021年终会议数据计算存储创新 不忘初心&#xff0c;逐梦远行向上而生&#xff0c;披荆斩棘—中创董事长新春寄语 2022年1月27日&#xff0c;中创算力年终工作会议在正商国际广场举行。全体中创员工齐聚一堂&#xff0c;我们带着这一年的收获&#xff0c;回首实干与荣誉并存的2…...

    2024/4/13 23:08:49
  17. xlua增加扩展c/c++库方法

    xlua增加扩展c/c库方法 xlua官方提供了一个扩展库文档&#xff0c;如果你看了还是遇到些问题&#xff0c;可以参考这篇文档。 xlua官方扩展文档&#xff1a; https://github.com/Tencent/xLua/blob/master/Assets/XLua/Doc/XLua%E5%A2%9E%E5%8A%A0%E5%88%A0%E9%99%A4%E7%AC%…...

    2024/4/17 4:46:12
  18. Android-面试官：简述一下-View-的绘制流程，这个都答不出来还想进大厂

    mContentParent.removeAllViews(); } if (hasFeature(FEATURE_CONTENT_TRANSITIONS)) { … } else { //将contentView加载到DecorVoew当中 mLayoutInflater.inflate(layoutResID, mContentParent); } … } private void installDecor() { … if (mDecor null) { //实例化Dec…...

    2024/4/13 23:09:39
  19. 硬管耳内镜行业研究及十四五规划分析报告

    2022-2028全球及中国硬管耳内镜行业研究及十四五规划分析报告 2021年全球硬管耳内镜市场规模大约为224亿元&#xff08;人民币&#xff09;&#xff0c;预计2028年将达到354亿元&#xff0c;2022-2028期间年复合增长率&#xff08;CAGR&#xff09;为6.7%。未来几年&#xff0c…...

    2024/4/7 18:43:40
  20. 什么是视距传播（LOS propagation）及如何验证微波链路是否具有清晰的视线

    摘要&#xff1a;本文介绍什么是视距传播&#xff0c;视距传播的分类及应用&#xff0c;地表障碍物对微波中继通信的影响&#xff0c;为什么以及如何验证微波链路是否具有清晰的视线。 关键词&#xff1a;视距传播、LOS验证、微波通信、地面微波中继通信、菲涅尔区 1、什么是视…...

    2024/4/5 3:40:25

最新文章

  1. 机器学习Sklean基础教程

    Scikit-learn&#xff08;也称为 sklearn&#xff09;是一个使用 python 语言的机器学习模块&#xff0c;内置了大量的监督和无监督学习算法&#xff0c;主要用于数据挖掘和数据分析。 以下是一个简单关于如何使用 sklearn 进行机器学习的指导&#xff1a; 安装: 首先&#…...

    2024/5/6 11:32:10
  2. 梯度消失和梯度爆炸的一些处理方法

    在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言&#xff0c;在此感激不尽。 权重和梯度的更新公式如下&#xff1a; w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...

    2024/5/6 9:38:23
  3. 2024认证杯数学建模B题思路模型代码

    目录 2024认证杯数学建模B题思路模型代码:4.11开赛后第一时间更新&#xff0c;获取见文末名片 第十三届“认证杯”数学中国数学建模比赛赛后体会 2024认证杯数学建模B题思路模型代码:4.11开赛后第一时间更新&#xff0c;获取见文末名片 第十三届“认证杯”数学中国数学建模比…...

    2024/5/6 8:43:07
  4. PostCss：详尽指南之安装和使用

    引言 在现代前端开发中&#xff0c;CSS预处理器如Sass、Less等已经成为提升开发效率、增强代码可维护性的重要工具。然而&#xff0c;随着Web技术的发展&#xff0c;CSS的功能也在不断扩展&#xff0c;一些新的CSS语法&#xff08;如变量、自定义属性、CSS Grid等&#xff09;以…...

    2024/5/5 10:23:36
  5. ArcGIS10.8保姆式安装教程

    ArcGIS 10.8是一款非常强大的地理信息系统软件&#xff0c;用于创建、管理、分析和可视化地理数据。以下是ArcGIS 10.8的详细安装教程&#xff1a; 确保系统满足安装要求 在开始安装之前&#xff0c;请确保您的计算机满足以下系统要求&#xff1a; 操作系统&#xff1a;Windo…...

    2024/5/5 8:36:10
  6. 【外汇早评】美通胀数据走低，美元调整

    原标题：【外汇早评】美通胀数据走低，美元调整昨日美国方面公布了新一期的核心PCE物价指数数据，同比增长1.6%，低于前值和预期值的1.7%，距离美联储的通胀目标2%继续走低，通胀压力较低，且此前美国一季度GDP初值中的消费部分下滑明显，因此市场对美联储后续更可能降息的政策…...

    2024/5/4 23:54:56
  7. 【原油贵金属周评】原油多头拥挤，价格调整

    原标题：【原油贵金属周评】原油多头拥挤，价格调整本周国际劳动节，我们喜迎四天假期，但是整个金融市场确实流动性充沛，大事频发，各个商品波动剧烈。美国方面，在本周四凌晨公布5月份的利率决议和新闻发布会，维持联邦基金利率在2.25%-2.50%不变，符合市场预期。同时美联储…...

    2024/5/4 23:54:56
  8. 【外汇周评】靓丽非农不及疲软通胀影响

    原标题：【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五，美国方面公布了新一期的非农就业数据，大幅好于前值和预期，新增就业重新回到20万以上。具体数据： 美国4月非农就业人口变动 26.3万人，预期 19万人，前值 19.6万人。 美国4月失业率 3.6%，预期 3.8%，前值 3…...

    2024/5/4 23:54:56
  9. 【原油贵金属早评】库存继续增加，油价收跌

    原标题：【原油贵金属早评】库存继续增加，油价收跌周三清晨公布美国当周API原油库存数据，上周原油库存增加281万桶至4.692亿桶，增幅超过预期的74.4万桶。且有消息人士称，沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油，印度炼油商预计将每日获得至多20万桶的额外原油供…...

    2024/5/6 9:21:00
  10. 【外汇早评】日本央行会议纪要不改日元强势

    原标题：【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升，避险资金回流日元有关，也与前一段时间的美日贸易谈判给日本缓冲期，日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策，但这符…...

    2024/5/4 23:54:56
  11. 【原油贵金属早评】欧佩克稳定市场，填补伊朗问题的影响

    原标题：【原油贵金属早评】欧佩克稳定市场，填补伊朗问题的影响近日伊朗局势升温，导致市场担忧影响原油供给，油价试图反弹。此时OPEC表态稳定市场。据消息人士透露，沙特6月石油出口料将低于700万桶/日，沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”，沙特将满…...

    2024/5/4 23:55:05
  12. 【外汇早评】美欲与伊朗重谈协议

    原标题：【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议，昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告，伊朗外长昨日回应称，欧洲国家履行它们的义务，伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...

    2024/5/4 23:54:56
  13. 【原油贵金属早评】波动率飙升，市场情绪动荡

    原标题：【原油贵金属早评】波动率飙升，市场情绪动荡因中美贸易谈判不安情绪影响，金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际，美国按照既定计划向中国2000亿商品征收25%的关税，市场情绪有所平复，已经开始接受这一事实。虽然波动率-恐慌指数VI…...

    2024/5/4 23:55:16
  14. 【原油贵金属周评】伊朗局势升温，黄金多头跃跃欲试

    原标题：【原油贵金属周评】伊朗局势升温，黄金多头跃跃欲试美国和伊朗的局势继续升温，市场风险情绪上升，避险黄金有向上突破阻力的迹象。原油方面稍显平稳，近期美国和OPEC加大供给及市场需求回落的影响，伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级，美国对中…...

    2024/5/4 23:54:56
  15. 【原油贵金属早评】市场情绪继续恶化，黄金上破

    原标题：【原油贵金属早评】市场情绪继续恶化，黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动，人民币汇率出现大幅的贬值动能，金融市场受到非常明显的冲击。尤其是波动率起来之后，对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势，这…...

    2024/5/6 1:40:42
  16. 【外汇早评】美伊僵持，风险情绪继续升温

    原标题：【外汇早评】美伊僵持，风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件，导致波斯湾局势进一步恶化，市场担忧美伊可能会出现摩擦生火，避险品种获得支撑，黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日，四艘商船在阿联酋领海附近的阿曼湾、…...

    2024/5/4 23:54:56
  17. 【原油贵金属早评】贸易冲突导致需求低迷，油价弱势

    原标题：【原油贵金属早评】贸易冲突导致需求低迷，油价弱势近日虽然伊朗局势升温，中东地区几起油船被袭击事件影响，但油价并未走高，而是出于调整结构中。由于市场预期局势失控的可能性较低，而中美贸易问题导致的全球经济衰退风险更大，需求会持续低迷，因此油价调整压力较…...

    2024/5/4 23:55:17
  18. 氧生福地 玩美北湖（上）——为时光守候两千年

    原标题：氧生福地 玩美北湖（上）——为时光守候两千年一次说走就走的旅行，只有一张高铁票的距离～ 所以，湖南郴州，我来了～ 从广州南站出发，一个半小时就到达郴州西站了。在动车上，同时改票的南风兄和我居然被分到了一个车厢，所以一路非常愉快地聊了过来。 挺好，最起…...

    2024/5/4 23:55:06
  19. 氧生福地 玩美北湖（中）——永春梯田里的美与鲜

    原标题：氧生福地 玩美北湖（中）——永春梯田里的美与鲜一觉醒来，因为大家太爱“美”照，在柳毅山庄去寻找龙女而错过了早餐时间。近十点，向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”，到郴州必吃的美食之一。 哇塞！那个味美香甜…...

    2024/5/4 23:54:56
  20. 氧生福地 玩美北湖（下）——奔跑吧骚年！

    原标题：氧生福地 玩美北湖（下）——奔跑吧骚年！让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...

    2024/5/4 23:55:06
  21. 扒开伪装医用面膜，翻六倍价格宰客，小姐姐注意了！

    原标题：扒开伪装医用面膜，翻六倍价格宰客，小姐姐注意了！扒开伪装医用面膜，翻六倍价格宰客！当行业里的某一品项火爆了，就会有很多商家蹭热度，装逼忽悠，最近火爆朋友圈的医用面膜，被沾上了污点，到底怎么回事呢？ “比普通面膜安全、效果好！痘痘、痘印、敏感肌都能用…...

    2024/5/5 8:13:33
  22. 「发现」铁皮石斛仙草之神奇功效用于医用面膜

    原标题：「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势： 1、铁皮石斛：自唐宋以来，一直被列为皇室贡品，铁皮石斛生于海拔1600米的悬崖峭壁之上，繁殖力差，产量极低，所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...

    2024/5/4 23:55:16
  23. 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者

    原标题：丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司，专注美业21年，其旗下品牌： 「圣茵美」私密荷尔蒙抗衰，产后修复 「圣仪轩」私密荷尔蒙抗衰，产后修复 「花茵莳」私密荷尔蒙抗衰，产后修复 「丽彦妆」专注医学护…...

    2024/5/4 23:54:58
  24. 广州械字号面膜生产厂家OEM/ODM4项须知！

    原标题：广州械字号面膜生产厂家OEM/ODM4项须知！广州械字号面膜生产厂家OEM/ODM流程及注意事项解读： 械字号医用面膜，其实在我国并没有严格的定义，通常我们说的医美面膜指的应该是一种「医用敷料」，也就是说，医用面膜其实算作「医疗器械」的一种，又称「医用冷敷贴」。 …...

    2024/5/4 23:55:01
  25. 械字号医用眼膜缓解用眼过度到底有无作用？

    原标题：械字号医用眼膜缓解用眼过度到底有无作用？医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料，含70%以上的水分。体表皮肤温度传导到本产品的凝胶层，热量被凝胶内水分子吸收，通过水分的蒸发带走大量的热量，可迅速地降低体表皮肤局部温度，减轻局部皮肤的灼…...

    2024/5/4 23:54:56
  26. 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示，配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...

    解析如下&#xff1a;1、长按电脑电源键直至关机&#xff0c;然后再按一次电源健重启电脑&#xff0c;按F8健进入安全模式2、安全模式下进入Windows系统桌面后&#xff0c;按住“winR”打开运行窗口&#xff0c;输入“services.msc”打开服务设置3、在服务界面&#xff0c;选中…...

    2022/11/19 21:17:18
  27. 错误使用 reshape要执行 RESHAPE，请勿更改元素数目。

    %读入6幅图像&#xff08;每一幅图像的大小是564*564&#xff09; f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...

    2022/11/19 21:17:16
  28. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...

    win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面&#xff0c;在等待界面中我们需要等待操作结束才能关机&#xff0c;虽然这比较麻烦&#xff0c;但是对系统进行配置和升级…...

    2022/11/19 21:17:15
  29. 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...

    有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows&#xff0c;请勿关闭计算机”的提示&#xff0c;要过很久才能进入系统&#xff0c;有的用户甚至几个小时也无法进入&#xff0c;下面就教大家这个问题的解决方法。第一种方法&#xff1a;我们首先在左下角的“开始…...

    2022/11/19 21:17:14
  30. win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...

    置信有很多用户都跟小编一样遇到过这样的问题&#xff0c;电脑时发现开机屏幕显现“正在配置Windows Update&#xff0c;请勿关机”(如下图所示)&#xff0c;而且还需求等大约5分钟才干进入系统。这是怎样回事呢&#xff1f;一切都是正常操作的&#xff0c;为什么开时机呈现“正…...

    2022/11/19 21:17:13
  31. 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...

    Win7系统开机启动时总是出现“配置Windows请勿关机”的提示&#xff0c;没过几秒后电脑自动重启&#xff0c;每次开机都这样无法进入系统&#xff0c;此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一&#xff1a;开机按下F8&#xff0c;在出现的Windows高级启动选…...

    2022/11/19 21:17:12
  32. 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...

    有不少windows10系统用户反映说碰到这样一个情况&#xff0c;就是电脑提示正在准备windows请勿关闭计算机&#xff0c;碰到这样的问题该怎么解决呢&#xff0c;现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法&#xff1a;1、2、依次…...

    2022/11/19 21:17:11
  33. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...

    今天和大家分享一下win7系统重装了Win7旗舰版系统后&#xff0c;每次关机的时候桌面上都会显示一个“配置Windows Update的界面&#xff0c;提示请勿关闭计算机”&#xff0c;每次停留好几分钟才能正常关机&#xff0c;导致什么情况引起的呢&#xff1f;出现配置Windows Update…...

    2022/11/19 21:17:10
  34. 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...

    只能是等着&#xff0c;别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚&#xff0c;只能是考虑备份数据后重装系统了。解决来方案一&#xff1a;管理员运行cmd&#xff1a;net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...

    2022/11/19 21:17:09
  35. 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办？

    原标题&#xff1a;电脑提示“配置Windows Update请勿关闭计算机”怎么办&#xff1f;win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢&#xff1f;一般的方…...

    2022/11/19 21:17:08
  36. 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ，然后等了一晚上也没有关掉。现在电脑无法正常关机...

    关机提示 windows7 正在配置windows 请勿关闭计算机 &#xff0c;然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;关机提示 windows7 正在配…...

    2022/11/19 21:17:05
  37. 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...

    钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间：2020-04-20 22:24:19　浏览次数：729次 区域： 南阳 > 卧龙 列举网提醒您：为保障您的权益，请不要提前支付任何费用！ 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于：钉钉，外勤365，红圈通，企业微信和…...

    2022/11/19 21:17:05
  38. 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”，长时间没反应，无法进入系统的解决方案...

    前几天班里有位学生电脑(windows 7系统)出问题了&#xff0c;具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面&#xff0c;长时间没反应&#xff0c;无法进入系统。这个问题原来帮其他同学也解决过&#xff0c;网上搜了不少资料&#x…...

    2022/11/19 21:17:04
  39. 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办？...

    本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法&#xff0c;并在最后教给你1种保护系统安全的好方法&#xff0c;一起来看看&#xff01;电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中&#xff0c;添加了1个新功能在“磁…...

    2022/11/19 21:17:03
  40. 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败，正在还原更改，请勿关闭计算机怎么办...

    许多用户在长期不使用电脑的时候&#xff0c;开启电脑发现电脑显示&#xff1a;配置windows更新失败&#xff0c;正在还原更改&#xff0c;请勿关闭计算机。。.这要怎么办呢&#xff1f;下面小编就带着大家一起看看吧&#xff01;如果能够正常进入系统&#xff0c;建议您暂时移…...

    2022/11/19 21:17:02
  41. 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机，电脑开机后一直显示以...

    配置windows update失败 还原更改 请勿关闭计算机&#xff0c;电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;配置windows update失败 还原更改 请勿关闭计算机&#x…...

    2022/11/19 21:17:01
  42. 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...

    不知道大家有没有遇到过这样的一个问题&#xff0c;就是我们的win7系统在关机的时候&#xff0c;总是喜欢显示“准备配置windows&#xff0c;请勿关机”这样的一个页面&#xff0c;没有什么大碍&#xff0c;但是如果一直等着的话就要两个小时甚至更久都关不了机&#xff0c;非常…...

    2022/11/19 21:17:00
  43. 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...

    当电脑出现正在准备配置windows请勿关闭计算机时&#xff0c;一般是您正对windows进行升级&#xff0c;但是这个要是长时间没有反应&#xff0c;我们不能再傻等下去了。可能是电脑出了别的问题了&#xff0c;来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...

    2022/11/19 21:16:59
  44. 配置失败还原请勿关闭计算机,配置Windows Update失败，还原更改请勿关闭计算机...

    我们使用电脑的过程中有时会遇到这种情况&#xff0c;当我们打开电脑之后&#xff0c;发现一直停留在一个界面&#xff1a;“配置Windows Update失败&#xff0c;还原更改请勿关闭计算机”&#xff0c;等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢&#xff0…...

    2022/11/19 21:16:58
  45. 如何在iPhone上关闭“请勿打扰”

    Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...

    2022/11/19 21:16:57