1.简介
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
1.1样式分类及其语法
1.1.1 内联样式
内联样式，也叫行内样式。将样式定义在元素的style属性中。
语法如下：
style = " 属性 : 值 ; 属性 : 值 ; ……"
案例演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式写法分类</title>
</head>
<!-- 内联样式: 就是将样式写在元素的开始标签里的style属性中
div：
宽度：默认撑满父元素的内容区宽度
高度：默认是自己的内容去的文字撑起来的高度
当然可以自定义div的宽与高: width height
扩展: 插件live server的使用 插件 live server 就是一个简易的服务器插件，端口号默认5500
该插件可以使用浏览器打开HTML等文件，并且自动实时刷新。
-->
<body>
<div style="border: 5px dotted palevioletred; width: 800px; height: 500px;">我是佳耳Erjia</div>
</body>
</html>1.1.2内部样式表
内部样式表，是将样式定义到HTML的<head>元素的子元素<style>里，使用选择器来定位要设置样式的元素。
语法如下：
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式表</title>
<!-- 内部样式表: 将样式写在head的子元素style里，
此时需要使用选择器来定位要设置样式的元素
语法:
选择器{
属性:值;
......
}-->
<style>
#d1 {
background-color: aqua;
width: 500px;
height: 400px;
}
#d2{
background-color: rgb(237, 207, 223);
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="d1">我是佳耳</div>
<div id="d2">我是Erjia</div>
</body>
</html>1.1.3外部样式表
外部样式表，是将css代码编写到CSS文件中，文件的扩展名为.css，然后通过link标签将css文件引入到HTML文档中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<!-- rel指定文件类型, href指定文件位置 -->
<link rel="stylesheet" href="./CSS/my.css">
</head>
<!--
外部样式表 : 将样式单独封装在一个文件中，文件的扩展名是.css
然后使用link标签，将样式文件引入到该HTML页面中
-->
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
</body>
</html>2.选择器
2.1基本选择器(四种)
2.1.1标签选择器
结构： 标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有的这类标签，设置样式
注意：
-
标签选择器选择的是一类标签，而不是单独的一个
-
标签选择器无论嵌套关系有多深，都能够找到对应的标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <style> /* 标签选择器 也称为元素选择器(同一类标签全被选中) */ p{ font-size: 20px; color: aqua; } /* border-inline-xxx: xxx可以是width,color,style,设置左右边框的大小，颜色 border-block-xxx: 设置上下边框的大小，颜色，线条 常用的线条: solid: 实线 dotted: 点虚线 double: 双线条 */ div{ border-inline-width: 2px; border-inline-color: red; border-inline-style: solid; width: 300px; height: 200px; } </style> </head> <body> <p>段落1</p> <div>div1</div> <p>段落2</p> <div>div2</div> </body> </html>
2.1.2类选择器
结构： .类名{css属性名：属性值；}
作用： 通过类名，找到页面中所有的带有这个类名的标签，设置样式
注意：
-
所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）
-
类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头或者中划线开头
-
一个标签中可以同时有多个类名，类名之间用空格隔开
-
类名可以重复，一个类选择器可以同时选中多个标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器的学习</title> <style> /* 类选择器是以小圆点开头的样式选择器,小圆点后面是具体的class名称 */ .c1{ font-size: 20px; color: aquamarine; } .c2{ font-size: 30px; color: blueviolet; } .c3{ font-style: italic; } .c4{ color: cadetblue; } </style> </head> <body> <!-- 每个元素都有class属性 不同的元素的class的值可以相同，表示同一类的元素 class的值可以有多个 用空格隔开 --> <div class="c1 c3">div1</div> <p class="c2">段落1</p> <h1 class="c3">标题1</h1> <p class="c4">段落2</p> </body> </html>
2.1.3 id选择器
结构： #id属性值{css属性名：属性值;}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意：
-
所有的标签上都有id属性
-
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
-
一个标签上只能有一个id属性值
-
一个id选择器只能选中一个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器的使用</title>
<style>
/* id选择器:必须使用#作为开始符号，紧跟id具体值 */
/* id相当于身份证号 因此id不可重复具有唯一性
属性上的的区别 1.class的值可以重复 id不能重复
选择器上区别： id是用#开头 class选择器使用.开头 */
#d2{
border: 1px dotted red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<p id="d3">段落1</p>
</body>
</html>2.1.4通配符选择器
结构： *{css属性名：属性值}
作用：找到页面中所有的标签，然后设置样式
注意：
-
开发中应用极少，只有在特殊的情况下才会使用
-
在小页面中可能会用于去除页面中默认的margin和padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 通配符选择器，就是*选择器，表示所有元素都被选中 */ #d1{ width: 300px; height: 100px; background-color: aquamarine; } .c1{ color: blue; } *{ font-size: 50px; } </style> </head> <body> <div id="d1">div1</div> <p class="c1">段落1</p> <h1 class="c1 ">标题1</h1> </body> </html>
2.2复合选择器
2.2.1交集选择器
语法： 选择器1选择器2{css属性名：属性值}
作用：选中页面中同时满足多个选择器的标签，紧挨着的
结果：找到标签中既能被选择器1又能被选择器2选中的标签，设置样式
注意：
-
之间没有任何东西隔开，紧挨着的，
-
交集选择器中如果有标签选择器，标签选择器必须放在前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器的学习</title>
<style>
/* 交集选择器：
选择器1选择器2选择器3{.....}
：上述多个选择器中共同选中的标签进行设置样式
*/
.c1#p1{
color: aquamarine;
}
p.c1{
font-size: 50px;
}
</style>
</head>
<body>
<h1>交集选择器的测试</h1>
<div class="c1">div1</div>
<div class="c1">div<div>
<p class="c1" id="p1">段落</p>
<p class="c2">段落2</p>
</body>
</html>2.2.2并集选择器
语法： 选择器1,选择器2{css样式}
作用：同时选择多组标签，设置相同的样式
结果：找到选择器1和选择器2选中的标签，设置样式
注意： 选择器与选择器之间用逗号隔开 可以是基础选择器或者复合选择器 每组选择器通常一行写一个，提高代码的可读性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器的学习</title>
<style>
/* 并集选择器:多个选择器的名字使用逗号隔开 */
#s1,.c4,#d3{
color: plum;
}
</style>
</head>
<body>
<h1>并集选择器</h1>
<span id="s1">用户名已经存在</span><br>
<span class="c3">密码不正确</span>
<p class="c4">段落3</p>
<div id="d3">div3</div>
</body>
</html>2.3关系选择器
| 语法 | 用法 | 备注 |
| 父亲>儿子 | 儿子中的个别选择 | 选择器之间有大于号 |
| 祖先 后代 | 后代全部选择 | 选择器之间用空格隔开 |
| 兄+弟 | 哥哥的弟弟被选择(弟弟必须严格相邻哥哥) | 选择器之间用+隔开 |
| 兄~弟 | 哥哥的符合条件的所有弟弟被选择 | 选择器之间用波浪线隔开 |
2.4属性选择器
| 语法 | 用法 |
| [属性] | 选中含有指定属性的元素 |
| [属性=属性值] | 选中含有指定属性和指定属性值的元素 |
| [属性^=属性值] | 选中含有指定属性和指定属性值开头的元素 |
| [属性$=属性值] | 选中含有指定属性和指定属性值结尾的元素 |
| [属性*=属性值] | 选中指定属性名和含有指定属性值的元素 |
2.5伪类选择器
伪类：不存在的类，特殊的类
-
伪类用来描述一个元素的特殊状态 比如：第一个子元素、被点击的元素、鼠标移入的元素...
-
伪类一般情况下都是使用:开头
3.单位
·像素
| - 屏幕（显示器）实际上是由一个一个的小点点构成的 - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰 - 所以同样的200px在不同的设备下显示效果不一样像素 |
·百分比
| - 也可以将属性值设置为相对于其父元素属性的百分比 - 设置百分比可以使子元素跟随父元素的改变而改变 |
·em
| - 是一个相对单位。 - em是相对于当前元素内的字体大小来计算的 - 1em = 1font-size - em会根据字体大小的改变而改变 - 如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px |
·rem
| - rem是相对于根元素的字体大小来计算 |
颜色单位
| 1. 颜色单位可以使用有英文单词的颜色，比如 black,red,yellow,....... 小贴士：如果三原色的16进制的字符一致，可以简写 比如： #aabbff 可以简写成 #abf |
4.盒模型
4.1盒子模型
每一个html元素都可以叫做盒模型。页面就是由一个个盒模型堆砌起来的。
这样的优点就是可以将元素放置在任何地方，可以通过调整宽和高来充满整个屏幕
在CSS中，盒模型（Box Modle）是用来对元素进行设计和布局的，由内到外包含实际内容区、内边距、边框、和外边距四个部分。
1）内容区Content
用来放置文本或者子元素。
2）内边距padding
即内容区与边框的距离。
3）边框border
围绕在内边距外的边框。
4）外边距margin
边框以外的区域。
4.2 content
-
content，盒模型的实际内容区。
-
该区域可以放入文本，以及子元素。
-
样式属性width，height，background-color就是对该区域进行设置的
4.3 padding
padding，定义了内容区距离边框的这一片区域，该区域是透明的，没有颜色。包含上下左右的四个内边距。
-
padding-top： 上内边距
-
padding-right： 右内边距
-
padding-bottom：下内边距
-
padding-left： 左内边距
我们在设置内边距的时候，可以使用上述四个属性，分别为四个内边距设置一下值。
为了缩短代码，也可以在一个属性中指定所有的值，语法如下：
| padding: 上 右 下 左; padding: 上 左右 下; padding: 上下 左右; padding: 上下左右; |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距的演示</title>
<style>
div{
width:200px;
height:200px;
border: 5px solid red;
/* padding-top: 10px ;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px; */
/* 上 右 下 左 */
/* padding: 10px 15px 20px 25px; */
/* 上 左右 下*/
/* padding: 10px 20px 30px; */
/* 上下 左右 */
/* padding: 10px 20px; */
/* 上下左右 */
padding: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>4.4 border
元素的边框，在CSS中，通常由的这三个维度属性来控制。
-
边框宽度：border-width
-
边框颜色：border-color
-
边框样式：border-style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒模型的边框</title>
<style>
/* 边框由三个维度的属性来决定样式: 宽、颜色、线图 对应属性如下
border-width
border-color
border-style
每个属性可以拆成四部分对应的小属性 即上下左右的 宽 颜色 线条
属性名格式:
border-xxx-width
border-xxx-color
border-xxx-style xxx分别是top,bottom,left,right。
*/
div{
/* 宽和高控制的是内容区的宽度和高度 */
width: 200px;
height: 200px;
/* 设置内边距 */
padding:5px;
/* 设置边框 */
/* border-width: 5px 10px 15px 20px;
border-color: orange;
border-style: dashed; */
/* border-width:10px ;
border-color: orangered;
border-style: dashed; */
/* 使用边框border属性来代替第一个维度的属性设置样式
三个维度的属性值的顺序没有要求*/
border: red solid 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>也可以根据自己的喜好设置:
| 上边框的宽，颜色，样式 下边框的宽，颜色，样式 左边框的宽，颜色，样式 右边框的宽，颜色，样式 |
边框的线条样式:
| - none: 默认无边框 - dotted: 点虚线 - solid: 实线 - double 双线条 - dashed 虚线 - groove: 定义3D沟槽边框。效果取决于边框的颜色值 - ridge: 定义3D脊边框。效果取决于边框的颜色值 - inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 - outset: 定义一个3D突出边框。 效果取决于边框的颜色值 |
4.5 margin
margin(外边距)属性定义元素周围的空间。作用一般是用来设置该元素所在网页的位置。也分为
| margin-top :上外边距 margin-right ：右外边距 margin-bottom ：下外边距 margin-left ：左外边距 |
简写如下：
| margin: 上 右 下 左 margin: 上 左右 下 margin: 上下 左右 margin: 上右下左 |
属性值注意事项:
| 1. 上下左右可以使用具体值，定义一个固定的margin（使用像素，pt，em等） 2. 左右也可以使用百分比 3. 左右使用auto，这样做的结果会依赖于浏览器。 但是由居中的效果 |
4.6 盒子水平布局
元素在其父元素中水平方向的位置由以下几个属性共同决定：
| margin-left border-left padding-left width padding-right border-right margin-right |
一个元素在其父元素中，水平布局必须要满足以下的等式：
| margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度 （必须满足） |
如果不满足，则某一个属性会自动填充，然后满足等式。
第一种情况：七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足
| 案例1：
|
第二种情况：有auto的情况。width,margin-left,margin-right可以设置为auto.
| 如果某个值为auto，则会自动调整为auto的那个值以使等式成立 0 + 0 + 0 + auto + 0 + 0 + 0 = 800 宽的auto 则为 800 200 + 0 + 0 + auto + 0 + 0 + 200 = 800 宽的auto 则为 400 - 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0 |
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
| 选择器{ width:800px; margin:0 auto; } |
4.7 盒子垂直布局
垂直距离，相对来说，比较简单，没有水平距离复杂，只需要修改上下的外边距即可
注意： 元素的整个垂直大小， 要考虑上下外边距，边框的宽度，上下内边距，以及width。
如果发生了溢出，可以使用以下属性来设置， 注意，是在父元素里设置。
| overflow: 可选值: visible: 默认值，表示可见 hidden : 将溢出的内容裁剪 scroll: 添加了上下和左右的滚动条设置 auto: 根据需求自动添加滚动条 |
4.8 外边距的折叠
针对于块元素来说，都是独占一行的，因此只涉及到垂直方向上的外边距的重叠(折叠)，即两个元素的相邻外边距可以发生重叠现象。
兄弟元素
| - 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值） - 特殊情况： 如果相邻的外边距一正一负，则取两者的和 如果相邻的外边距都是负值，则取两者中绝对值较大的 - 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理 |
父子元素
| - 父子元素间相邻外边距，子元素的会传递给父元素（上外边距） - 父子外边距的折叠会影响到页面的布局，必须要进行处理 （只需要父元素添加border属性） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距的重叠现象</title>
<style>
/* 因为块元素都是独占一行的，因此左右外边距不可能发生重叠
只有上下外边距可能发生重叠现象。
1.兄弟之间的外边距重叠:
-如果两个值都是正值 取较大值
-如果一正一负，取两者的和 如果负数的绝对值大于整数，那么可见部分一定重叠了
-如果两个都是负数 取绝对值较大的 可见部分一定会发生重叠
-注意:兄弟之间外边距的重叠，不是问题。根据情况设定即可
2.父子之间的外边距重叠
子元素的上外边距传递给了父元素，使父元素距离铁塔的父元素的上外边距也发生了变化,
致使父元素的位置发生了变化。因此就出现了问题。该问题必须要解决。
如何解决？父元素只需要设置border属性
*/
.outer{
/* border: 1px solid red; */
background-color: pink;
width : 600px;
height: 500px;
margin: 0 auto;
}
.in1,.in2{
width: 200px;
height:200px;
border: 5px solid green;
}
.in1{
background-color: aqua;
margin-bottom: -50px;
/* 研究父子之间的外边距重叠 */
margin-top: 100px;
}
.in2{
background-color: blueviolet;
margin-top: -30px;
}
</style>
</head>
<body>
<div class="outer">
<div class="in1"></div>
<div class="in2"></div>
</div>
</body>
</html>4.9 行内元素的盒模型
对于内联元素(行内元素)的盒模型来说。
| - 行内元素不支持设置宽度和高度， 被内容数据撑起来的 - 行内元素可以设置padding，但是垂直方向padding无效 - 行内元素可以设置border，垂直方向的border无效 - 行内元素可以设置margin，垂直方向的margin无效 |
如果想要行内元素的宽，高或者垂直方向上的样式生效，可以使用display属性将行内元素的样式转为块元素的样式进行显示设置。
display属性的可选值如下：
-
none 隐藏， 不再占用原有的空间。
-
block 变成块元素的样式显示。（注意，并不是内联元素变成了快元素）
-
inline 变成行内元素的样式显示
-
inline-block 变成行内的块元素，同时具有了内联和块元素的样式特点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 行内元素的盒模型特点: */ /* 内容区不能使用width和height属性设置,不生效, 内容区的宽度和高度都是文字撑起来的。 padding、border、margin的左右都是生效的，上下不生效。 现在的需求是:就是想要将行内元素像块元素一样，各种属性设置都生效。那么需要使用的display属性 在行内元素中设置其值为block 扩展；display:可选值如下: none:隐藏消失,不占用页面的布局空间 block:将行内元素当成块元素设置样式 inline:将块元素当成行内元素设置样式 inline-block:要设置的元素既有行内元素也有块样式(上下左右都好使还在同一行上) */ #s1{ width: 300px; height: 200px; border:5px solid red; padding:20px; margin: 40px; /* 设置display的值为block,那么该行内元素的上下外边距，边框，内边距都生效 宽与高也生效，而且还具有独占一行的特点 */ display:block; } /* div div:first-child{ color:blue; } */ div div{ width:200px; height: 100px; /* 将display的值设置的inline 那么块元素就具备了行内元素的样式特点: 宽、高，上下外边距，上下边框，上下内边距失效。并且不再独占一行。 */ /* display:inline; */ /* 将display的值设置了inline-block 那么该元素既有块元素的样式特点，也有行内元素的和样式特点: 宽、高，上下外边距，上下边框，上下内边距都生效，并且还在一行上 */ display: inline-block; } #d1{ background-color: aquamarine; } #d2 { background-color: pink; } </style> </head> <body> <div> <span id="s1">我是一只鹅 </span> <span id="s2">你也是一只鹅</span> <div id="d1">1</div> <div id="d2">2</div> </div> </body> </html>
4.10 默认样式
通常情况下，html标签都带有自己的默认css样式。比如，body里的元素并不是紧贴左侧和顶部，因为body的margin有个默认值8px。再比如，p元素的上下外边距默认是1em等。
我们在写网页时，这些默认的样式大多数时候都可能会影响我们自己设定的布局，因此，通常我们都会去除这些默认的样式。
由于各个元素的默认样式不一样，有些是相同的，有些是不同的，因此不能都提取到一个选择器中，要单独设置。
可以借助第三方的css样表，进行重置样式。比如
-
reset.css： 该文件的作用，是取消几乎所有元素的默认样式
-
normalize.css: 该文件的作用，是设置一些通常的尺寸。
需要哪一个，就使用link 引入即可. link标签应该放置在style标签的上面，避免覆盖掉自定义的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的默认样式</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
/* 通常情况下所有的html标签都有自己的默认样式，比如body的外边距 默认是8px
因此我们写的标签并不是紧紧的贴着显示器的左边框和上边框的
换句话说，默认样式可能会影响我们自己设计的布局，此时我们需要取消默认样式
但是每个元素都有自己的默认样式 因此不能使用一个选择器就取消所有的默认样式 */
/* 可能有人想到了通配符选择器 */
/* *{
margin: 0;
padding: 0;
/* 还有其他的各种样式，写起来非常麻烦 */
div{
border:10px solid red;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>4.11 盒子尺寸
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定。其实这个盒子可见框大小，是由一个属性box-sizing来控制的。
box-sizing: 决定了盒子尺寸的计算方式，也就是整个盒子可见框的大小。其有两个可选值：
-
content-box ：默认值， 属性width和height 用来规定内容区的大小。
因此盒子可见框大小由内容区，内边距和边框共同决定。
-
border-box : 属性width和height用来规定整个可见框的大小，就不再是内容区了。因此内容区的大小则是自适应了。
4.12 轮廓和圆角
| outline 用来设置元素的轮廓线，用法和border一模一样 - border-top-left-radius
border-radius: 20px / 40px; */ 将元素设置为一个圆形 |
5.浮动
5.1 文档流层
| - css将整个页面当成一个多层的结构 - 人所看到的是最顶层。 - 最底层称之为文档流层， - 所有的元素，默认都是布局在文档流层的。如果不在文档流层，就在其他层(先不管) - 文档流层里的元素 - 块元素 1. 单占一行 2. 块元素的宽，默认状态下是要撑满父元素的，也就是由父元素决定 3. 块元素的高，默认状态下是内容区的数据所占大小 4. 块元素是垂直排列，自上而下。 - 行内元素 1. 只占本身大小 2. 行内元素的宽和高是由内部的文字或元素决定的。 3. 行内元素的排列，从左到右，当在一行装不下时，会自动换行，继续从左到右(与书写顺序一致) |
5.2 浮动的简介
| 通过浮动可以使一个元素向其父元素的左侧或右侧移动 注意，元素设置浮动以后，水平布局的等式便不需要强制成立 浮动的特点： 简单总结： |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动的特点</title>
<style>
/* 浮动的特点
1:浮动元素脱离文档流，可以向左或者向右移动，属性
float: 可选值
none:不浮动
left:向左浮动
right:向右移动
2.浮动元素不会超出父元素的边框
3.元素一旦设置向左或者向右浮动，下面还没有设置浮动的兄弟元素会向上移动
4.浮动元素的哥哥如果没有设置浮动,那么该浮动元素不会浮动到哥哥的左右,
如果哥哥也设置了浮动，那么该元素最多也和哥哥一样高(最高不会超过哥哥)
5.浮动元素不再满足左右水平布局的强制成立等式。
*/
#outer{
width:800px;
height:600px;
background-color: aqua;
margin:0 auto;
}
.box1,.box2,.box3{
width: 200px;
height: 200px;
}
.box1{background-color: blue;
float: right;
}
.box2{background-color: orange;
float: left;
}
.box3{background-color: silver;
float: left;
}
</style>
</head>
<body>
<div id="outer">
<div class="box1">阿斯顿发送到发是否达到发送到发送到发送到发送到发生发大水发大水发大是大非</div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>5.3 高度坍塌问题
高度塌陷的问题：
在浮动布局中，父元素的高度默认是被子元素撑开的，
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
将会无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 高度塌陷的问题：
当父元素没有指定高度，而是由子元素撑起来的。当我们有这种需求时，如果子元素设置了浮动，那么就会出现父元素
高度塌陷的问题。
不设置父元素的高度的好处：
- 当子元素的内容过少时，不会出现大量的空白区
- 当子元素的内容过多时，不会出现溢出情况
但是不设置高度，又会出现高度塌陷的问题，因此，高度塌陷的问题必须解决。
解决办法如下：
1. 给父元素设置固定高度，不可取。
给父元素固定高度违背了高度自适应的原则，不够灵活，当不知道父元素的具体高度时没办法设置，不推荐使用。
2. 给父元素添加属性：overflow：hidden
引出来一个知识点：BFC。
3. 在最后一个浮动子元素的后面添加一个div标记，并设置div的样式为clear:both
4. 使用父元素的伪元素来设置相关属性，然后解决高度塌陷的问题。
该方式是最优的解决方式
*/
.box1{
border: 3px orange solid;
/* overflow: hidden; */
}
.box2{
width: 200px;
height: 200px;
background-color: palegreen;
float:left;
}
.box3{
width: 300px;
height: 300px;
background-color: palevioletred;
}
.box4{
width: 200px;
/* height: 10px; */
/* background-color: red; */
/* clear:both; 清除 浮动元素对该元素的影响，可以解决父元素高度塌陷的问题*/
}
.box1::after{
content: ""; /*该伪元素的内容是一个行内元素*/
display: block; /*如果想要行内元素移动到子元素的下面，那么该元素必须变成块元素*/
clear: both; /* 清除浮动元素对该伪元素的影响*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<!-- <div class="box4"></div> -->
</div>
<div class="box3"></div>
</body>
</html>5.4 解决高度坍塌问题的四种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度坍塌问题的演示</title>
<style>
/* 解决父元素的高度坍塌问题有以下四种方式 :
1. 给父元素设置固定高度，不可取。给父元素固定高度违背了高度自适应的原则，不够灵活，
当不知道父元素的具体高度时没办法设置，不推荐使用。
2. 给父元素添加属性：overflow：hidden
引出来一个知识点：BFC。
3. 在最后一个浮动子元素的后面添加一个div标记，并设置div的样式为clear:both
4. 使用父元素的伪元素来设置相关属性，然后解决高度塌陷的问题。
该方式是最优的解决方式 */
#outer{
/* 高度没设置 是为了让子元素将高度撑起来 */
border: 1px solid red;
width: 600px;
margin: 0 auto;
}
/* 使用第四种方式解决高度坍塌问题 */
#outer::after{
/* 在父元素的内容区的最后插入一个空字符串 因为有文字应该会环绕浮动在子元素周围 */
content: "";
/* 将不存在的这个伪元素设置成具有块元素的样式 */
display: block;
/* 清除伪元素两侧的浮动效果 */
clear: both;
}
#inner{
border: 1px solid blue;
height: 300px;
width: 300px;
/* 设置了浮动效果,那么父元素的高度就不会被撑起来,出现坍塌问题 */
float: left;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>5.5clearfix
| clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可 在父元素的class属性上，添加clearfix.
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 500px;
background-color: salmon;
/* border: 1px solid blue; */
}
.box2{
width: 200px;
height: 200px;
background-color: seagreen;
margin-top: 30px;
float: left;
}
/* 解决外边距重叠*/
/*table值，会将外边距隔开*/
/* .box1::before{
content: "";
display: table;
} */
/*解决高度塌陷问题*/
/* .box1::after{
content: "";
display: block;
clear:both;
} */
.clearfix{
content:"";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>6.定位
6.1 定位的简介
| 定位（position） - 相对定位： - 偏移量（offset） - 定位元素垂直方向的位置由top和bottom两个属性来控制 - 定位元素水平方向的位置由left和right两个属性控制 |
6.2 绝对定位
| 绝对定位 包含块( containing block ) - 绝对定位的包含块: - 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>
/* 绝对定位的演示:
当position的值为absolute时，则该元素开启了绝对定位
开启绝对定位的元素有以下特点：
1. 如果设置了绝对定位，不改变偏移量，则该元素不会移动
2. 设置了绝对定位的元素会脱离文档流 如果下面的兄弟没有设置浮动或者定位，则(下面的兄弟)向上移动
3. 设置了绝对定位的元素的位置是相对于所在的包含块。
4. 设置了绝对定位的元素的性质会发生改变。 行内元素变成块元素， 此时所有的元素宽和高默认都是内容撑开的。
5. 设置了绝对定位的元素提高了层级。
包含块:
如果设置了绝对定位，那么该元素是相对于距离他最近的设置了相对定位的祖先块元素。
如果所有的祖先块元素都没有设置定位，那么就是相对HTML这个根元素来说的。
简而言之: 最近的设置了相对定位的祖先块称之为包含块。
HTML：是所有元素的初始包含块。*/
.box1,.box4,.box3{
width: 200px;
height: 200px;
}
.box1{
background-color: aqua;
}
.box3{
background-color: beige;
}
.box4{
background-color: blue;
/* 因为box2想要相对于box4进行绝对定位 因此box4要开启相对定位 */
/* position: absolute; */
position: relative;
}
.box5{
width: 150px;
height: 150px;
background-color: pink;
}
.box2{
width: 100px;
height: 100px;
background-color: chartreuse;
/* 开启绝对定位 注意:相对位置是其包含块，包含块必须开启相对定位*/
position: absolute;
left: 50px;
top: -150px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box4">
<div class="box5">
<div class="box2"></div>
</div>
</div>
<div class="box3"></div>
</body>
</html>6.3 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位的演示</title>
<style>
/* 相对定位的概念: - 当position的属性值位relative时，就开启的元素的相对定位
- 相对定位的特点：
1. 如果设置了相对定位，没有改变偏移量，则元素不会移动
2. 相对的位置是元素所在文档流的位置。
3. 设置了相对定位的元素，不会脱离文档流
4. 设置了相对定位的元素提高了自己的层级
5. 设置了相对定位的元素，本身的性质不会改变， 块依旧是块元素，行内依旧是行内元素
6.偏移量:
top: 数值是正(负)值 向下(上)移动
bottom: 数值是正(负)值 向上(下)移 一般情况下top和bottom选择一个即可
left: 数值是正(负)值 向右(左)移动
right: 数值是正(负)值 向左(右)移动 一般情况下left和right选择一个即可
*/
.box1,
.box2,
.box3{
width: 300px;
height: 300px;
}
.box1{
background-color: aqua;
}
.box2{
background-color: beige;
/* 开启相对定位 切记:是相对他之前在文档流的位置*/
position: relative;
/* 设置偏移量 */
top: 100px;
left: 100px;
}
.box3{
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>7.动画
| 过渡（transition） - 通过过渡可以指定一个属性发生变化时的切换方式 - 通过过渡可以创建一些非常好的效果，提升用户的体验 transition-property: 指定要执行过渡的属性 多个属性间使用,隔开 如果所有属性都需要过渡，则使用all关键字 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡 transition-duration: 指定过渡效果的持续时间 时间单位：s 和 ms 1s = 1000ms transition-timing-function: 过渡的时序函数 指定过渡的执行的方式 可选值： ease 默认值，慢速开始，先加速，再减速 linear 匀速运动 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速 后减速 cubic-bezier() 来指定时序函数 https://cubic-bezier.com steps() 分步执行过渡效果 可以设置一个第二个值： end ， 在时间结束时执行过渡(默认值) start ， 在时间开始时执行过渡 transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡 transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 |
7.1 过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画的过渡演示</title>
<style>
/* 动画的过渡 :
transition-property: 指定要过渡的属性名称，多个属性使用逗号隔开
transition-duration: 指定过渡所需时间
transition-timing-function: 过渡函数 即如何运动 所选值
ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速 后减速
cubic-bezier() 来指定时序函数
transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡
transition 可以同时设置过渡相关的所有属性，减少代码量,提高可读性
只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
transition: 属性,属性...duration delay,function
*/
div{
width: 200px;
height: 200px;
background-color: aqua;
}
/* 设置过渡 */
div:hover{
width: 400px;
height: 400px;
/* transition-property: width,height;
transition-duration :3s ;
transition-timing-function: linear;
transition-delay: 2s; */
transition:width, height,linear, 3s 2s ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>7.2 变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画的变形的演示</title>
<style>
/* 动画的变形:即3D转换,属性是transform
对应属性值三类:
平移: translateX(像素) 沿着x轴方向平移 正右负左
translateY(像素) 沿着y轴方向平移 正下负上
translateZ(像素) 沿着z轴方向平移 正值突脸 负值远离脸 需要开启视距
旋转: rotateX(度数) 以x轴为轴心进行旋转
rotateY(度数) 以y轴为轴心进行旋转
rotateZ(度数) 以z轴为轴心进行旋转
缩放: scaleX(倍数) 水平方向缩放
scaleY(倍数) 垂直方向缩放
scale(倍数) 双方向的缩放 相当于scaleX和scaleY的合并
*/
#d1{
width: 1800px;
height: 1800px;
background-image: url(images/气泡.jpg);
margin: 50px auto;
}
#d1:hover{
/* 沿着x轴平移 但是如果不设置过渡 则可以瞬间完成 */
transition:2s ;
/* transform: translateX(100px)translateY(200px); */
/* 沿着z轴平移需要使用perspective函数先开启视距 否则无效 */
transform:perspective(500px) translateZ(500px);
/* 测试旋转 */
/* transform: rotateX(90deg) rotateY(0.5turn) rotateZ(0.5turn); */
/* 测试缩放 */
/* transform: scaleX(2) scaleY(0.5) scaleZ(2); */
/* transform: scale(2); */
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
1129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
