第三天：
1、选择器
1.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link{
color: pink;
}
a:visited{
color: red;
}
/* 鼠标悬停 */
a:hover{
/* 鼠标样式 */
cursor:cell;
font-size: 40px;
}
a:hover+div{
display: none;
}
</style>
</head>
<body>
<a href="#">去百度</a>
</body>
</html>2.结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=ul, initial-scale=1.0">
<title>Document</title>
<style>
/* 结构伪类选择器:
父元素 子元素：nth-child(n) :父元素第n个子元素
*/
ul li:first-child{
background-color: pink;
}
ul li:last-child{
background-color: green;
}
ul li:nth-child(3){
background-color: blue;
}
ul li:nth-of-type(4){
background-color: chartreuse;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>3.伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li::before{
content: "~";
}
ul li::after{
content: url(../images/1.gif);
}
/* input::placeholder 表单提示词 */
input::placeholder{
color:red;
}
/* selection 选中时 */
ul li:nth-child(4)::selection{
color: pink;
}
</style>
</head>
<body>
<input type="text" name="" id="" placeholder="lakjdslfkjaksdl">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>2、文本相关样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 200px;
background-color: pink;
/* text-indent: 2em; */
/* 文字水平对齐方式 */
text-align: center;
/* overflow:auto */
/* 行高 单行文本垂直居中 行高=元素高度 */
line-height: 20px;
}
a{
/* 文本装饰 */
color: pink;
text-decoration: none;
/* text-decoration: line-through; */
/* text-decoration: underline; */
}
</style>
</head>
<body>
<div>蔡徐坤（KUN），1998年8月2日出生于浙江省温州市，户籍湖南吉首 [137] ，中国内地男歌手、演员、原创音乐制作人 [1] 、MV导演 [105] 。
2012年8月，蔡徐坤参演的偶像剧《童话二分之一》播出，由此开始步入大众视线 [2] 。2018年1月，参加竞演类综艺节目《偶像练习生》并以总票数第一正式出道，成为限定男团NINE PERCENT队长 [3] ；8月，发行首张EP《1》 [4] ，获2018亚洲新歌榜年度盛典最受欢迎潜力男歌手奖 [5] ；随后，他还发行原创单曲《Wait Wait Wait》，并携手格莱美奖最佳MV获奖导演戴夫·迈尔斯打造歌曲MV。2019年1月，被授予“中牙友好大使暨中牙杰出青年领袖人物”称号 [8] ；3月，成功开启横跨三个国家、六座城市的海外公演《ONE》 [11-12]；7月，发行首张数字专辑《YOUNG》 [107] ；10月，携手中国儿童少年基金会共同设立“葵计划爱心基金”。
2020年3月，加盟《青春有你第二季》担任青春制作人代表 [15] ；4月9日，原创公益歌曲《Home》全网上线 [17] ；随后，加盟户外竞技真人秀《奔跑吧第四季》担任常驻MC [16] ；7月，获第27届东方风云榜最佳男歌手等三个奖项。2021年1月，获得第二届TMEA腾讯音乐娱乐盛典年度最具影响力唱作歌手和年度最具号召力歌手两个奖项，单曲《情人》获得年度十大金曲奖；4月13日，发行个人创作专辑《迷》 [103] ；7月17日，于北京凯迪拉克中心举办首场个人巡回演唱会，同年获第三届TMEA腾讯音乐娱乐盛典年度最具影响力制作人等多项荣誉 [48] 。
2023年1月24日，参加《奋进新征程——2023中国网络视听年度盛典》，演唱歌曲《默片》 [156] 。
</div>
<a href="https://www.baidu.com">去百度</a>
</body>
</html>3、goods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.goods{
width: 234px;
height: 300px;
/* background-color: pink; */
text-align: center;
}
.goods img{
width: 160px;
height: 160px;
}
.goods h5{
font-size: 14px;
font-weight: 400;
}
.goods p{
font-size: 12px;
color: #b0b0b0;
}
.goods span:nth-of-type(1){
font-size: 14px;
color: orange;
}
.goods span:nth-of-type(2){
color: #b0b0b0;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="goods">
<img src="../images/1.gif" alt="">
<h5>dog</h5>
<p>年度最炫修勾</p>
<span>999元</span> <span>500元</span>
</div>
</body>
</html>4、list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* cssjuyou层叠性，后面的会覆盖前面的 */
ul li {
height: 30px;
list-style: none;
list-style: circle;
}
</style>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
<li>我是第6个li</li>
<li>我是第7个li</li>
</ul>
</body>
</html>5、元素显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* display:none; 隐藏元素，脱离文档流 */
display: none;
/* display: inline-block; 将元素转换为行内块元素 */
/* display: inline; 行内元素*/
width: 300px;
height: 300px;
background-color: pink;
}
/* 行内元素无法设置宽、高 转换为行内块元素 */
span {
display: inline-block;
/* display: block 块元素; */
width: 300px;
height: 300px;
background-color: blue;
}
a{
display: inline-block;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<a href="#">彻底</a><a href="#">彻底</a><a href="#">彻底</a><a href="#">彻底</a>
<div class="box">11111</div>
<div class="box">22222</div>
<span>lakjdflkajsd</span>
</body>
</html>6、背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 4000px;
background-color: pink;
background-image: url(../images/3.gif);
background-repeat: no-repeat;
/* background-attachment: fixed; */
background-position: center center;
background:fixed url(../images/3.gif) no-repeat;
}
</style>
</head>
<body>
</body>
</html>7、边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/* border-radius: 100%; 边框弧度 */
/* border-width: 2px; 边框宽度 */
/* border-style: dashed; 边框样式 */
/* border-color: black; 边框颜色 */
border: 4px solid black;
/* border-radius: 10%; */
border-top-left-radius: 40%;
}
</style>
</head>
<body>
<div>
我是一个盒子
</div>
</body>
</html>合并相邻边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
/* 合并相邻边框 */
border-collapse: collapse;
}
td{
border: 5px solid red;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr >
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
</body>
</html>13、阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/* box-shadow: 20px 20px 10px 10px black; */
}
p{
text-shadow: red 0 -1px;
}
</style>
</head>
<body>
<div>
111222333
</div>
<p>
woshi wenzi
</p>
</body>
</html>14、轮廓线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type="text"]{
outline: none;
}
</style>
</head>
<body>
<input type="text" name="" id="">
<input type="password" name="" id="">
</body>
</html>15、防拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea{
/* 防止文本拖拽 */
resize: none;
/* vertical-align改变与文字的对齐方式 */
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
}
</style>
</head>
<body>
<span>请输入个人介绍:</span>
<textarea name="wugui" id="" cols="30" rows="10"></textarea>
</body>
</html>16、隐藏元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
}
.box1{
/* display: none; 脱离文档流,原来的位置不再保留 */
/* display: none; */
/* visibility: hidden; 元素隐藏,位置保留 */
/* visibility: hidden; */
/* opacity 可见度 */
opacity: 0;
background-color: pink;
}
.box2{
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>17、定位
1.绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grandfather{
width: 1200px;
height: 1200px;
background-color: aquamarine;
}
.father{
position: relative;
width: 600px;
height: 600px;
background-color: pink;
margin: 400px;
}
.son{
/* position:absolute; 绝对定位,不保留原来位置
子绝父相 父亲没有相对定位,继续向上找,
谁有相对定位,以谁作为参照移动
如果都没有找到,则相对浏览器进行移动*/
position:absolute;
top: 600px;
left: 500px;
width: 100px;
height: 100px;
background-color: aqua;
}
.son2{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son">1</div>
<div class="son2">2</div>
</div>
</div>
</body>
</html>2.固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 4000px;
}
div{
/* 固定定位:相对于可视区域固定 */
position: fixed;
right: 40px;
top: 50%;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
小妲己
</div>
</body>
</html>3.粘性定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 4000px;
}
.one{
position:sticky;
top:10px;
background-color: pink;
}
</style>
</head>
<body>
<p>
蔡徐坤（KUN），1998年8月2日出生于浙江省温州市，户籍湖南吉首 [137] ，中国内地男歌手、演员、原创音乐制作人 [1] 、MV导演 [105] 。
2012年8月，蔡徐坤参演的偶像剧《童话二分之一》播出，由此开始步入大众视线 [2] 。2018年1月，参加竞演类综艺节目《偶像练习生》并以总票数第一正式出道，成为限定男团NINE PERCENT队长 [3] ；8月，发行首张EP《1》 [4] ，获2018亚洲新歌榜年度盛典最受欢迎潜力男歌手奖 [5] ；随后，他还发行原创单曲《Wait Wait Wait》，并携手格莱美奖最佳MV获奖导演戴夫·迈尔斯打造歌曲MV。2019年1月，被授予“中牙友好大使暨中牙杰出青年领袖人物”称号 [8] ；3月，成功开启横跨三个国家、六座城市的海外公演《ONE》 [11-12]；7月，发行首张数字专辑《YOUNG》 [107] ；10月，携手中国儿童少年基金会共同设立“葵计划爱心基金”。
2020年3月，加盟《青春有你第二季》担任青春制作人代表 [15] ；4月9日，原创公益歌曲《Home》全网上线 [17] ；随后，加盟户外竞技真人秀《奔跑吧第四季》担任常驻MC [16] ；7月，获第27届东方风云榜最佳男歌手等三个奖项。2021年1月，获得第二届TMEA腾讯音乐娱乐盛典年度最具影响力唱作歌手和年度最具号召力歌手两个奖项，单曲《情人》获得年度十大金曲奖；4月13日，发行个人创作专辑《迷》 [103] ；7月17日，于北京凯迪拉克中心举办首场个人巡回演唱会，同年获第三届TMEA腾讯音乐娱乐盛典年度最具影响力制作人等多项荣誉 [48] 。
2023年1月24日,参加《奋进新征程——2023中国网络视听年度盛典》，演唱歌曲《默片》 [156] 。
</p>
<p>
蔡徐坤（KUN），1998年8月2日出生于浙江省温州市，户籍湖南吉首 [137] ，中国内地男歌手、演员、原创音乐制作人 [1] 、MV导演 [105] 。
2012年8月，蔡徐坤参演的偶像剧《童话二分之一》播出，由此开始步入大众视线 [2] 。2018年1月，参加竞演类综艺节目《偶像练习生》并以总票数第一正式出道，成为限定男团NINE PERCENT队长 [3] ；8月，发行首张EP《1》 [4] ，获2018亚洲新歌榜年度盛典最受欢迎潜力男歌手奖 [5] ；随后，他还发行原创单曲《Wait Wait Wait》，并携手格莱美奖最佳MV获奖导演戴夫·迈尔斯打造歌曲MV。2019年1月，被授予“中牙友好大使暨中牙杰出青年领袖人物”称号 [8] ；3月，成功开启横跨三个国家、六座城市的海外公演《ONE》 [11-12]；7月，发行首张数字专辑《YOUNG》 [107] ；10月，携手中国儿童少年基金会共同设立“葵计划爱心基金”。
2020年3月，加盟《青春有你第二季》担任青春制作人代表 [15] ；4月9日，原创公益歌曲《Home》全网上线 [17] ；随后，加盟户外竞技真人秀《奔跑吧第四季》担任常驻MC [16] ；7月，获第27届东方风云榜最佳男歌手等三个奖项。2021年1月，获得第二届TMEA腾讯音乐娱乐盛典年度最具影响力唱作歌手和年度最具号召力歌手两个奖项，单曲《情人》获得年度十大金曲奖；4月13日，发行个人创作专辑《迷》 [103] ；7月17日，于北京凯迪拉克中心举办首场个人巡回演唱会，同年获第三届TMEA腾讯音乐娱乐盛典年度最具影响力制作人等多项荣誉 [48] 。
2023年1月24日,参加《奋进新征程——2023中国网络视听年度盛典》，演唱歌曲《默片》 [156] 。
</p>
<p class="one">
蔡徐坤（KUN），1998年8月2日出生于浙江省温州市，户籍湖南吉首 [137] ，中国内地男歌手、演员、原创音乐制作人 [1] 、MV导演 [105] 。
2012年8月，蔡徐坤参演的偶像剧《童话二分之一》播出，由此开始步入大众视线 [2] 。2018年1月，参加竞演类综艺节目《偶像练习生》并以总票数第一正式出道，成为限定男团NINE PERCENT队长 [3] ；8月，发行首张EP《1》 [4] ，获2018亚洲新歌榜年度盛典最受欢迎潜力男歌手奖 [5] ；随后，他还发行原创单曲《Wait Wait Wait》，并携手格莱美奖最佳MV获奖导演戴夫·迈尔斯打造歌曲MV。2019年1月，被授予“中牙友好大使暨中牙杰出青年领袖人物”称号 [8] ；3月，成功开启横跨三个国家、六座城市的海外公演《ONE》 [11-12]；7月，发行首张数字专辑《YOUNG》 [107] ；10月，携手中国儿童少年基金会共同设立“葵计划爱心基金”。
2020年3月，加盟《青春有你第二季》担任青春制作人代表 [15] ；4月9日，原创公益歌曲《Home》全网上线 [17] ；随后，加盟户外竞技真人秀《奔跑吧第四季》担任常驻MC [16] ；7月，获第27届东方风云榜最佳男歌手等三个奖项。2021年1月，获得第二届TMEA腾讯音乐娱乐盛典年度最具影响力唱作歌手和年度最具号召力歌手两个奖项，单曲《情人》获得年度十大金曲奖；4月13日，发行个人创作专辑《迷》 [103] ；7月17日，于北京凯迪拉克中心举办首场个人巡回演唱会，同年获第三届TMEA腾讯音乐娱乐盛典年度最具影响力制作人等多项荣誉 [48] 。
2023年1月24日,参加《奋进新征程——2023中国网络视听年度盛典》，演唱歌曲《默片》 [156] 。
</p>
<p>
蔡徐坤（KUN），1998年8月2日出生于浙江省温州市，户籍湖南吉首 [137] ，中国内地男歌手、演员、原创音乐制作人 [1] 、MV导演 [105] 。
2012年8月，蔡徐坤参演的偶像剧《童话二分之一》播出，由此开始步入大众视线 [2] 。2018年1月，参加竞演类综艺节目《偶像练习生》并以总票数第一正式出道，成为限定男团NINE PERCENT队长 [3] ；8月，发行首张EP《1》 [4] ，获2018亚洲新歌榜年度盛典最受欢迎潜力男歌手奖 [5] ；随后，他还发行原创单曲《Wait Wait Wait》，并携手格莱美奖最佳MV获奖导演戴夫·迈尔斯打造歌曲MV。2019年1月，被授予“中牙友好大使暨中牙杰出青年领袖人物”称号 [8] ；3月，成功开启横跨三个国家、六座城市的海外公演《ONE》 [11-12]；7月，发行首张数字专辑《YOUNG》 [107] ；10月，携手中国儿童少年基金会共同设立“葵计划爱心基金”。
2020年3月，加盟《青春有你第二季》担任青春制作人代表 [15] ；4月9日，原创公益歌曲《Home》全网上线 [17] ；随后，加盟户外竞技真人秀《奔跑吧第四季》担任常驻MC [16] ；7月，获第27届东方风云榜最佳男歌手等三个奖项。2021年1月，获得第二届TMEA腾讯音乐娱乐盛典年度最具影响力唱作歌手和年度最具号召力歌手两个奖项，单曲《情人》获得年度十大金曲奖；4月13日，发行个人创作专辑《迷》 [103] ；7月17日，于北京凯迪拉克中心举办首场个人巡回演唱会，同年获第三届TMEA腾讯音乐娱乐盛典年度最具影响力制作人等多项荣誉 [48] 。
2023年1月24日,参加《奋进新征程——2023中国网络视听年度盛典》，演唱歌曲《默片》 [156] 。
</p>
</body>
</html>第四天：
1、盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/* 内边距 */
padding-left: 4px;
border: 3px solid red;
}
</style>
</head>
<body>
<div>
蔡徐坤
</div>
</body>
</html>2、内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 600px;
height: 600px;
background-color: pink;
padding-top: 20px;
padding: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding: 30px 50px;
/* padding: 上下，左右 */
padding: 10px 60px 90px;
/* padding: 上，左右，下 */
padding: 10px 30px 60px 90px;
/* padding: 上，右，下，左 */
}
</style>
<body>
<div>
我是图图小淘气
</div>
</body>
</html>3、外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{
list-style: none;
background-color: pink;
margin-bottom: 30px;
}
span{
display: inline-block;
width: 50px;
background-color: pink;
margin-right: 5px;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
<span>1</span><span>2</span><span>3</span><span>4</span>
</body>
</html>4、外边距塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 800px;
height: 800px;
background-color: aquamarine;
/* border: 1px solid red; */
padding:5px
}
.son{
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 20px;
}
.son2{
margin-top: 10px;
}
.son3{
margin-top: 10px;
}
.son1{
margin-top: 300px;
}
/* margin塌陷问题
父元素的第一个子元素的margin-top值会被父元素抢走
解决方法：
1.给父元素添加边框
2.给父元素加一个padding值
3.overflow：hidden;-------偏方
*/
</style>
</head>
<body>
<div class="father">
<div class="son son1">1</div>
<div class="son son2">1</div>
<div class="son son3">1</div>
</div>
<span>jklajdlskfjlakjsdlkfjlkxzcjlvkjlaksdjflkj</span>
</body>
</html>5、文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 800px;
height: 800px;
background-color: pink;
overflow: hidden;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus quibusdam soluta ad eaque sint officia aperiam minima nihil quam? Aliquam quisquam porro nesciunt ipsam sapiente quasi quis unde rem eligendi.
Tempora atque iusto cum doloribus placeat. Eum iusto esse dignissimos eaque natus cumque magni tempora repellendus, obcaecati nemo est corrupti? Aperiam minus tempore quae reiciendis, aliquam aliquid tempora quod rem.
Optio eos maiores nesciunt error illo eius dolorem corporis neque cum mollitia odit qui inventore molestias voluptatem quasi nihil ipsam vitae eligendi sint, minus architecto corrupti. Quaerat dignissimos ex impedit?
Autem iure commodi hic tenetur consequuntur delectus repellendus temporibus minus in ratione, placeat esse beatae qui magni maiores praesentium cupiditate molestias ducimus cumque expedita a ipsam nisi, sed labore. Itaque.
Harum, repellendus odit ipsum earum sunt id veritatis totam sed ipsam? Dolorum modi aliquid ducimus quaerat quae cumque quam hic, corporis optio molestias odio earum libero minus quis tenetur aperiam!
Nesciunt recusandae deserunt, iusto consequuntur nisi reprehenderit ad alias earum saepe, possimus dolorum distinctio perferendis architecto itaque officia repellat sunt, ea aliquam quo sed quibusdam sequi. Nam debitis optio sunt.
Tempore, aliquid voluptatibus atque, dolorem sint corrupti dolorum, ipsum quae qui minus repellat expedita ea architecto amet recusandae voluptate aperiam id libero consequuntur voluptatum eligendi omnis possimus magnam alias! Voluptatem.
Exercitationem ad excepturi voluptatibus aut! Voluptates voluptatum eius, magnam enim ipsum quisquam, nemo autem, eum at laborum cum repudiandae animi cumque repellat incidunt ipsam! Neque et aperiam possimus quo voluptatibus.
Ea aut aliquam fugiat optio quae, culpa numquam sunt accusamus omnis qui porro magni molestias voluptate amet, vero atque nobis nesciunt eius! Sed ducimus tempora vitae, accusantium temporibus quaerat eveniet.
Unde perspiciatis placeat totam aliquid. Fugiat obcaecati delectus voluptatum animi ab sapiente dolore. Rem temporibus placeat quo molestiae, deserunt facere illum recusandae ut ab numquam itaque laborum architecto, nesciunt iusto?
Quos rem iusto delectus accusamus. Asperiores quae quibusdam mollitia, ab tempore quos, id ipsum incidunt excepturi voluptatibus beatae eveniet labore exercitationem pariatur laboriosam eius error assumenda adipisci illo quas? Fugiat!
Autem ipsa commodi doloribus explicabo qui obcaecati nulla, veritatis excepturi quibusdam dolor architecto error consequatur est nobis nostrum officiis quam debitis sit rerum ipsum labore quisquam repellendus magnam? Iusto, cupiditate.
Unde exercitationem non officia ut sint repellendus laborum doloribus quaerat voluptatibus iusto nam aliquid at eaque maxime, quam ratione ad porro consequatur nihil nulla commodi est quos! Voluptate, voluptatibus beatae?
Minima voluptate officiis, soluta sunt doloremque quisquam, sequi aliquid repellendus velit eveniet iusto! Consequuntur quas, atque alias aliquam iusto cupiditate inventore aliquid dolores ad id voluptatem consectetur ab deleniti delectus.
Nemo deleniti, aspernatur voluptates quibusdam libero nobis eveniet sint in asperiores commodi delectus distinctio molestiae veritatis. Earum temporibus obcaecati, incidunt mollitia fugiat dolore sint architecto veniam excepturi autem nobis rerum.
Ipsum aliquam doloremque sequi deserunt, provident molestias totam aut nostrum alias deleniti aspernatur dolores vitae delectus eveniet consequatur incidunt officiis nulla eligendi ducimus ad in? Nemo eius quia omnis deleniti!
Ullam iure numquam, porro nostrum incidunt magni excepturi eveniet nihil, eaque amet quisquam repudiandae perspiciatis, sed culpa? Alias dolores nihil laboriosam at obcaecati, esse molestias, exercitationem facere optio sint amet.
Atque dolor sit ab facere accusantium fugit nemo corporis odio totam repellat, asperiores unde deleniti dolore cum ut maxime nihil voluptatum? Neque ipsam maxime possimus accusamus earum eum et voluptatem!
Cupiditate, hic est nulla aliquid temporibus a explicabo! A minima non repellendus unde molestiae molestias recusandae debitis, impedit odio itaque at est animi ab sequi illo officiis qui voluptas deleniti!
Dolores minus, veniam accusantium odio quos molestias id molestiae iure dolore doloribus obcaecati sit illo unde nihil repellat modi quidem voluptas velit! Atque, perferendis? Voluptas asperiores perferendis quis blanditiis nisi!
Enim ratione rerum exercitationem consequatur ex sint quam sed ullam unde expedita qui dignissimos quibusdam vel culpa autem, necessitatibus libero atque maxime ad ipsa dolore et deserunt quasi in. Eius.
Quia consequatur illo explicabo beatae voluptatibus, facilis illum, reprehenderit ex enim omnis iusto amet labore id tenetur odio magni impedit voluptatum veniam quibusdam quaerat! Ad facere ea distinctio cupiditate vero.
Harum officiis nam, sint pariatur quia obcaecati, modi ratione, aliquam corrupti rerum voluptate dicta! Corrupti alias tempore, facere ullam inventore, ea iusto odio hic et distinctio, esse facilis quasi minima.
Molestiae, tempore tempora. Adipisci modi pariatur, praesentium hic blanditiis aut quos esse cum optio! Consequuntur, ipsam. Hic assumenda repellendus eos aliquid, facere suscipit accusantium sed non laudantium nesciunt blanditiis voluptatem.
Neque eum deserunt, consectetur odio illo culpa atque dicta accusantium, velit quisquam ipsum, minus totam obcaecati natus voluptas? Eveniet amet dolore praesentium labore mollitia consequuntur sed velit eum a perferendis.
Quo qui, architecto autem quod atque eum ratione id corrupti assumenda repellendus est quis omnis dolorum explicabo, doloribus numquam suscipit distinctio cumque ipsa amet molestiae inventore. In velit id ab!
Accusantium eos ab quod modi molestiae dolorum voluptatum quia animi consequuntur nisi ullam expedita veniam delectus eius quae voluptatibus harum nesciunt inventore illum cumque quasi, enim a. Ducimus, laborum fugit.
Nulla optio nostrum quisquam sit, dignissimos atque consectetur nisi laborum rerum obcaecati tenetur exercitationem hic autem repellat eaque aperiam! Repudiandae, praesentium repellat unde inventore ducimus dicta earum dolore optio ad.
Aliquam quibusdam sint assumenda unde provident ea quae laudantium deserunt quia, animi, nemo voluptate beatae amet? Iste saepe doloribus, sit eveniet laborum obcaecati? Sint aliquid porro harum dignissimos! Eveniet, cumque!
Nostrum vero ducimus esse perspiciatis sapiente eum nisi illum saepe voluptatibus dignissimos voluptas reiciendis veritatis id dolores at in odio maxime, omnis veniam! Quisquam ipsa quae blanditiis tenetur aspernatur accusantium!
Provident tempore nostrum omnis deserunt, ipsum molestiae blanditiis esse quasi. Dolorem possimus, maiores quas odit ullam magni voluptates dolores iusto saepe praesentium eius laborum ipsam sapiente eaque molestias corrupti quae.
Culpa qui alias maiores ab aut ipsum perspiciatis laudantium illo? Ab deserunt dicta veritatis maxime quos consequatur, voluptas officiis blanditiis aliquam voluptate consectetur debitis dignissimos cupiditate animi fuga repellat assumenda?
Veniam pariatur non voluptatibus distinctio libero itaque cupiditate quod, modi ipsam quia assumenda neque similique repellendus tempore laboriosam est natus culpa voluptas. Provident esse totam fuga voluptates tempore at amet.
Non totam quam autem quidem labore. Perspiciatis, mollitia. Quam ipsum temporibus saepe corrupti nisi laborum iusto ipsam, reprehenderit dolor quaerat officiis velit ut ullam adipisci nulla soluta deleniti optio perspiciatis?
Accusamus ut dolore eum molestiae id corrupti vero quis a? Explicabo rerum minima enim iusto, illum porro quaerat, modi eius beatae distinctio delectus! Incidunt necessitatibus officia deleniti neque perspiciatis perferendis.
Vel, accusamus harum! Omnis, fuga libero molestiae dolore quo veritatis vero nemo corrupti itaque incidunt, ea, nulla esse numquam distinctio quisquam quam facilis impedit fugit dolorem praesentium delectus quia et?
Ducimus tempore, at recusandae nesciunt tempora reprehenderit aperiam quis fugiat! Deserunt officiis, incidunt error, veniam veritatis hic iste eaque doloribus vel dolorem asperiores cumque commodi, aliquam ea libero sunt totam.
Magni exercitationem minima explicabo, quos culpa repudiandae. Pariatur esse reprehenderit est dignissimos omnis, ipsa eligendi reiciendis deserunt ducimus quas obcaecati explicabo ea dolorum aut labore exercitationem alias quia fugiat ipsum?
Odio provident numquam deleniti, ratione incidunt nulla nisi magni quas at culpa. Alias, eaque, rem amet labore saepe animi maxime placeat quod corrupti tenetur cupiditate ea perferendis qui consequatur molestiae?
Officia, repellat tempore nulla commodi illo laboriosam ea hic! Non praesentium quam odit facilis nihil. Facilis dolor nulla suscipit. Ea, ipsa veritatis nobis neque obcaecati incidunt veniam at recusandae enim!
Sequi id blanditiis quis repellendus nihil voluptatem iste maiores ratione obcaecati consequuntur? Vero tempora earum aliquam nobis velit veritatis saepe ad aperiam alias, minus reprehenderit illum suscipit architecto ab voluptatum.
Nulla eaque impedit voluptatibus dignissimos. Aperiam eaque totam voluptates tempora quaerat veniam dolorem. Voluptatibus maiores sunt soluta minus, eius earum reprehenderit rem, ipsa sed aspernatur velit. Voluptatem molestias esse commodi!
Accusantium reiciendis libero porro facilis aut natus, dicta dolorem, optio eveniet ea omnis. Porro adipisci, hic debitis minus voluptas nisi ad exercitationem. Animi vel omnis distinctio quidem blanditiis molestias ut?
Inventore eum illo cumque maxime id tenetur commodi facere impedit, similique officia fugit voluptatibus quod, eaque aspernatur sed! Dolorum harum commodi hic voluptatum obcaecati omnis quia suscipit architecto sit autem.
Vel animi vitae soluta aut explicabo minus beatae, labore est quis voluptate quidem enim quasi. Culpa amet consequuntur ullam voluptatum, illum distinctio temporibus sunt natus mollitia, est architecto unde porro.
Distinctio perferendis debitis quibusdam, quas iusto quisquam consequatur fuga assumenda placeat eos consequuntur eveniet culpa? Dolor saepe suscipit, amet sapiente unde quisquam possimus! Nostrum inventore molestiae, nihil adipisci porro dignissimos.
Aspernatur laboriosam officia eius cupiditate voluptate eveniet, delectus deserunt odit officiis magni mollitia voluptatibus, itaque, perspiciatis quo veritatis quod modi nam aliquam deleniti repellat voluptatem natus. Tenetur et autem mollitia.
In rem praesentium error assumenda, veritatis corrupti earum, nemo molestias accusamus sed adipisci ad explicabo temporibus repudiandae dolorem culpa recusandae nostrum sint asperiores dolor similique soluta reiciendis. Recusandae, quam quo!
Saepe odio voluptate dignissimos iusto soluta voluptatum tenetur expedita obcaecati, fugit, vitae cumque enim, quasi numquam nostrum consequatur voluptatem eligendi ipsum quo quos fuga distinctio? Reprehenderit blanditiis impedit autem quo.
Praesentium, iusto recusandae quaerat est soluta quam voluptatibus optio! Amet voluptatem quas cupiditate asperiores, eligendi id vitae minus ex illo quo atque eos beatae quia! Rem culpa sit inventore iure.
Culpa expedita minus et beatae impedit nam, hic, laudantium itaque mollitia dicta modi? Eum sequi, ullam totam aut sit at reprehenderit placeat voluptates blanditiis doloremque saepe, facilis dignissimos cum nesciunt?
Consectetur accusamus molestias distinctio asperiores, dolorem voluptates, cupiditate nihil natus officia debitis numquam eos libero! Perspiciatis consequatur laboriosam quis necessitatibus vitae laborum magnam? Voluptatem fugiat ab debitis quisquam corrupti amet.
Vel tenetur culpa perspiciatis nihil veritatis! Dolor cum alias suscipit tempora eius nihil nulla cumque ea! Maxime asperiores incidunt ab, maiores est vero eum? Maxime debitis sunt molestiae earum sint?
Voluptatibus cumque, facere accusamus reiciendis eum porro consequatur repellendus ipsam eos et, consequuntur non delectus possimus aspernatur alias. Maxime suscipit totam ex minima maiores iusto molestiae harum voluptas necessitatibus autem!
Illum quaerat ut repellat tenetur, expedita accusantium quos voluptates porro cumque. Ut natus, repudiandae tempore, saepe repellat perspiciatis doloremque non itaque labore, illum dolores aliquam iure consequuntur! Veniam, tempora necessitatibus.
Asperiores reprehenderit minima saepe fugiat exercitationem maxime consequuntur consequatur ipsum. Eaque quisquam aperiam sit, error officiis quod? Quae, fugit ratione porro ab illum blanditiis necessitatibus, quod deleniti quaerat amet recusandae!
Fugiat delectus molestias officia? Vitae odit, alias porro eius exercitationem eos magni ab laboriosam nulla suscipit illo repudiandae unde minima quos ducimus, repellat non in delectus labore? Ipsa, nam exercitationem?
Culpa autem necessitatibus odio eligendi sequi expedita! Aut vel illo molestiae ducimus error autem mollitia commodi qui vitae. Facilis voluptas unde ducimus nesciunt, nisi quisquam accusamus assumenda possimus nemo illum?
Aut earum voluptatum itaque ea, quasi hic asperiores nulla commodi repudiandae omnis. Repellendus, culpa totam? Similique illo quasi fugit labore, asperiores, accusantium dolor delectus sequi eum tempore rerum perferendis maiores.
Nostrum veritatis doloribus alias, excepturi fugiat inventore adipisci voluptatem tenetur sint illo eaque reprehenderit assumenda recusandae porro temporibus iure cumque sequi, reiciendis saepe. Possimus vitae eligendi atque consequatur et obcaecati!
Ipsam tenetur porro, hic ex magni eius veniam? Vitae commodi nobis temporibus necessitatibus alias perferendis veritatis placeat excepturi nesciunt eaque. Suscipit illum optio amet provident consequuntur dolores enim fugit fugiat.
Fugit facilis ducimus tempore porro, cupiditate qui ullam dolores ea dignissimos asperiores veniam. Dolore amet corporis provident rerum sapiente! Culpa atque, dolorum beatae perferendis impedit illum ab accusamus cum quam.
Exercitationem labore tempore pariatur enim ratione tenetur rem ipsa quo, architecto nesciunt ea debitis aliquid dolores nostrum, voluptas deleniti blanditiis animi cupiditate amet corrupti laudantium dolorum! Officiis sunt quis debitis!
Magni autem nemo exercitationem non doloremque soluta ut odio vitae odit quas cupiditate quae voluptates suscipit ex a corrupti expedita minus distinctio reiciendis aliquam, temporibus id. Totam asperiores error exercitationem!
Quaerat provident maiores tenetur tempora, architecto quod, possimus voluptatum soluta veniam similique a inventore eum voluptas quam qui voluptatibus adipisci aspernatur veritatis eveniet cum repudiandae ipsam? Voluptatem autem minima nemo.
Aspernatur quia nemo similique soluta porro dolorum non sequi ullam optio quae at consequuntur esse laborum, officia perferendis dignissimos eligendi nesciunt modi tempore aperiam eos amet eaque iusto. Adipisci, sunt!
Possimus suscipit ut minima dolore, rerum repudiandae. Ea, dolorem. Incidunt excepturi alias, laudantium deserunt aut voluptatum quaerat tempora illum odit iure. Possimus iure rem cupiditate fugit aspernatur. Enim, eligendi distinctio?
Deleniti asperiores officia, quod temporibus alias nostrum quis assumenda facere blanditiis, repellat voluptatibus error itaque, aperiam suscipit expedita. Temporibus atque facere excepturi nobis reprehenderit pariatur doloribus, eligendi officiis saepe distinctio?
Facilis soluta obcaecati officia delectus possimus mollitia quia adipisci. Laudantium ducimus quidem doloremque quam accusantium, voluptatibus excepturi ratione quia! Atque exercitationem commodi molestias cupiditate eligendi cumque quia, explicabo voluptate pariatur?
Explicabo odit maxime rerum alias laborum recusandae cupiditate quia consectetur dolor itaque? Officiis nemo aliquid enim magni voluptas id hic? Magnam nihil molestiae cupiditate voluptates totam. Dolorum laborum asperiores eveniet.
Corporis hic facere labore cumque obcaecati accusamus aut impedit, laudantium odio nesciunt esse architecto quos consectetur, placeat magni veniam assumenda. Error ducimus saepe, voluptas id soluta dolorem iste officia molestias.
Temporibus similique vel impedit iusto maxime accusantium possimus porro vero quas ut itaque in reiciendis, unde magnam sint beatae dignissimos! Doloremque fugiat deleniti iure hic sint id voluptate consequatur neque?
At ad unde officia perspiciatis soluta eum nesciunt, aperiam laudantium hic. Impedit fuga perspiciatis dolor veniam ex. Reprehenderit ad nostrum quod, vel debitis aliquid sint itaque porro nam fugit recusandae.
Molestias quibusdam deserunt sint similique enim libero dolores quisquam, culpa asperiores at ab ea aspernatur aliquid, vitae ad id dolorem quam vero quasi adipisci corrupti officiis repudiandae voluptates. Tempora, cum?
Repudiandae, neque ut, laborum excepturi impedit dignissimos facilis libero maiores ea, temporibus cupiditate. Voluptatibus sit ipsum laudantium, quibusdam nobis quisquam quam iusto officiis in blanditiis autem animi placeat? Rem, cupiditate.
Veniam, dicta. Harum velit at repellat rem non iusto autem sed assumenda ut obcaecati possimus, rerum libero nisi. Temporibus minus laudantium id omnis cupiditate ducimus ipsum error quia eligendi cumque?
Distinctio, sit ipsa? Provident tempora itaque in, magnam pariatur, voluptates nemo placeat iure cupiditate voluptatum, quidem saepe. Ut enim neque omnis? Assumenda provident officiis vitae ab, laborum deleniti dolorem nemo!
Dolore corporis officia reprehenderit voluptas, optio rem laudantium id est dolor quos nemo eligendi qui aspernatur tenetur et eius iusto nesciunt earum saepe expedita modi fugiat vel ea. Ipsa, sint?
Repellat modi voluptates eligendi ratione commodi, reprehenderit atque adipisci recusandae aspernatur quia? Autem facere maiores aliquam ad velit deleniti perferendis, delectus nihil, accusantium atque placeat saepe corporis assumenda repellendus ipsa!
Voluptates, accusantium odio maiores beatae animi cum illum! Quasi ex harum ipsam hic enim. Perspiciatis voluptas dolores repellat, minima vel nostrum molestias modi aliquid magni porro ad? Deleniti, numquam odio.
Delectus quod at consectetur aspernatur porro adipisci, ratione doloribus tenetur obcaecati dignissimos molestias magni dicta earum odit pariatur culpa officia. Non reiciendis ad rem ex quidem error inventore. Soluta, laudantium!
Odio fugiat blanditiis unde, exercitationem alias est sint quae, repellendus soluta non et saepe recusandae incidunt qui esse ducimus a eius hic. Amet quod culpa id hic repellendus? Vel, iusto.
Cumque optio odio animi dolores? Autem, enim modi quis minus impedit, perferendis provident voluptas distinctio corporis vel, consequatur accusantium repellat nostrum voluptatem architecto. Ab accusamus ducimus expedita aliquam sapiente necessitatibus.
Eius quae architecto sunt laboriosam corrupti pariatur repellat, itaque iure odit soluta, iusto autem quo doloremque libero possimus nihil consequatur quisquam excepturi vero quibusdam labore? Maiores quidem provident fugiat esse?
Cum, beatae nihil quod repellendus recusandae nesciunt error suscipit optio eius asperiores at saepe totam doloribus earum perferendis? Voluptate itaque dolorem suscipit eaque voluptatem consequatur quia sit? Nihil, omnis officia.
Accusamus, quasi in eos unde cupiditate similique. Sed exercitationem aspernatur, error odio amet suscipit, officiis pariatur sapiente natus id nam eius, reiciendis cupiditate dolorum dolorem. Non corporis quia itaque nobis?
Non ipsam quam cum, laudantium iste aut tempore repellendus ratione unde veritatis, enim recusandae? Quam veritatis reprehenderit delectus dolorum ratione voluptate sequi, esse eligendi, ea molestias quo cupiditate totam. Nostrum.
Ut debitis, cupiditate eum optio ab corporis voluptate ratione labore modi fuga, eaque molestias dolorem enim ad perspiciatis aspernatur inventore! Recusandae dignissimos qui vel! Rerum ipsum quas necessitatibus dignissimos unde.
Optio repudiandae error rerum alias, voluptates id dolorem hic minima, fugit aliquid repellendus at nesciunt maxime animi non dolores natus nobis. Laboriosam rerum mollitia repellendus voluptas placeat aliquid, tenetur quibusdam!
Molestiae adipisci neque vero. Sit, delectus recusandae. Veritatis temporibus dolore cupiditate minima amet error? Facere architecto, culpa et vel magni est, eum magnam illo debitis molestiae repudiandae. Libero, cumque nam.
Perspiciatis, neque? Cumque quod ut vel ipsam perspiciatis fuga quaerat a voluptatum amet. Nemo rerum, velit ad, asperiores deleniti provident sit ipsum nam dolorem, hic quod voluptatem perferendis nihil inventore.
Architecto ducimus sapiente debitis dolore, perspiciatis repellat nemo, veritatis in voluptatum aspernatur totam dignissimos fugiat exercitationem delectus? Corporis ea enim, facilis beatae veritatis suscipit quo voluptatibus fuga, quod porro libero!
Vero earum accusantium possimus nisi alias excepturi, dolor, recusandae iure, molestiae aspernatur harum repellendus. Voluptates eaque cumque dolorem, inventore aut quis omnis, maxime ex, ratione iusto perspiciatis distinctio debitis non.
Quasi saepe ex corporis et. Facere mollitia at exercitationem cum corrupti dolore consectetur accusamus? Accusantium accusamus labore iusto quaerat animi. Eaque veniam excepturi fugit odit. Et cupiditate accusamus fugiat aspernatur.
Ut officia recusandae suscipit nisi doloribus ratione id necessitatibus quas eius inventore cupiditate facere, adipisci aspernatur minima fuga iusto! Voluptatibus aliquam magnam tenetur quas doloribus sit quo quos eaque asperiores!
Eveniet, animi tenetur aliquid exercitationem illo aperiam odit aspernatur repellendus cum iure iste velit adipisci numquam. Deserunt quia, ab quasi, ipsam repudiandae tempora quibusdam beatae illum itaque quaerat vitae autem.
Tempora consectetur doloribus in? Sunt voluptate tempore ipsam tempora cupiditate minus minima dolore quod, quasi, consectetur repudiandae vel at nesciunt autem animi magnam. Soluta porro veritatis, minima minus quos quas!
Autem officiis accusamus reiciendis magnam? Pariatur inventore architecto quasi minus. Laborum voluptatibus deserunt distinctio id saepe, vero nemo cum quibusdam ipsum porro quas odit totam reiciendis nostrum architecto delectus autem.
Molestiae tempore quod accusantium, neque itaque quos dicta molestias nam nemo corrupti, dolore odit? Quos fuga aspernatur illum mollitia atque temporibus expedita commodi at maxime! Nemo facere inventore sunt suscipit.
Quaerat adipisci doloribus dolore dicta quam quas qui, molestiae et placeat delectus mollitia nihil veritatis rerum omnis exercitationem ipsa ea non eveniet a ex cupiditate debitis obcaecati! Sint, cupiditate ut!
</div>
</body>
</html>6、样式继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;
color: #807474;
}
/* div,
div span,
div a{
font-size: 40px;
} */
div{
font-size: 50px;
color: #807474;
padding: 13px;
}
/* css样式的继承性
不是所有样式都继承，只有改变后对布局没影响的，才会继承
a连接最好在自身更改样式
*/
</style>
</head>
<body>
<div>
lsakjdflfkj<br/>
<span>
我是图图小淘气
</span><br>
<a href="#">蔡徐坤</a>
<i>alkdjlfkajdlkf</i>
</div>
</body>
</html>7、flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 800px;
height: 800px;
background-color: pink;
display: flex;
/* 排列方式 */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
flex-direction: row;
/* 让flex布局变为多行 */
flex-wrap: wrap;
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
/* 主轴上的布局 */
justify-content: center;
justify-content: end;
justify-content: space-around;
justify-content: space-evenly;
justify-content: space-between;
/* 侧轴 */
/* align-items 单行 align-items 多行 */
/* align-items: center; */
/* align-items: end; */
align-items: start;
align-content: start;
align-content: space-between;
align-content: space-between;
align-content: space-evenly;
}
.son{
width: 170px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">5</div>
<div class="son">6</div>
<div class="son">7</div>
<div class="son">8</div>
</div>
</body>
</html>8、定位补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
display: flex;
width: 800px;
height: 800px;
background-color: pink;
justify-content: space-between;
}
.son{
width: 300px;
background-color: aqua;
}
.son1{
flex: 1;
}
.son2{
/* 值越小，排列在越靠前的 */
order: -3;
flex: 1;
}
</style>
</head>
<body>
<div class="father">
<div class="son1 son">1</div>
<div class="son2 son">2</div>
<div class="son3 son">3</div>
</div>
</body>
</html>9、浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
position: relative;
width: 500px;
height: 500px;background-color: pink;
}
.son{
width: 100px;
height: 100px;
}
.son1{
position: absolute;
/* z-index 定位中显示的优先级 */
z-index: 1;
top: 100px;
left: 50px;
background-color: aqua;
}
.son2{
position: absolute;
top: 110px;
left: 60px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1">111</div>
<div class="son son2">222</div>
</div>
</body>
</html>10、folat讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 1000px;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color: aqua;
}
.son2{
background-color: blue;
float: left;
/* 浮动，会脱离文档流，不再保留原来位置
会造成在其下方的兄弟元素位置发生变化
*/
/* 当子元素发生浮动时，其父元素会造成高度塌陷 */
}
.son3{
background-color: black;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<div class="son son2"></div>
<div class="son son3"></div>
</div>
</body>
</html>11、float问题解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
height: 300px;
}
ul li{
list-style: none;
float: left;
margin-right: 20px;
}
div{
/* clear清除浮动 */
clear: both;
}
</style>
</head>
<body>
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<div></div>
<p>我是大懒比</p>
</ul>
</body>
</html>12、渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 400px;
height: 800px;
background-image: linear-gradient(green,pink,yellow,red);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>13、媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: pink;
}
@media screen and (min-width:900px) {
div{
background-color: green;
}
}
</style>
</head>
<body>
<div>
alkskdjflaskdfj
</div>
</body>
</html>14、2d转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
}
.son{
width: 300px;
height: 300px;
background-color: pink;
/* 平移 */
transform: translate(40px, 40px);
transform: translateX(70px);
transform: translateY(-60px);
/* 旋转 */
transform: rotateZ(10deg);
/* 复合写法 旋转永远放在最后一个 */
transform: translate(100px) rotatez(45deg);
/* 缩放 */
transform:scale(0.5);
transform: scaleX(2);
transform: scaleY(2);
/* 扭曲 */
transform: skew(40deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>15、3d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* perspective-origin: 100px 200px;更改观察点 */
}
.son{
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(200px);
transform: rotateX(45deg);
transform: rotateX(45deg) rotateY(45deg); */
/* transform: rotateX(45deg); */
/* transform: rotate3d(1,1,0,45deg); */
/* 隐藏背面 */
backface-visibility: hidden;
/* 更改原点 */
transform-origin: top;
}
</style>
</head>
<body>
<div class="father">
<div class="son">222222222</div>
</div>
</body>
</html>16、过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* perspective-origin: 100px 200px;更改观察点 */
}
.son{
/* transition 谁变化给谁加 */
transition: all 1s;
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(200px);
transform: rotateX(45deg);
transform: rotateX(45deg) rotateY(45deg); */
/* transform: rotateY(45deg); */
/* transform: rotate3d(1,1,0,45deg); */
/* 隐藏背面 */
backface-visibility: hidden;
/* 更改原点 */
transform-origin: top;
}
.son:hover{
transform: rotateZ(10000000000000000deg);
width: 1000000px;
height: 1000000px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
</body>
</html>17、动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes yuanshen {
from{
width: 200px;
background-color: pink;
}
to{
width: 800px;
background-color: aqua;
}
}
div{
width: 200px;
height: 50px;
background-color: blue;
animation: yuanshen 5s linear 2s infinite alternate;
}
</style>
</head>
<body>
<div>
2222
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
