收藏
批改状态：合格
老师批语：赶紧跟上进度
盒子模型中外边距有3个特征，三个特征仅针对上下有用：
第一个是同级塌陷，即同级的两个盒子上下排列时，上面盒子的margin-bottom与下面盒子的margin-top以大的为准，而不是叠加 案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距的三个特征</title>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: lightgreen;
border: 1px solid blue;
margin-bottom: 50px;
}
.div2 {
width: 200px;
height: 200px;
background-color: lightcoral;
border: 1px solid blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
第一个是嵌套传递，即内外两个盒子，子盒子设置了外边距时，外边距属性自动传递到父盒子 （其中当父盒子有边框属性时，则不会传递）案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套传递</title>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: lightgreen;
/*border: 1px solid blue;*/
}
.div2 {
width: 100px;
height: 100px;
background-color: lightcoral;
/*border: 1px solid blue;*/
margin-top: 50px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
第三个是自动挤压，margin的属性中可以设置一个auto宽度，即margin-left: auto时，盒子靠最右边，margin-right: auto时盒子靠最左边，而margin:auto时 ，盒子居中
---------------------------------------------------------------------------------------------------------------
关于内边距和内容之间的设置技巧：
首先，设置盒子的设定宽度和高度值不含内边距的高度，比如当我们设置好盒子高度为100px，然后在设置一个padding-top: 50px，这时盒子的高度变为150px，所以内容布局时要考虑到增加padding属性时盒子宽度和高度的变化
所以除了更改盒子宽高属性外，有另外两个方法解决，第一为在外面再增加一个盒子来限制内部盒子的宽高， 第二是给盒子增加一个属性box-sizing : border-box, 使盒子的宽高直接作用于边框而不是内容
————————————————————————————————————————————
浮动：
正常html页面元素均为文档流，一个元素一行，而当给一个元素给予个浮动属性（float）后， 该元素即进入浮动流，元素水平排列，在文档流上层，会挡住文档流的元素。如果希望文档流的元素不被浮动流的元素遮挡，可以给予文档流元素一个属性clear: left 或者 clear: right，同时使用时有个简写为clear:both
————————————————————————————————————————————————
定位：
相对定位属于文档流的定位，而绝对定位是浮动流的定位
以下为相对定位的案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1 {
width: 100px;
height: 100px;
background-color: aqua;
}
.div2 {
width: 100px;
height: 100px;
background-color: bisque;
}
.div3 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
.div4 {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.div5 {
width: 100px;
height: 100px;
background-color: lightseagreen;
}
.div1 {
position: relative;
left: 100px;
}
.div3 {
position: relative;
left: 100px;
bottom: 100px;
}
.div4 {
position: relative;
left: 100px;
bottom: 100px;
}
.div5 {
position: relative;
left: 200px;
bottom: 300px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实
绝对定位需要为定位的元素设置一个定位父集，如果不设置，默认为body
案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.parent {
width: 300px;
height: 300px;
border: 1px solid brown;
position: relative;
}
.div1 {
width: 100px;
height: 100px;
background-color: aqua;
}
.div2 {
width: 100px;
height: 100px;
background-color: bisque;
}
.div3 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
.div4 {
width: 100px;
height: 100px;
background-color: lightgreen;
}
.div5 {
width: 100px;
height: 100px;
background-color: lightseagreen;
}
.div1 {
position: absolute;
left: 100px;
}
.div2 {
position: absolute;
top: 100px;
}
.div3 {
position: absolute;
top: 100px;
left: 100px;
}
.div4 {
position: absolute;
left: 200px;
top: 100px;
}
.div5 {
position: absolute;
left: 100px;
top: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
模拟php中文网登陆实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例模拟</title>
<style>
body {
background-image: url("static/images/php.jpg");
background-size: cover;
margin: 0;
background-repeat: no-repeat;
}
.shawd {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
position: absolute;
}
.log img{
width: 380px;
height: 460px;
}
.log {
position: absolute;
left: 50%;
top: 50%;
margin-top: -230px;
margin-left: -190px;
}
.ads{
width: 250px;
height: 350px;
border: 1px solid black;
background-color: white;
position: fixed;
right: 0;
bottom: 0;
}
h3 {
padding: 10px 20px;
}
</style>
</head>
<body >
<div class="shawd"></div>
<div class="log" >
<img src="static/images/login.jpg" alt="">
</div>
<div class="ads">
<button>X</button>
<h2 style="text-align: center">我是一个广告</h2>
<h3 style="width: 200px; height: 200px">广告内容是啥？广告内容是啥？广告内容是啥？广告内容是啥？广告内容是啥？广告内容是啥？</h3>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
