样式分类-内联样式
<!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>