目录
3.浮动的元素会具有行内块元素的特性，即默认宽度由内容决定，同时支持指定高宽，盒子之间无空隙
盒子模型
1.盒子模型的内容
(1)外边距(margin)：盒子与其他元素之间的额距离
(2)内边距(padding)：也称为填充距离,内容和边框之间的距离
(3)边框(border)：围绕内边距和内容的边框
(4)内容(content):显示文本和图像等、
2.盒子模型的总宽度和总高度
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
3.盒子模型的相关属性
边框属性（border）
- 样式（border-style: ;）
- 宽度（border-width: ;)
- 颜色（border-color: ;）
- 圆角边框（border-radius: ;）
- 图片边框（border-images: ;）
内边距属性（padding）
- 上边距（padding-top: ;）
- 下边距（padding-bottom: ;）
- 左边距（padding-left: ;）
- 右边距（padding-right: ;）
外边距属性（margin）
- 上边距（margin-top: ;）
- 下边距（margin-bottom: ;）
- 左边距（margin-left: ;）
- 右边距（margin-right: ;）
背景属性（backgroud）
- 背景颜色（background-color: ;）
- 背景图像（background-image: ;）
- 背景图像起始位置（background-position: ;）
- 背景图像重复（background-repeat: ;）
- 背景图像固定或滚动（background-attachment: ;）·
阴影属性（shadow）
- 元素阴影（box-shadow: ;）
- 文本阴影（text-shadow: ;）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>title</title> <style> #border1{ border-style: solid dotted dashed double; border-width: medium 5px thick 10px; border-color: green #f00 rgb(0,0,255) hsl(0,60%,30%); border-radius: 10px; padding: 30px 30px 30px 30px; margin: 30px 20px 30px 20px; background-color: aquamarine; background-position: 50% 50%; background-repeat: repeat-y; box-shadow: 5px 5px 10px 1px yellow; } </style> </head> <body> <P id="border1">border example</P> </body> </html>
浮动
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
选择器{float:属性值;}
<!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>title</title>
<style>
.left{
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.right {
float: right;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="left">左</div>
<div class="right">右</div>
</body>
</html>
浮动特性
1.浮动元素会脱离标准流（脱标）
<!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>title</title>
<style>
.left{
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.right {
width: 300px;
height: 300px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<div class="left">左</div>
<div class="right">右</div>
</body>
</html>
2.浮动的元素会一行内显示并且元素内部对齐
3.浮动的元素会具有行内块元素的特性，即默认宽度由内容决定，同时支持指定高宽，盒子之间无空隙
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<style>
* {
margin: 0px;
}
span,div {
float: left;
width: 200px;
height: 100px;
background-color: pink;
}
p {
float: right;
height: 200px;
background-color: paleturquoise;
}
</style>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div>div</div>
<p>pppppppppp</p>
</body>
</html>
浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局第一准侧。
定位
静态定位position:static
默认定位方式
相对定位position:relative
相对于自己原来位置，脱离标准流，移动之后，移动之前的位置仍然占有
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<style>
.o {
/*position: relative;
left: 50px;
top: 50px;*/
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="o">a </div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<style>
.o {
position: relative;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div class="o">a </div>
</body>
</html>
绝对定位position:absolute
他的参照物是先寻找自己父级除了static之外的有定位的，如果父级无其他定位，以浏览器为参照物。可以通过top，bottom，left，right移动位置也可以通过z-index设置层级。脱离标准流，移动之后，移动之前的位置不存在。
子绝父相，我们在使用绝对定位时一般都给父亲设置一个相对定位。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<style>
.box1 {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background-color: paleturquoise;
}
</style>
<body>
<div class="box1">
<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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<style>
.box1 {
position: relative;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background-color: paleturquoise;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
可以看出box2以父级box1为参照定位
固定定位position:fixed
可以通过top，bottom，left，right移动位置也可以通过z-index设置层级。脱离标准流。相对于浏览器设置，一般用于导航栏，浏览器拖动，fixed定位不动。如果遇到定位层级关系，可以通过z-index设置层级高低。不设置默认为0。
伪类
动态伪类
- :link 链接没有被访问前的样式效果
- :visited 链接被访问后的样式效果
- :hover 鼠标悬停在元素上的样式效果
- :active 点击元素时的样式效果
- :focus 元素成为焦点时的样式效果
结构伪类
- :first-child 选择某个元素下的第一个子元素
- :last-child 选择某个元素下的最后一个子元素
- :nth-child() 选择某个元素下的一个或多个特定的子元素
- :nth-last-child() 选择某个元素的一个或多个特定的子元素，从后往前数
- :nth-of-type() 选择指定的元素
- :nth-last-of-type() 选择指定的元素，从后往前数
- :first-of-type 选择一个父级元素下的第一个同类型子元素
- :last-of-type 选择一个父级元素下的第一个同类型子元素，从后往前数
- :only-child 选择的元素是它父元素的唯一 一个子元素
- :only-of-type 选择一个元素是上级元素下唯一相同类型的子元素
- :empty 选择的元素里面没有任何内容（空标签）
否定伪类
- :not( ) 排查或过滤掉特定元素
状态伪类
- :enabled 选择匹配指定范围内所有可用UI(用户界面)元素
- :disabled 选择匹配指定范围内所有不可用UI(用户界面)元素
- :checked 选择匹配指定范围内所有可用UI(用户界面)元素
目标伪类
-
:target 选择匹配父元素的所有元素，且匹配元素被相关URL指向
伪元素
CSS 伪元素用于设置元素指定部分的样式
它可用于：
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
伪元素列表
-
::after p::after 在每个 <p> 元素之后插入内容。
-
::before p::before 在每个 <p> 元素之前插入内容。
-
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
-
::first-line p::first-line 选择每个 <p> 元素的首行。
-
::selection p::selection 选择用户选择的元素部分。
::before ::after
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<head>
<style>
p::before{content:"【"}
P::after{content: "】";}
</style>
</head>
<body>
<p>阿巴阿巴</p>
</body>
</html>
注：::before和::after来添加的内容是不可以被鼠标选中的
::first-letter
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
p::first-letter{color: rgb(233, 55, 55);font-size: 25px;}
</style>
</head>
<body>
<p>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
</body>
</html> 
::first-line
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
p::first-line{color: aqua;font-size: 20px;}
</style>
</head>
<body>
<p>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
</body>
</html>
课后总结补充
1.块级元素、行内元素、行内块元素
- 块级元素：默认独占一行，宽度不设置默认为父级元素的100%（display：block；）
- 行内元素：不单独换行，宽度由内容撑开（display：inline；）
- 行内块元素：二者性质兼备，和其它元素在一行且宽高可设置（display：inline-block；）
伪元素默认为行内元素，需要用display更改
2.静态伪类link（超链接访问前的样式效果），visited（超链接访问后的样式效果）仅适用于超链接
3.position:sticky（粘性定位）：根据用户的滚动位置进行定位，在相对和固定之间切换
先相对定位，随着滚动移到设置的位置后拥有粘性，不再随滚动移动位置
4. z-index
设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。仅能在定位元素上奏效（例如 position:absolute;）
81
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
