浮动带来的影响
浮动会造成父标签塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin:0}
#d1{
border:3px solid black
}
#d2{width:50px;height:50px;background:red;}
#d3{width:50px;height:50px;background:blue;}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>如将上述代码添加浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin:0}
#d1{
border:3px solid black
}
#d2{width:50px;height:50px;background:red;float:left;}
#d3{width:50px;height:50px;background:blue;float:left}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>解决方法：
1、额外在父标签内写一个标签，设置高度来撑起父标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin:0}
#d1{
border:3px solid black
}
#d2{width:50px;height:50px;background:red;float:left;}
#d3{width:50px;height:50px;background:blue;float:left}
#d4{height:50px;} #额外添加的代码
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div> #额外添加的代码
</div>
</body>
</html>2、可以使用clear：left;来解决。（表示该标签的左边（地面和空中）不能有浮动的元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin:0}
#d1{
border:3px solid black
}
#d2{width:50px;height:50px;background:red;float:left;}
#d3{width:50px;height:50px;background:blue;float:left}
#d4{clear:left;} #改动处
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</body>
</html>3、使用.clearfix:after{content:'';display:block;clear:both;}来解决（然后要在父标签加上一个clearfix类）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin:0}
#d1{
border:3px solid black
}
#d2{width:50px;height:50px;background:red;float:left;}
#d3{width:50px;height:50px;background:blue;float:left}
.clearfix:after{content:'';display:block;clear:both;} #改动处
</style>
</head>
<body>
<div id="d1" class="clearfix"> #改动处
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>这段代码将在 .clearfix 元素的后面插入一个空的块级元素，并将其清除浮动。这样可以确保在使用浮动布局时，父元素能够正确地扩展以包含所有浮动的子元素。
溢出属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{width:50px;height:50px;border:3px solid black}
</style>
</head>
<body>
<div id="d1">
asdasdasdasdadasdasdasdasdjasdfhjashdfo;ahsdfo;ijasoidfjoaisdjfoisjgopasjdgfpioajsdpfiojapsodfj'poasjdl'kjasp'dofjap'osdjfpoajsdp'fojaps'odfjkp'oasjdfpo'ajsdpf'kljkap's;lkdfk';laskdf';jasd;fjak;lsdjf'kajsd'lfkja'sdfj
</div>
</body>
</html>解决方法：
添加溢出属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{width:50px;height:50px;border:3px solid black;overflow: scroll;} # 改动处
</style>
</head>
<body>
<div id="d1">
asdasdasdasdadasda sdasdasdjasdfhjashdfo;ahsdfo;ijasoidfjoaisdjfoisjgopasjdgfpioajsdpfiojapsodfj'poasjdl'kjasp'dofjap'osdjfpoajsdp'fojaps'odfjkp'oasjdfpo'ajsdpf'kljkap's;lkdfk';laskdf';jasd;fjak;lsdj f'ka jsd'lfkja'sdfj
</div>
</body>
</html>常见的溢出属性值包括：
- `overflow: visible;`：默认值，超出容器尺寸的内容会显示在容器外部，不会被裁剪。
- `overflow: hidden;`：超出容器尺寸的内容会被裁剪，不可见部分将被隐藏。
- `overflow: scroll;`：超出容器尺寸的内容会显示滚动条，用户可以滚动查看全部内容。
- `overflow: auto;`：根据内容是否超出容器尺寸决定是否显示滚动条，如果内容超出容器尺寸则显示滚动条，否则不显示。
- `overflow: inherit;`：继承父元素的溢出属性值。
定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width:50px;
height:50px;
border:3px solid black;
background:red;
left:50px;
top:50px;
position:relative} #此参数可以使标签允许移动
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>position：static 默认是静态，无法改位置的
相对定位（relative）
-相对于原来的位置做移动
绝对定位(absolute）;
-相对于已经定位过的父标签做移动（如果没有父标签那么就会以body做参照）
固定定位（fixed）
-相对于浏览器窗口固定在某个位置
ps：浏览器会优先展示文本内容
浮动和定位是否脱离文档流（原来的位置是否还保留？）
浮动：脱离文档流
相对定位：不脱离文档流
固定定位：脱离文档流
z-index模态框
模态框是一种常见的网页设计元素，用于显示重要的信息或交互内容，同时暂时阻止用户对其他页面元素的操作。z-index属性用于控制元素的层叠顺序，确定元素在页面上的显示顺序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{margin:0}
.cover{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:99}
.modal{
background-color:white;
height:200px;
width:400px;
position:fixed;
left:50%;
top:50%;
z-index:100;
margin-left:-200px;
margin-top:-100px;
}
</style>
<body>
<div>最底层内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登录界面</h1>
<p>username: <input type="text"></p>
<p>password: <input type="text"></p>
<button>点我</button>
</div>
</body>
</html>如果把modal的z-index的值设的比cover小的话，则会优先显示cover的背景颜色（因为优先展示文本）。
rgba只能设置颜色的透明度
opacity可以设置字体的透明度