样式分类-内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式写法分类第一种-内联样式</title>
</head>
<!-- 内联样式： 就是将样式写在元素的开始标签里的style属性中
div:
宽度： 默认是撑满父元素的内容区宽度
高度： 默认自己的内容区的文字撑起来的高度
可以自定义div的宽与高 width&height
拓展： 插件live server的使用 一个简易的服务器插件，默认端口号是5500
该插件可以使用浏览器打开html等文件，并且实时刷新功能
-->
<body>
<div style="border: 5px dotted red;width: 500px;height: 300px;">中有div1</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>内部样式表的写法</title>
<style>
#d1 {
background-color: pink;
width: 500px;
height: 200px;
}
#d2 {
background-color: aqua;
width: 500px;
height: 100px;
}
</style>
</head>
<!-- 内部样式表： 是将样式写在head的子元素style里。
此时需要选择器来定位你要设置样式的元素
语法：
选择器{
属性：值;
······
}
-->
<body>
<div id="d1">前有div</div>
<div id="d2">中有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>
<link rel="stylesheet" href="./css/my.css">
<!-- rel指定文件类型，href指定文件的位置 -->
</head>
<!--
外部样式表： 将样式单独封装到一个文件中，文件拓展名为.css
然后使用link标签，将样式文件引入该HTML页面中
-->
<body>
<div id="d1">div1</div>
<div id="d2">div2</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>标签选择器</title>
<style>
/* 标签选择器： 也称元素选择 */
p {
font-size: 20px;
color: pink;
}
div {
/* border-inline-xxx xxx可以说width，color，style设置左右边框大小，颜色，线条
border-block-xxx 设置上下边框大小，颜色，线条
常用的线条：
solid： 实线
dotted： 点虚线
double： 双线条
*/
border-inline-style: solid;
/*线条*/
border-inline-width: 2px;
border-inline-color: aqua;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>前有段落</p>
<div>div1</div>
<p>中有段落</p>
<div>div2</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>类选择器的学习</title>
<style>
/* 类选择器是以小圆点开头的样式选择器，小圆点后面是具体的class名称 */
.c1 {
font-size: 20px;
color: pink;
}
.c2 {
font-size: 30px;
color: blue;
}
.c3 {
font-style: italic;
}
.c4 {
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<!-- 每个元素都有class属性。 不同元素的class的值可以相同，表示同一类的元素
class的值可以有多个，使用空格隔开。 -->
<div class="c1">div1</div>
<p class="c2 c3">前有段落</p>
<h1 class="c1">标题1</h1>
<p class="c4">中有段落</p>
</body>
</html>基本选择器-id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器的学习</title>
<style>
/* id选择器必须使用#作为开始符号，紧跟着id具体值
id相当于身份证号，id不可重复
与class的区别：
1. 在属性上的区别：class可以重复
2. 在选择器以上的区别：class选择器以.开头，id选择器以#开头 */
#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">段落</p>
</body>
</html>基本选择器-通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器的学习</title>
<style>
/* 通配符选择器就是*选择器 表示所有的元素都被选中*/
#d1 {
width: 300px;
height: 200px;
background-color: aquamarine;
}
.c1 {
color: yellowgreen;
}
* {
font-size: 50px;
}
</style>
</head>
<body>
<div id="d1" class="c1">div1</div>
<p class="c1">段落1</p>
<h1 class="c1">标题1</h1>
</body>
</html>复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器的测试</title>
<style>
/* 交集选择器：
选择器1选择器2选择器3{······}
将上述多个选择器中共同选中的标签设置样式
*/
.c1#p1 {
color: blue;
}
p.c1#p1 {
font-size: 50px;
}
/* 并集选择器; 多个选择器的名字，用逗号隔开 */
#s1,
.c4,
#d3 {
color: brown
}
</style>
</head>
<body>
<h1>测试</h1>
<div class="c1">div1</div>
<div class="c1">div2</div>
<p class="c1" id="p1">段落1</p>
<p class="c2">段落2</p>
<hr>
<h1>并集选择器的测试</h1>
<span id="s1">用户名重复</span><br>
<span class="c3">密码不正确</span>
<p class="c4">段落3</p>
<div id="d3">div3</div>
</body>
</html>关系选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关系选择器</title>
<style>
/* 父亲>儿子儿子中的个别选择选择器之间有大于号
祖先 后代后代全部选择选择器之间用空格隔开
兄+弟哥哥的弟弟被选择(弟弟必须严格相邻哥哥)选择器之间用+隔开
兄~弟哥哥的符合条件的所有弟弟被选择选择器之间用波浪线隔开
*/
/* 父子选择器：通过父亲选择儿子
父>子 {}
父子选择器演示
*/
div>span {
color: aqua;
}
/* 后代选择器：通过祖先选择后代
祖先 后代{}
*/
/* div span {
color: red;
} */
div p span {
color: red;
}
/* 兄+弟选择器：通过兄长选择紧邻的弟弟
兄+弟{}
*/
div+span {
color: greenyellow;
}
/* 兄~弟选择器：通过兄长选择符合条件的所有弟弟
兄~弟{}
*/
div~span {
background-color: pink;
}
</style>
</head>
<body>
<div>
我是div
<p>
我是div中的p
<span>我是p中的span</span>
</p>
<div>我是div中的div</div>
<span>我是div中的span1</span>
<span>我是div中的span2</span>
</div>
<span>我是div之外的span1</span>
<span>我是div之外的span2</span>
</body>
</html>属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器的学习</title>
<style>
/* 属性选择器有五种：
[属性名]：选中具有指定属性名的元素
[属性名=属性值]：选中指定属性名等于某属性值的元素
[属性名^=属性值]：选中指定属性名是以指定属性值开头的元素
[属性名$=属性值]：选中指定属性名指定属性值结尾的元素
[属性名*=属性值]：选中指定属性名和含有指定属性值的元素
*/
[title] {
color: aqua;
}
[title="a"] {
color: blue;
}
[title^="a"] {
color: yellow;
}
[title$="c"] {
color: pink;
}
[title*="b"] {
color: brown;
}
</style>
</head>
<body>
<h1 title="a">《出塞》</h1>
<h2 title="ab">唐·王昌龄</h2>
<p title="abc">秦时明月汉时关，</p>
<p title="abab">万里长征人未还。</p>
<p title="c">但使龙城飞将在，</p>
<p>不教胡马度阴山。</p>
</body>
</html>伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器的学习</title>
<style>
/* 伪元素：虚假的元素，并不存在，只是css为了对段落进行设置，提供的内置选择器
p::first-letter 对段落首字符设置样式
p::first-line 对段落首行设置样式
p::selection 对段落选中的设置样式
p::before 对段落第一个字符之前设置样式,向段落前插入
p::after 对段落最后一个字符之后设置样式，向段落后插入
*/
p::first-letter {
font-size: 30px;
color: darkblue;
}
/* 兄弟选择器+首行 */
p+p::first-line {
background-color: pink;
}
p::selection {
color: brown;
background-color: aqua;
}
p::before {
content: "你好";
color: blueviolet;
}
p::after {
content: "$";
background-color: darkorange;
}
</style>
</head>
<body>
<p>hello</p>
<p>world,我们要相信明天会更好。</p>
</body>
</html>伪类选择器-元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器的学习</title>
<style>
/* first-child ： 第一个子元素被选中*/
/* div p:first-child {
color: red;
} */
/* div中最后一个子元素被选择 */
/* div p:last-child {
color: green;
} */
/* div的孩子中偶数为 */
/* div :nth-child(2n) {
color: rgb(104, 19, 201);
} */
/* div奇数位 */
/* div :nth-child(2n+1) {
font-size: 30px;
} */
/* 选中同一类型的第一个元素，不同层级的第一个 */
/* p:first-of-type {
color: red;
} */
/* 选中同一类型的最后一个元素，不同层级的最后一个 */
/* p:last-of-type {
color: blue;
} */
/* 选中同一类型的奇数位元素 不同层次的奇数位*/
p:nth-of-type(2n+1) {
color: aquamarine;
}
</style>
</head>
<!--
常用的的伪类选择器：
：first-child ： 分支末尾层，第一个子元素被选中
：last-child ： 分支末尾层，最后一个子元素被选中
：nth-child(n) ： 第n个子元素被选中
：nth-child(2n) ： 偶数个子元素被选中
：nth-child(2n+1) ： 奇数个子元素被选中
注意： 使用伪类选择器时，注意空格的问题。优先使用带个空格的形式。
：first-of-type： 同类型中的第一个元素
：last-of-type： 同类型中的最后一个元素
：nth-of-type(n)： 同类型中的第n个元素 2n/even表示偶数。2n+1/odd表示奇数
注意： 上述无空格
-->
<body>
<div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<div>
<p>段落mix</p>
</div>
</div>
<div>div2
<p>段落5</p>
<p>段落6</p>
</div>
<div>div3</div>
</body>
</html>伪类选择器-否定伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>否定伪类选择器的学习</title>
<style>
/* p中都变红，排除第一个和最后一个
注意：如果带child关键字的伪类选择器，与其他的伪类选择器共同使用，冒号前无需空格*/
p:not(:first-child):not(:last-child) {
color: red;
}
</style>
</head>
<!--
：not（其他选择器）： 注意，括号不能传入复合选择器
作用：将其他选择器选中的元素排除。
-->
<body>
<div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</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>超链接的伪类选择器的学习</title>
<style>
/* 超链接访问前的设置 */
a:link {
color: red;
}
/* 超链接访问后的设置 */
a:visited {
color: blue;
}
/* 悬停状态 */
p:hover {
color: rgb(14, 148, 14);
}
/* 点击状态 */
p:active {
font-size: 30px;
}
</style>
</head>
<!--
：link ： 超链接独有的选择器，未访问过的链接
：visited ： 超链接独有的选择器，访问过的链接
：hover ： 超链接独有的选择器，鼠标悬停，进入该元素的状态
：active ： 超链接独有的选择器，点击超链接
-->
<body>
<div>
<a href="https://www.baidu.com">网站1</a><br>
<a href="https://www.taobao.com">网站2</a>
<p>段落 </p>
</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>优先级演示</title>
<style>
/* 内联样式>id选择器>类和伪类选择器>默认样式 */
#d1 {
width: 200px;
height: 200px;
background-color: red
}
/* 类选择器不会覆盖id选择器 优先级低 */
.c1 {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div id="d1" class="c1" ;>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>样式继承的演示</title>
<style>
/* 父子元素共用 */
.outer {
font-style: italic;
font-size: 30px;
color: red;
width: 300px;
height: 300px;
background-color: aqua;
}
.inner {
border: 1px solid red;
width: 300px;
height: 300px;
}
</style>
</head>
<!-- CSS针对于样式继承的设计，是为了减少开发过程中的代码量，使子元素具有父元素的一些样式
父元素设计好的样式，子元素无需重复设置
例如 风格字体，大小，颜色 但是某些样式继承不了，例如 背景布局等样式
-->
<body>
<div class="outer">前有div
<div class="inner">
中有div
</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>单位的讲解</title>
<style>
/* 单位：
最基本的单位：像素 即屏幕上的分辨率 1920x1080 ，表示器有这么多像素点
一个点就是一个像素
百分比单位：是子元素针对父元素的百分百。会随着父元素的属性改变而改变
em单位：是相对单位，相对本元素的字体大小
1em=1font-size
rem单位：也是相对元素，相对整个页面的根元素的字体大小
*/
html {
font-size: 50px;
}
.outer {
/* font-size: 32px; */
/* outer里面像素根据页面元素调整 后续子元素inner依旧调整 2rem=400px */
font-size: 2em;
width: 800;
height: 400px;
background-color: rgb(44, 171, 72);
}
.inner {
font-size: 50px;
width: 50%;
height: 50%;
background-color: rgb(153, 163, 55);
}
div div:last-child {
/* 由于默认32px（父元素规定） 2em=2个32px 因此是64px */
font-size: 2em;
/* 因为本元素字体为2em 像素为64px
设计边框使用1em，相对本元素字体大小，因此1em=64px */
border: 1em solid rgb(255, 0, 0);
}
/* /颜色的单位 rgb */
</style>
</head>
<body>
字体元素
<div class="outer">你好 CN
<div class="inner">div</div>
<div>see you</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>内边距的演示</title>
<style>
.c1 {
width: 200px;
height: 200px;
border: 2px solid red;
/* padding-top: 10px; */
/* padding-right: 15px; */
/* padding-bottom: 20px; */
/* padding-left: 25px; */
/* 上 右 下 左 */
/* padding: 10px 15px 20px 25px; */
/* 上 左右 下 */
/* padding: 10px 15px 20px; */
/* 上下 左右 */
/* padding: 10px 15px; */
/* 上下左右 */
padding: 10px;
}
.c2 {
background-color: blueviolet;
width: 150px;
height: 150px;
border: 2px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></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>盒模型的边框</title>
<style>
/* 边框：有三个维度属性来决定样式： 宽 颜色 样式 属性如下：
border-width:
border-color:
border-style:
每个属性可以拆分为四个对应的小属性，就是上下左右边框的宽，颜色，线条。
属性名格式：boeder-xxx-width
属性名格式：boeder-xxx-color
属性名格式：boeder-xxx-style xxx分别是：top bottom left right
*/
div {
/* 宽和高控制内容区的宽度和高度 */
width: 200px;
height: 200px;
/* 设置内边距 */
padding: 5px;
/* 设置边框*/
/* border-width: 5px 10px 15px 20px; */
/* border-width: 10px 15px 20px; */
/* border-width: 10px 15px; */
/* border-width: 10px; */
/* border-color: red; */
/* border-style: dashed; */
/* 使用border属性来代替三个维度的属性设置样式
三个维度的属性值顺序没有要求
*/
border: red 10px dashed;
}
</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>盒模型的外边距</title>
<style>
/* 外边距：设置的是元素周围的距离，一边用来决定元素在页面的位置
外边距由四个方向的属性来控制
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
也可使用一个属性margin来设置四个方向上的距离
margin：上 右 下 左
margin：上 左右 下
margin：上下 左右
margin：上下左右
*/
.outer {
border: 5px solid red;
width: 800px;
height: 800px;
padding: 0px;
}
.inner {
border: 10px solid black;
width: 200px;
height: 200px;
/* margin-top: 50px;
margin-left: 100px; */
/* 一个属性设置外边距 */
/* margin: 50px 100px 50px 100px; */
/* 上下 左右 分别设置外边距
默认情况确定方向由上左决定 至少两个值*/
/* 通常，左右可以使用百分比和auto（默认） 上下不能使用 */
/* margin: 50px 50%; */
/* 左右居中 1、自己算 2.auto 默认 */
margin: 50px auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</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>盒模型的外边距</title>
<style>
/*
盒模型的水平布局：
水平布局必须满足以下等式：
左右水平外边距+左右边框+内容区+左右内边距
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width
第一种情况：都为固定值，没有auto值
则自动调整右外边框使等式成立
第二种情况：有auto值。width，margin-lift，margin-right
如果宽是auto，则自动调整width，使等式成立、
如果宽不是auto，剩下的属性调整是auto的选项，使等式成立
如果两个都是auto，则两项相同调整，使等式成立
盒模型的垂直布局：
只需要调整上下外边距 上下边框的宽（厚度）上下内边距依据hight
overflow::
visble: 可见 默认值
hiddenl: 隐藏（溢出部分）
scroll： 添加滚动条
auto： 根据是否溢出，自动添加滚动条
*/
.outer {
width: 800px;
height: 500px;
background-color: rgb(225, 108, 192);
overflow: auto;
}
.inner {
border: black 5px solid;
width: 400px;
height: 300px;
padding: 0px;
margin-top: 45px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></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>
/* 因为块元素都是独占一行的，所以外边距重叠现象不会发生
只有上下外边距可能发生重叠
1. 兄弟之间的外边距重叠：
两个值都是正值，取较大值
两个值一正一负，取两者的和，可重合
两个值都是负数，取绝对值较大的，一定重叠
注意：兄弟之间的外边距重叠，不是问题，根据情况去设定即可
2. 父子之间的外边距重叠：
子元素的上外边距传递给了父元素，使父元素距离他的父元素的上外边距也发生变化
致使父元素位置发生改变。因此出现问题，需要解决
解决： 父元素只需要设置border属性即可
*/
.outer {
border: 1px solid red;
background-color: yellow;
width: 600px;
height: 500px;
margin: 0 auto;
}
.in1,
.in2 {
width: 200px;
height: 200px;
border: 5px solid blueviolet;
}
.in1 {
background-color: black;
margin-bottom: -20px;
/* 父子之间的外边距重叠 */
margin-top: 100px;
}
.in2 {
background-color: aqua;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="in1"></div>
<div class="in2"></div>
</div>
</body>
</html>行内元素的盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=S, initial-scale=1.0">
<title>Document</title>
<style>
/* 行内元素的盒模型的特点：
内容区不能使用width和height属性设置，不生效，内容区的宽度和高度都由文字撑起来
padding，border，margin左右生效，上下不生效
要求行内元素像块元素一样，各种属性都可以设置生效，
需要使用display属性，在行内元素中设置其值为block
拓展：
diaplay：
none：隐藏消失，不占用页面布局空间
block： 将行内元素当成块元素设置样式
inline： 将块元素当成行内元素设置样式
inline-block： 将设置的元素既有行内样式也有快样式
*/
#s1 {
width: 300px;
height: 200px;
border: 10px solid red;
padding: 20px;
margin: 50px;
/* 设置display的值为block，那么块元素样式元素都生效
宽与高也生效，而且有独占一行的特点、
*/
display: block;
}
div div {
color: blue;
width: 200px;
height: 100px;
/* 将display的值设置了inline，那么块元素就具备了行内元素的特点
宽，高，上下外边框，上线边框，上下内边框时效，且不再独占一行
*/
/* display: inline; */
/* 将diaplay的值设置了inline-block，那么该元素同时具备了块元素和行内元素的特点*/
display: inline-block;
}
#d1 {
background-color: yellowgreen;
}
#d2 {
background-color: rgb(99, 51, 19);
}
</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>css的默认样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=S, initial-scale=1.0">
<title>css的默认样式</title>
<!-- /* reset.css： 该文件的作用，是取消几乎所有元素的默认样式 */
/* normalize.css: 该文件的作用，是设置一些通常的尺寸 */ -->
<link rel="stylesheet" href="./css/reset.css">
<style>
/* 通常情况，所有的html都有自己的默认样式，比如body的8px
因此我们写的标签，并不是仅仅贴着显示器左边框和上边框的
默认样式会影响我们设计的布局
此时，我们需要取消默认样式，但是每个元素都有默认样式，
因此不能使用一个选择器就完成所有的默认样式取消
*/
/* 例如 通配符选择器 但是太过麻烦
* {
margin: 0px;
padding: 0px;
} */
div {
border: 10px solid red;
height: 100px;
width: 100px;
}
</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>浮动的特点</title>
<style>
/* 浮动的特点：
1. 浮动元素脱离文档流，可以向左右移动
属性：
float: 可选值
-none： 不浮动
-left； 左浮动
-right： 右浮动
2. 浮动元素不会超出父元素的边框
3. 元素一旦设置浮动，下面还没设置浮动的兄弟元素会向上移动
4. 浮动元素的哥哥没设置浮动，该浮动元素不会浮动到哥哥元素左右
如果哥哥也设置浮动，那么该元素最多和哥哥一样高。
5. 浮动元素不再满足水平布局的绝对等式
*/
#outer {
width: 800px;
height: 600px;
background-color: rgb(225, 108, 192);
margin: auto;
}
.box1,
.box2,
.box3 {
width: 200px;
height: 200px;
}
.box1 {
background-color: rgb(255, 0, 0);
float: right;
}
.box2 {
background-color: rgb(0, 255, 0);
float: left;
}
.box3 {
background-color: rgb(0, 0, 255);
float: right;
}
</style>
</head>
<body>
<div id="outer">
<div class="box1">qwertyuio</div>
<div class="box2">asdfghjkl</div>
<div class="box3">zxcvbnm</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>浮动元素的其它特点</title>
<style>
/* 脱离文档流以后，不需要再区分块和行内了 */
.box1 {
/* 默认浮动块元素宽与高被内容撑起来
也可以设置具体的宽和高，如下 */
width: 100px;
height: 100px;
background-color: rgba(155, 24, 24, 0.644);
/* 浮动和居中冲突，居中失效 */
/* margin: 0 auto; */
float: left;
/* 设置浮动之后，文字围绕div，不会覆盖 */
}
span {
/* 行内元素，设置浮动，则不具备行内元素的独有特点
而是，可以设置各种属性 */
float: left;
width: 300px;
height: 300px;
border: 1px solid red;
/* 行高属性可以使文字居中 */
line-height: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>凭立窗前望雪。雪花在天地间不急不慢地漫扬，雪花在玻璃外面如粉如绒，急的时候如白线，就如同流动的窗帘花，又像是瀑布，还似是幕布挂满窗帘，煞是好看。雪花在风的吹拂下，时而袅袅飞来，时而飘然而去，看着、看着，雪花不由得飘到了窗前，忽一阵风又把她招回去了。当你索性推开窗子，这时候有的雪花像是心有灵犀似的，真就探头探脑地进来了，与你来一次亲密接触；有的雪花探探头又缩回去了，这便更增添了望雪的兴致。乘着兴致你不妨走下楼去，仰头望向天空，沐浴在雪中，这种感受又不同了，这是雪对你最亲密地、频繁地接触，四周的雪花都会纷纷向你扑来，凉飕飕的雪花冷不丁地拍打在脸上、身上，感怀却在心里，此时的你定会感到幸福的。雪花的节奏时而明快、时而舒缓，时而不缓不疾，多么浪漫、多么惬意，沐浴在雪中，总会使人感慨万千，也总会令人心旷神怡。 每日睁开眼，世界都是单调的一色，没有鸟鸣，没有温和，一颗心被紧紧地包裹在厚重的棉衣下，躯体时时刻刻都在寻求温暖的路上奔波。我们都在冬季寻求着温暖的慰藉，殊不知，最荒芜，最寒冷的莫过于心灵。心若有梦，又岂惧这寒冷的冬季。想想明朝大儒宋濂，从小家境贫寒，只能把别人的书借回来手自笔录，记日以还，然后再苦学。尤其读到他求学的过程时，每每让人感动落泪，大冬天，砚台都结了冰，手指都被冻的麻木了，他从来不敢懈怠。正是这种不畏寒冷，刻苦学习的精神，才使他观遍全书。成人之后，他又长途跋涉去外乡求学，负箧曳屣，行深山巨谷中，穷冬烈风，大雪深数尺，足肤皲裂而不知。至舍，四支僵劲不能动，媵人持汤沃灌，以衾拥覆，久而乃和。寓逆旅，主人日再食，无鲜肥滋味之享。同舍生皆被绮绣，戴朱缨宝饰之帽，腰白玉之环，左佩刀，右备容臭，烨然若神人；余则袍敝衣处其间，略无慕艳意。以中有足乐者，不知口体之奉不若人也。我们的古人给我们留下着太多的财富，而我们却往往把这一切当作是不可能再实现的传说，眼观四周，人心浮躁的让人惊叹。
</p>
<div class="box2">aaaaaa</div>
<span>我是一个span</span>
</body>
</html>高度坍塌问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度坍塌问题</title>
<style>
/*解决父元素高度坍塌问题的有四种方式，第四种最优解
1.给父元素设置高度，违背高度撑起意愿
2.给父元素设置overflow:hidden。BFC概念
3.给父元素设置内容末尾添加一个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>内置样式clearfiix
<!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>相对定位的演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位的演示</title>
<style>
/* 相对定位的概念： position属性的值为relative时
1. 如果设置了相对定位，没有改变偏移量，则元素不会移动
2. 相对的位置是元素所在文档流的位置。
3. 设置了相对定位的元素，不会脱离文档流
4. 设置了相对定位的元素提高了自己的层级
5. 设置了相对定位的元素，本身的性质不会改变，块依旧是块元素，行内依旧是行内元素
偏移量:
top: 数值正值,向下移动
bottom: 数值正值，向上移动
left: 数值正值，向右移动
right: 数值正值，向左移动
*/
.box1,
.box2,
.box3 {
width: 300px;
height: 300px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: blue;
/* 开启相对定位 相对于之前在文档流的位置 */
position: relative;
/* 设置偏移量 */
top: 100px;
left: 100px;
}
.box3 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></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>绝对定位的演示</title>
<style>
/* 绝对定位 ，当position的值为absolute时，元素脱离了文档流，
1. 如果设置了绝对定位，不改变偏移量，则该元素不会移动
2. 设置了绝对定位的元素会脱离文档流,下面的兄弟未设置浮动或定位，则会上移动
3. 设置了绝对定位的元素的位置是相对于所在的包含块。
4. 设置了绝对定位的元素的性质会发生改变。 行内元素变成块元素， 此时所有的元素宽和高默认都是内容撑开的。
5. 设置了绝对定位的元素提高了层级。
包含块：
如果设置了绝对定位，那么该元素是相对于距离他最近的设置了相对定位的祖先块元素。
如果所有的祖先块元素都没有设置定位，那么就是相对HTML这个根元素来说的。
建议：包含块，尽量设置相对定位，相对定位不会脱离文档流（好用）
简而言之，最近的开启相对定位的祖先快成为包含块
HTML：所有元素的初始包含块
*/
.box1,
.box4 {
width: 200px;
height: 200px;
}
.box1 {
background-color: red;
}
.box4 {
background-color: blue;
/* box2想要相对box4进行绝对定位，因此box4必须开启相对定位 */
position: absolute;
}
.box3 {
background-color: rgb(132, 255, 0);
}
.box5 {
width: 150px;
height: 150px;
background-color: green;
}
.box2 {
width: 100px;
height: 100px;
background-color: pink;
/* 开启绝对定位，注意，相对的是它的包含块，包含块必须开启相对定位 */
position: absolute;
left: 50px;
top: 50px;
}
.box3 {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">
<div class="box5">
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</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>固定定位的演示</title>
<style>
/*
固定定位的学习：
当position的值设置为fixed时，就是开启了该元素的固定定位
固定定位的特点：
1. 固定定位也是一种绝对定位，特点和普通的绝对定位差不多
2. 固定定位的位置是相对于当前浏览器的视口(viewport)来说的
因此，固定定位的元素不会随着滚动条去滚动。
比较适合广告位的设置。
*/
.box1 {
width: 200px;
height: 200px;
position: fixed;
background-color: blueviolet;
left: 100px;
top: 100px;
}
.box2 {
width: 200px;
height: 2000px;
background-color: brown;
}
.box3 {
width: 200px;
height: 200px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>粘滞定位的演示
<!DOCTYPE html>
<html lang="">
<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>
/*
粘滞定位的学习：
当position的值为sticky时，则开启的元素的粘滞定位
粘滞定位的特点：
1. 粘滞定位的特点和相对定位的特点差不多。
2. 粘滞定位的不同之处，在于当到达某一个固定位置时，粘住不动。
3. 注意： 粘滞定位不能超出父元素的范围，否则粘滞效果消失。
*/
.box1 {
width: 200px;
height: 200px;
background-color: blueviolet;
}
.box2 {
width: 200px;
height: 200px;
background-color: brown;
position: sticky;
/* 当元素移动到距离视口顶端50px时，则被粘住，不动*/
/* 偏移量相对视口的设置 */
top: 50px;
left: 200px;
}
.box3 {
width: 2000px;
height: 2000px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>z-index属性的演示
<!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>
/*
属性: z-index 是用来设置定位元素的层级的。
值越大，层级越高
兄弟元素：
z-index的值越大，层级越高
父子元素：
父元素的z-index的值再大，也不会覆盖子元素(也不会高过子元素的层级)
*/
.box1 {
width: 200px;
height: 200px;
background-color: black;
position: absolute;
}
.box2 {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 50px;
top: 50px;
z-index: 2;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="box3"></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>动画的过渡演示</title>
<style>
/* 动画的过渡
transition-property: 指定过渡的属性名称，多个属性有逗号隔开
transition-duration: 指定过渡的持续时间，单位是s/ms
transition-timing-function: 过度函数 指定过渡的动画曲线
ease： 先加速再减速
linear： 匀速
ease-in： 加速
ease-out： 减速
ease-in-out： 先加速再减速
transition-delay: 指定过渡的延迟时间
transition: 指定过渡的属性名称，持续时间，曲线，延迟时间
也可以使用transition简写属性来设置多个属性的值，减少代码，增加可读性
*/
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 3s linear 2s, height 3s linear 2s;
}
</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>
#outer {
width: 800px;
height: 500px;
background-color: rgb(52, 120, 180);
margin: 0 auto;
}
#inner {
width: 100px;
height: 100px;
background-color: rgb(217, 94, 94);
/*由于动画设置的是偏移量的改变，因此需要开启该元素的相对定位 */
position: relative;
/* 用于选定名字*/
/* animation-name: run; */
/* 运行时间 */
/* animation-duration: 3s; */
/* 运行方式 */
/* animation-timing-function: ease-in; */
/* 延迟时间 */
/* animation-delay: 2s; */
/* 运行次数 */
/* animation-iteration-count: infinite; */
/* 动画方向: normal: 正常 reverse: 反向
alternate: 奇数次正，偶数次反
alternate-reverse: 奇数次反，偶数次正*/
/* animation-direction: normal; */
/* 动画填充模式:结束的位置 forwards: 结束时保留 backwards: 结束时隐藏 */
/* animation-fill-mode: forwards; */
/* 使用一个属性animation，来设置上述多个属性的值 */
/* 关键帧 运动数据 运动速度曲线 延迟 次数 运行方向 运动的填充 */
animation: run 10s linear 2s infinite normal forwards;
}
/* 设置关键帧
0%相当于from 100%相当于to 百分百选整数 */
@keyframes run {
0% {
left: 0px;
top: 0px;
}
40% {
left: 700px;
top: 400px;
}
60% {
left: 0px;
top: 400px;
}
100% {
left: 700px;
top: 0px;
}
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></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>动画变形</title>
<style>
/* 动画的变形：3D转换，属性是transform
对应的值有三类：
第一类：平移
translate(像素)
translateX(像素)：x轴，正值向右
translateY(像素)：y轴，负值向左
translateZ(像素)：z轴，正值突脸方向
第二类：旋转
rotateX(角度)：x轴轴心旋转
rotateY(角度)：y轴轴心旋转
rotateZ(角度)：z轴轴心旋转
第三类：缩放
scaleX(倍数)：水平方向缩放
scaleY(倍数): 垂直方向缩放
scaleZ(倍数): z轴轴心缩放
scale(倍数)：水平垂直方向同时缩放
*/
*/
#d1 {
width: 200px;
height: 200px;
background-image: url(./images/2.jpg);
margin: 20px auto;
}
#d1:hover {
transition: 3s;
/* 沿着x轴平移 不设置过渡瞬间完成，看效果可以设置时间*/
/* transform：translateX（100px） translateY（200px）*/
/* 沿着Z轴平移 需要使用perspective函数，先开启视距 否则没效果 */
/* transform: perspective(500px) translateZ(200px); */
/* 旋转测试 */
/* transform: rotateX(90deg) rotateY(0.55turn) rotateZ(180deg); */
/* 测试缩放 */
/* transform: scaleX(2) scaleY(2) scaleZ(2) */
transform: scale(2);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
1568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
