1.伪元素选择器
在CSS中，伪元素是一种用于选择和样式化元素的特定部分的工具。它们允许你为元素的某些部分设置样式，而不是整个元素。伪元素以双冒号（::）开头，以区别于伪类，伪类以单冒号（:）开头。
伪元素是虚假的元素，实际上是没有的，但是CSS为了方便设置一些样式，默认提供的，一般都用在段落标记中。
以下是一些常见的伪元素及其作用：
案例代码：
<body>
<div>
<p>hello</p>
<p>world,我们要相信明天会更好。
</p>
</div>
</body>(1)::before：在元素内容第一个字符之前插入内容
注意：必须和content配合使用！！！
p::before {
content: "你好";
color: aquamarine;
}运行结果：在p段落中的第一个字符的前面插入字符串“你好”
(2)::after：在元素内容中最后一个字符后面插入内容
注意：必须和content配合使用！！！
p::after {
content: "$$";
color: orange;
}运行结果：在p段落的最后一个字符之后插入字符串"$$"
(3)::first-line：对元素内容中的第一行设置样式
p::first-line {
font-size: 20px;
color: blue;
}运行结果：对p段落第一行设置字体大小20px，颜色变为蓝色
扩展：
与关系选择器配合使用：
p+p::first-line {
background-color: pink;
}运行结果：改变p紧邻着的弟弟p的背景颜色为粉色
(4)::first-letter：对元素内容中第一个字符设置样式
p::first-letter {
font-size: 30px;
color: aqua;
}运行结果：选择所有p段落的首字母设置字体大小和颜色
(5)::selection：对鼠标选中的内容设置样式
p::selection {
color: rebeccapurple;
background-color: blue;
}运行结果：在网页界面对鼠标选中的p段落内容改变字体颜色和背景颜色
2.伪类选择器
在CSS中，伪类选择器用于选择处于特定状态的元素。这些状态可能是元素的默认状态、用户交互状态或其他特殊状态。伪类是不存在的类，是特殊的类，伪类用来描述一个元素的特殊状态，比如第一个子元素、被点击的元素、鼠标移入的元素....伪类一般情况下都是使用冒号（:）开头。
案例代码：
<body>
<div>
<p>段1</p>
<p>段2</p>
<p>段3</p>
<p>段4</p>
</div>
<div>div2
<p>段5
<p>段7</p>
<p>段8</p>
</p>
<p>段6</p>
</div>
<p>123
<p>456</p>
<p>789</p>
</p>
<div>div3</div>
</body>（1）元素选择伪类选择器
注意：冒号（:）前有空格代表从子类开始数，无空格代表从所在级数开始。
①:first-child
分支中最后一层第一个子元素被选中
div :first-child {
color: orange;
}运行结果：选中div中的第一个子元素改变样式
②:last-chid
分支中最后一层最后一个子元素被选中
div :last-child {
background-color: red;
color: rgb(214, 9, 33);
}运行结果：选择div元素的最后一个子元素改变样式
③:nth-child(2n+1或odd)
2n+1表示奇数位的元素被选中 可以使用单词odd
div :nth-child(2n+1) {
font-size: 40px;
}运行结果：对div中所有奇数位置的子元素改变样式
④nth-chid(2n或even)
2n表示偶数位的元素被选中，也可以使用even
div :nth-child(2n) {
font-size: 40px;
}
div :nth-child(even) {
font-size: 40px;
}⑤first-of-type
同类型中的第一个元素
div:first-of-type {
color: red;
}运行结果：选中不同层级的第一个div元素改变样式
⑥:last-of-type
同类型的最后一个元素
div:last-of-type {
background-color: blue;
color: orange;
}运行结果：选择不同层级最后一个div元素改变样式
⑦:nth-of-type(n)
同类型第n个元素
2n表示偶数位，也可以使用even
2n+1表示奇数位，可以使用单词odd
最后注意当使用三个类型的三个伪类选择器冒号（：）前面不带空格
（2）否定伪类选择器
用法：:not(其他选择器)
作用：将其他选择器选中的元素排除
注意：如果带child关键字的伪类选择器与其他伪类选择器共同使用冒号前面空格不需要
案例代码：
<body>
<div>
<p>段落1</p>
<p>段2</p>
<p>段3</p>
<p>段4</p>
</div>
</body>p:not(p:first-child):not(p:last-child) {
color: red;
}运行结果：将既不是第一个也不是最后一个p元素变红
（3）超链接的伪类
内容：1. :link --- 超链接独有的选择器，表示未访问的状态。
2. :visited -- 超链接独有的选择器，表示访问过的状态 。 （需要注意的是访问的网站是可以进入的，不然依显示为 访问前的状态）
3. :hover -- 所有元素都可以使用的选择器，表示鼠标悬停在该元素时的状态。
4. :active -- 所有元素都可以使用的选择器，表示鼠标点击该元素时的状态（左右键都可以）。
案例代码：
<div>
<a href="www.dkk.com" title="dkk的网站">网站1</a><br>
<a href="http://www.baidu.com">网站2</a>
<p>
段落1
</p>
</div>/* 定义超链接未访问时的样式 */
a:link {
color: red;
}
/* 定义已访问链接的样式 */
a:visited {
background-color: aqua;
}
/* 定义段落元素在鼠标悬停时的样式 */
p:hover {
background-color: aqua;
}
/* 鼠标点击时的状态设置 */
p:active {
font-size: 60px;
}运行结果：
3.选择器的优先级
当我们使用了不同选择器选择了相同的元素面对一个属性设置了不同的样式，会先使用哪一个呢， 这就取决于选择器的优先级，谁的优先级高就使用谁。
选择器的优先级：
内联选择器 > id选择器 > 类和伪类选择器 > 元素选择器 > 默认状态
案例代码：
<body>
<div id="d1" class="c1" style="background-color: pink;"></div>
</body> #d1{
color: red;
width: 100px;
height: 200px;
background-color: orange;
}
.c1{
width: 100px;
height: 200px;
background-color: blue;
}运行结果：优先使用内联标签的粉色背景，如果没有内联标签则使用id选择器的样式
4.样式的继承
在CSS中，样式的继承是指某些样式属性会自动应用到元素的后代元素上。这种设计使得在开发的时候可以更高效地编写样式，不需要为每个元素单独设置相同的样式。
继承的原理：当一个元素被设置了某个样式属性时，这个属性不仅会应用到该元素本身，还会应用到它所有它的后代元素，除非这些后代元素有自己明确的样式设置来覆盖继承的样式。
常见的可继承属性：
color：文本的颜色
font-family：字体系列
font-size：字体大小
font-weight：字体粗细
line-height：行高
text-align：文本对齐
visibility：可见性
cursor：光标样式
但是并非所有的CC属性都是可继承的，比如margin（外边距）、padding（内边距）、border（边框）、background（背景色）通常不会被继承。
案例代码：
<body>
<div class="out">
我是div
<div class="in">
我是内部的div
</div>
</div>
</body> <style>
.out {
font-style: italic;
color: blue;
font-size: 50px;
width: 300px;
height: 300px;
background-color: orange;
}
.in {
border: 1px solid red;
width: 300px;
height: 300px;
}
</style>运行结果：子元素也会用到上述的字体样式,但是背景宽高颜色都没有继承
5.单位
最基本的单位：像素（px），就是屏幕上的分辨率，1920*1080表示屏幕上有这些个点，一个点就是一个像素。
百分比单位：子元素针对父元素的百分比，会随着父元素属性的改变而改变。
em单位：是一个相对单位，相对本元素字体大小。1em=1font-size
rem单位：相对单位，相对的是整个页面的根元素的字体大小。
6.盒模型的内边距
内边距就是内容区域和边框之间的空间，通过padding属性来设置，也可以分别通过padding-top（上内边距）,padding-bottom（下内边距）,padding-left（左内边距）,padding-right（右内边距）来设置。
为了缩短代码可以在padding指定所有值：
四个值——padding：上 右 下 左；
三个值——padding：上 左右 下；
两个值——padding：上下 左右；
一个值——padding：上下左右；
7.盒模型的边框
元素的边框，在CSS中，通常有这三个属性来控制。
边框宽度：border-width
边框颜色：border-color
边框样式：border-style
当然也可以对上下左右的边框单独设置这个属性。
上边框的宽，颜色，样式：
border-top-width
border-top-color
border-top-style
下边框的宽，颜色，样式：
border-bottom-width
border-bottom-color
border-bottom-style
左边框的宽，颜色，样式：
border-left-width
border-left-color
border-left-style
右边框的宽，颜色，样式：
border-right-width
border-right-color
border-right-style
边框的线条样式（border-style）
none：默认无边框
dotted：点虚线
solid：实线
double：双线条
dashed：虚线
grove：定义3D沟槽边框
ridge：定义3D脊边框
inset:定义一个3D的嵌入边框
outset: 定义一个3D突出边框
注意：元素的可见大小就是由边框+padding+content决定的。
8.盒模型的外边距
CSS中用margin（外边距）属性定义元素周围的空间。
margin是没有背景颜色完全透明的。它的作用一般是用来设置该元素所在网页的位置。
margin属性也分为margin-top（上外边距），margin-right （右外边距），margin-bottom（下外边距），margin-left（左外边距）。
也可以使用一个属性值来指定margin所有边距属性
四个值——margin：上 右 下 左
三个值——margin：上 左右 下
两个值——margin：上下 左右
一个值——margin：上右下左
默认情况下，元素的位置由上边距和左边距决定，因此要至少设置两个值。
注意：上下边距一般情况下不可以设置auto和百分比，但是左右可以设置百分比和auto。上下居中auto没用，左右居中除了自己计算之外可以设置auto来使元素位置居中。左右使用auto的结果会依赖于浏览器。
注意：块元素的整个宽度等于父元素的width
等式：width=margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
在设置元素的外边距时，当右边距被强制约束为某一个值导致整个宽度没有达到父元素的width，那么右外边距则自动填充，自己设置的值失效。
注意：
1.外边距不会影响盒子可见框的大小
2.外边距会影响盒子的位置
3.margin会影响到盒子的实际占用空间
9.盒模型的水平和垂直布局
（1）水平布局
元素在水平方向的布局必须满足以下等式：
父元素的内容区的width=子元素的左右外边距+左右边框宽度+左右内边距+width
第一种情况：七个属性都是固定值没有auto值
如果等式不成立，则右外边距就自动调整width的值，使等式成立。
第二种情况：有auto值。width margin-left margin-right 可以为auto值
如果width是auto值就自动调整width值使等式成立
如果width不是auto值，其余两个是auto值，谁是auto值就调整谁
如果剩下两个都是auto值就调整为相同值
第三种情况：如果三个值都设置为auto，则外边距都是0，使宽度达到最大
（2）垂直布局
只需要设置上下外边距，上下边框的宽，上下内边距以及height即可
在垂直方向上如果有溢出，可以在父元素使用overflow属性设置以下值
overflow:
visible: 可见，默认值
hidden：隐藏（溢出部分）
scroll：添加滚动条
auto：根据是否溢出自动添加滚动条
10.外边距的重叠现象
（1）兄弟之间的外边距重叠：
-如果两个值都是正值，取最大值
-如果一正一负 相加取和
-如果外边距都是负值，则取两者中绝对值较大的
-兄弟之间的外边距的重叠是对开发有利的，所以我们不需要进行处理，根据情况设定即可。
对开发有利的原因：
-简化布局：外边距重叠可以简化布局设计，特别是在处理多个相邻元素之间的间距时。开发者不需要为每个元素单独设置外边距，只需要设置其中一个元素的外边距即可，这样可以减少代码量，提高开发效率。
-自然间距：外边距重叠使得相邻元素之间的间距更加自然和一致。例如，如果两个相邻的段落元素（<p>）分别设置了不同的外边距，它们之间的实际间距将是较大的那个外边距，这样可以避免间距不一致的问题。
-灵活性：外边距重叠提供了更大的灵活性，使得开发者可以根据需要调整元素之间的间距。例如，如果需要调整两个相邻元素之间的间距，只需要修改其中一个元素的外边距即可，而不需要同时修改多个元素的外边距。
-减少意外间距：在某些情况下，如果不存在外边距重叠，可能会导致意外的间距问题。例如，当一个元素的底部外边距与另一个元素的顶部外边距相遇时，如果没有外边距重叠，可能会导致两个元素之间的间距过大。外边距重叠可以避免这种情况，使得元素之间的间距更加合理。
（2）父子之间的外边距重叠
子元素的上外边距传递给了父亲，使父元素离他的父元素的上边距也发生了变化，致使父元素的位置发生里改变，因此就出现了问题。父子之间外边距的折叠会影响到页面的布局，必须要要进行处理。
如何解决：父元素设置border属性即可。
案例代码：
<body>
<div class="outer">
<div class="in1"></div>
<div class="in2"></div>
</div>
</body> .outer {
border: 1px solid red;
width: 600px;
height: 500px;
background-color: #ef49ad;
margin: 0 auto;
}
.in1,
.in2 {
width: 200px;
height: 200px;
/* border: 5px solid orange; */
}
.in1{
background-color: aqua;
margin-bottom: 20px;
/* 研究的是父子之前的外边距重叠 */
margin-top: 100px;
}
.in2{background-color: pink;
margin-top: 50px;
}如果为在父元素class名outer中设置border属性就会出现父元素下来和子元素上边重叠
设置之后可以看到父元素回到了原本的位置
11.行内（内联）元素的盒模型
行内元素的盒模型的特点：
-内容区不能使用width和height属性设置，设置了也不会生效，内容区的高度和宽度都是文字撑起来的。但是padding、border、margin的左右属性都是生效的，上下不生效。
如果想要设置行内元素的宽，高或者垂直方向上的样式生效，可以使用display属性将行内元素转为块式元素的样式进行显示设置。
display属性值：
-none：隐藏，不再占用原有页面空间
-block：将行内元素变成块元素设置样式
-inline：将块元素当成行内元素设置样式
-inline-block：要设置的元素既有行内样式（两个元素可以在一行）也有块样式。
案例代码：
<body>
<div>
<span id="s1">我是一只鹅</span><span id="s2">你也是一只鹅</span>
<div id="d1">1</div>
<div id="d2">2</div>
</div>
</body><style>
#s1 {
width: 300px;
height: 200px;
border: 5px solid red;
padding: 20px;
margin: 40px;
display: block;
}
div div {
width: 200px;
height: 100px;
display: inline-block;
}
#d1 {
background-color: aqua;
}
#d2 {
background-color: pink;
}
</style>运行结果：span元素是行内元素，将它的display属性设置为block，它会拥有块元素的特点（它没有变成块元素，还是行内元素），该行内元素的上下外边框，边框，内边距都生效,宽与高也生效，而且还具有独占一行的特点。div是块元素，将它的display属性值设为inline，那么块元素就具备了行内元素的样式特点： 宽，高，上下外边距，上下边框，上下内边距失效。并且不再独占一行。div是块元素，将displa的值设置了inli-block那么搞元素既有样式特点也有行内元素的特点宽，高，上下外边距，上下边框，上下内边距都生效，并且还在一行上。
12.CSS的默认样式
通常情况下所有的html标签都有自己的默认样式，比如body的外边距默认是8px，因此我们写的标签并不是紧紧地贴着显示器的左边框和上边框。此时我们需要取消默认样式，但是每个元素都有自己的默认样式，因此我们不能使用一个选择器就取消所有的默认样式，要单独设置。用通配符比如通配符选择器可以选择所有标签设置样式。
* {
margin: 0;
}选择所有元素设置外边距为0。
我们还可以借助第三方的css样表，进行重置样式比如：
-reset.css：这个文件的作用是取消几乎所有元素的默认样式
-normalize.css：这个文件的作用是设置一些通常的尺寸
需要使用哪一个就使用link引入即可，link标签应该放置在style标签的上面，避免覆盖掉自定义的样式。
引入第三方样式：
<link rel="stylesheet" href="css/reset.css">13.盒子尺寸
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定。其实这个盒子可见框大小是由一个属性box-sizing来控制的。
box-sizing：决定了盒子尺寸的计算方式，也是整个盒子可见框的大小。
box-sizing有两个值可选：
-content-box：默认值，属性width和height用来规定内容区的大小。盒子可见框的大小则由内容区，内边距和内边框共同决定。
-border-box：属性width和height用来规定整个可见框的大小，不再是内容区了。内容区的大小就是自适应总宽度width了。
例如：设置width为200，border为5，padding5，那么内容区的宽度就是200-5*2-5*2=180.
14.轮廓和圆角
（1）outline属性是用来设置元素的轮廓线的，它的用法border一样（颜色，大小，线条哦），但是轮廓不会和边框一样的点就是轮廓不会影响到可见框的大小。
（2）border-radius属性是用来设置盒子的圆角，可以使盒子的边角变得圆滑。也可以分别指定四个角的圆角。
四个值：左上 右上 右下 左下
三个值：左上 右上-左下 右下
两个值：左上-右下 右上-左下
设置border-radius可以使元素变成一个圆形，如果width和height相等，则元素是圆，如果不相等那就是一个椭圆。
案例代码：
border: 1px red dashed;
width: 300px;
height: 150px;
background-color: #bfa;
border-radius: 50%;运行结果：椭圆型
15.阴影
box-shadow用来设置元素的阴影效果，阴影并不会影响页面布局。
box-shadow属性有四个值：
第一个值是水平偏移量，用来设置阴影的水平位置，正值向右移动，负值向左移动。
第二个值是垂直偏移量，用来设置阴影的垂直位置，正值向下移动，负值向上移动。
第三个值使阴影的模糊半径，设置阴影面积的大小。
第四个值是阴影的颜色。
例如：box-shadow：0px 0px 5px red; 这个代表元素阴影水平偏移0px垂直偏移0px，模糊半径是5px，阴影颜色是红色。
16.浮动
元素的浮动是CSS中一种布局技术，用于将元素从正常的文档流中移出，并使其向左或向右移动，直到遇到另一个浮动元素或包含块的边界。通过设置浮动会使一个元素向它的父元素的左侧或者右侧移动。
通过float属性设置元素的浮动，可选值：
none：默认值，元素不浮动
left：元素向左浮动
right：元素向右浮动
浮动元素的特点：
1.浮动元素脱离文档流，可以向左或向右移动。
2.不会超过自己父元素的边框
3.元素设置了浮动，下面未设置浮动的兄弟元素会自动向上浮动。
4.浮动元素的哥哥如果没有设置浮动，那么该浮动元素不会浮动到跟哥哥一行的位置，如果哥哥也设置了浮动，那么最多浮动到跟哥哥一样高的位置。
注意：元素一旦设置了浮动，水平布局的等式便不再需要强制成立（width=margin-left + border-left + padding-left + width + padding-right + border-right + margin-right）。
浮动目前的主要作用：
1.图文混排：通过将图片浮动在一侧，可以使文字环绕在图片周围，实现图文混排的效果。
2.多列布局：通过将多个元素浮动到同一行，可以实现多列布局。
3.创建导航栏：通过浮动列表项，可以创建水平导航栏。
4.图像和文本对齐：通过浮动图像，可以使图像和文本在同一行对齐。
块元素脱离文档流：
1.块元素不再独占页面的一行。
2.脱离文档流后，块元素的高度和宽度都默认被内容撑开。
行内元素脱离文档流的特点：特点和浮动的块元素特点一样，可以说设置了浮动，元素脱离了文档流就不再需要区分行内元素和块元素了。
<style>
.box1 {
/* 浮动的块元素的宽和高默认情况下是被内容撑起来的，当然是可以设置具体的宽高 */
/* width: 100px;
height: 100px; */
/* background-color: oldlace; */
/* margin:0 auto; 因为设置了浮动所以居中失效 */
float: left;
/* 设置浮动之后，可以看到p段落中的文字是环绕着div的，并没有被div覆盖 */
}
span {
/* 行内元素如果设置了浮动，那么不具备行内元素的独有特点，而是可以设置各种属性 */
float: left;
width: 300px;
height: 50px;
border: 1px solid red;
/* 行高属性可以是文字居中 与height一致 */
line-height: 50px;
}
</style><body>
<div class="box1"><img src="./img/1.jpg" alt=""></div>
<p>凭立窗前望雪。雪花在天地间不急不慢地漫扬，雪花在玻璃外面如粉如绒，急的时候如白线，就如同流动的窗帘花，又像是瀑布，还似是幕布挂满窗帘，煞是好看。雪花在风的吹拂下，时而袅袅飞来，时而飘然而去，看着、看着，雪花不由得飘到了窗前，忽一阵风又把她招回去了。当你索性推开窗子，这时候有的雪花像是心有灵犀似的，真就探头探脑地进来了，与你来一次亲密接触；有的雪花探探头又缩回去了，这便更增添了望雪的兴致。乘着兴致你不妨走下楼去，仰头望向天空，沐浴在雪中，这种感受又不同了，这是雪对你最亲密地、频繁地接触，四周的雪花都会纷纷向你扑来，凉飕飕的雪花冷不丁地拍打在脸上、身上，感怀却在心里，此时的你定会感到幸福的。雪花的节奏时而明快、时而舒缓，时而不缓不疾，多么浪漫、多么惬意，沐浴在雪中，总会使人感慨万千，也总会令人心旷神怡。 每日睁开眼，世界都是单调的一色，没有鸟鸣，没有温和，一颗心被紧紧地包裹在厚重的棉衣下，躯体时时刻刻都在寻求温暖的路上奔波。我们都在冬季寻求着温暖的慰藉，殊不知，最荒芜，最寒冷的莫过于心灵。心若有梦，又岂惧这寒冷的冬季。想想明朝大儒宋濂，从小家境贫寒，只能把别人的书借回来手自笔录，记日以还，然后再苦学。尤其读到他求学的过程时，每每让人感动落泪，大冬天，砚台都结了冰，手指都被冻的麻木了，他从来不敢懈怠。正是这种不畏寒冷，刻苦学习的精神，才使他观遍全书。成人之后，他又长途跋涉去外乡求学，负箧曳屣，行深山巨谷中，穷冬烈风，大雪深数尺，足肤皲裂而不知。至舍，四支僵劲不能动，媵人持汤沃灌，以衾拥覆，久而乃和。寓逆旅，主人日再食，无鲜肥滋味之享。同舍生皆被绮绣，戴朱缨宝饰之帽，腰白玉之环，左佩刀，右备容臭，烨然若神人；余则袍敝衣处其间，略无慕艳意。以中有足乐者，不知口体之奉不若人也。我们的古人给我们留下着太多的财富，而我们却往往把这一切当作是不可能再实现的传说，眼观四周，人心浮躁的让人惊叹。
</p>
<div class="box2">aaaaaa</div>
<span>我是一个span</span>
</body>运行结果：文字环绕在图片周围，图片设置了左浮动会向左靠。
17.高度坍塌问题
高度坍塌是CSS浮动布局中常见的问题。在浮动布局中父元素的高度是默认被子元素撑起来的，当子元素设置了浮动后，会脱离原本的文档流，这回导致父元素的高度丢失，当父元素的高度丢失后，下面的元素会自动上移，这会使页面的布局混乱，下面给出解决父元素高度坍塌的问题的解决方式。
解决高度坍塌：
1.第一种就是给父元素设置一个高度，但这违背了父元素的高度由子元素撑起来的意愿，这样不够灵活，当不知道父元素的具体高度时无法设置。
2.第二种给父元素添加一个属性overflow：hidden 原理是使用了BFC的概念（下面解释BFC）。缺点是当子元素定位到父元素之外时不希望溢出部分隐藏。
3.在最后一个浮动子元素的后面添加一个div元素并添加属性clear：both，但是该方式会造成代码冗余，因为添加了一个本不该存在的div元素。
扩展：clear
-作用：清除浮动元素对当前的元素所产生的影响
-值：left——清除左侧浮动元素对当前元素的影响
right——清除右侧浮动元素对当前元素的影响
both——清除后两侧浮动元素对当前元素的影响
4.使用父元素的伪元素选择器解决问题，这个办法是目前来说的最优解。
例：父元素选择符：：after｛
content="";
display=block;
clear:both;
}
案例代码：
#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;
}<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>运行结果：当没有清除浮动效果的影响时
清除浮动效果的影响
BFC的概念：
BFC（Block Formatting Context，块级格式化上下文）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
BFC的主要特点和作用：
1.清除浮动：创建一个新的BFC可以包含浮动元素，从而解决高度坍塌问题。
2.防止外边距发生折叠：在同一个BFC内的块级盒子会发生外边距折叠，而不同的BFC盒子不会与外部的浮动元素重叠。
3.阻止元素被浮动元素覆盖：BFC内部的元素不会与外部的浮动元素重叠。
创建BFC的方法：
1.浮动元素：float属性不为none。
2.绝对定位元素：position属性值为：absolute（绝对定位）或者fixed（固定定位）
3.非块级盒子的块容器：display的属性为inline-block、table-cell、table-caption、flex、inline-flex。
4.overflow的属性不为visible：可以是hidden、auto、scroll。
18.clearfix
clearfix样式可以同时解决高度坍塌和外边距重叠的问题，当遇到这些问题时，直接使用clearfix这个类即可。
使用方法：在父元素的class属性上添加clearfix，之后在style中设置
.clearfix{
content:"";
display:table;
clear:both
}
注意：clearfix是css中内置的class值，不可以随便起名，必须用clearfix值。
<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><div class="box1 clearfix">19.元素的定位
定位是更高级的布局样式，通过定位可以将元素摆放到页面的任意位置，使用position属性来设置定位。
可选值：
static：默认值，元素静止没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
sticky：开启元素的粘滞定位
偏移量：
-top:定位元素和定位位置上边的距离
-bottom：定位元素和定位位置下边的距离
定位元素垂直方向的位置由top和bottom来控制，通常情况下我们只会选择使用一个，top值越大，定位元素越向下移动，bottom值越大，定位元素越向上移动。
-left：定位元素和定位位置的左侧距离
-right：定位元素和定位位置的右侧距离
定位元素水平方向的位置由left和right两个属性来控制，通常情况下只使用一个，left越大元素越靠右，right越大元素越靠左。
（1）相对定位
当元素position的值设置为relative时，元素会开启相对定位。
特点：
1.如果设置了相对定位，没有偏移量，那么元素不会发生移动
2.相对的位置时元素文档流的位置
3.设置了相对定位的元素不会脱离文档流
4.设置了相对定位的元素提高了自身的层级
5.设置了相对定位的元素，本身的性质不会改变，块级元素还是块级元素，行内元素还是行内元素。
案例代码：
<style>
.box1,
.box2,
.box3 {
width: 300px;
height: 300px;
}
.box1 {
background-color: aqua;
}
.box2 {
background-color: #ef49ad;
/* 开启相对定位，记住 是相对他之前在文档流的位置 */
position: relative;
/* 设置偏移量 距离原来的位置进行偏移 */
top: 100px;
left: 100px;
}
.box3 {
background-color: #70232b;
}
</style><body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>运行结果：
扫一扫
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
