收藏
批改状态：合格
老师批语：写得不错, 图文并茂,看得出你在赶作业, 以后尽可能不要拖, 否则会越落越多
一、理解并写出外边距的三个特征: 同级塌陷,嵌套传递,自动挤压的案例;
答：存在外边距margin的情况下必有多个盒子。
同级塌陷：当上下两个盒子竖直排列时，外边距有塌陷现象，表现为外边距小的失效，只显示相应外边距大的盒子的外边距。
同级塌陷只出现在上下排列中，左右盒子没有同级塌陷，只叠加。
嵌套传递：修改嵌套子盒子margin值，必同时传递父盒子，造成父盒子大小改变。此时需要修改子盒子位置，只能通过修改
父盒子相应方向的padding值以及width或height还原父盒子变动子盒子位置。
自动挤压：盒子默认margin值为auto，通过设置margin：auto上下左右挤压盒子使盒子在页面居中。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style>
.box1{
width:100px;
height:100px;
background-color:lightblue;
}
.box2{
width:100px;
height:100px;
background-color:lightcoral;
}
.box2{
margin-top:30px;
}
.box3{
width:200px;
height:200px;
background-color:lightgray;
}
/*父盒子一般比子盒子大，且为使box4离box3顶部之间有50px的间距,添加margin-top，结果显示外边距跑到了外部盒子box3左上方，形成外边距的"嵌套传递"现象：当给一个子盒子添加margin时,这个margin会自动传递到父级盒子上。此时正确的做法是：给父级盒子添加内边距来实现。同时由于添加内边距使盒子撑开，需要同时修改盒子的高度。*/
.box4{
width:100px;
height:100px;
background-color:lightseagreen;
}
.box5{
width:200px;
height:200px;
background-color:lightgray;
padding-top:50px;
height:150px;
/*同理可以修改padding-left/right值，修改同时设置新的宽度width，使父盒子扩展区域缩回原来大小*/
}
.box6{
width:100px;
height:100px;
background-color:lightseagreen;
}
.box7{
margin:auto;
width:100px;
height:100px;
background-color:pink;
}
</style>
</head>
<body>
<!--外边距的三个特征: 同级塌陷,嵌套传递,自动挤压-->
<h2>同级塌陷</h2>
<div class="box1"></div>
<div class="box2"></div>
<hr>
<h2>嵌套传递（给子盒子添加margin传递到父盒子上）</h2>
<div class="box3">
<div class="box4"></div>
</div>
<hr>
<h2>嵌套传递（修改padding值），使使box6(4)离box5(3)顶部之间有50px的间距</h2>
<div class="box5">
<div class="box6"></div>
</div>
<hr>
<h2>自动挤压</h2>
<div class="box7"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
1.margin 的同级塌陷
在垂直方向上同级之间的margin会发生塌陷现象，上盒子的margin-bottom和下盒子的margin-top之间真正的外边距是较大者
2.margin的嵌套传递
在垂直方向上子盒子的margin-top会传递给父盒子。
当需要修改子盒子的margin值且父盒子不被传递，解决方法为父盒子设置padding-top值，同时根据计算增改height值。
3.margin的自动挤压
margin默认值为0；
margin-left:auto ； 左边被挤压，跑到右边去，左边给予最大的宽度
margin-right:auto； 右边被挤压，跑到左边去，右边给予最大的宽度
margin：0 auto； 左右方向被挤压，也就是水平居中。第一个参数值为上下值，第二个为左右值。
简写：margin: auto;
二、 写案例,并分析内边距对盒中内容的影响,以及解决的三种方案是什么?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距（padding）</title>
<style>
box1 {
width: 300px;
height: 300px;
background-color: lightgreen;
border: 1px solid black;
}
.box1{
padding:50px;
/*!*此方法不仅将图片居中，还将盒子撑开*!*/
}
.box1{
width:200px;
height:200px;
/*每次设置padding都需要修改盒子的宽高*/
}
.box2{
/*利用于嵌套盒子之间,只有宽度可以继承的特征*/
background-color:lightblue;
border:1px solid black;
padding:50px;
}
.wrap{
width:300px;
}
.box3{
width:300px;
/*将父盒子的宽度作用到边框上，而不是作用在默认content内容上*/
box-sizing:border-box;
background-color:lightgoldenrodyellow;;
border:1px solid red;
padding:50px;
/*此处添加padding直接作用在边框上，盒子不会被撑开*/
}
</style>
</head>
</body>
<div class="box1">
<img src="https://img.php.cn/upload/image/307/729/950/1562898659859226.jpg" alt="小姐姐" width="200">
</div>
<hr>
<!--分割线，在页面中产生水平条-->
<!-- 方法2: 宽度分离-->
/*利用于嵌套盒子之间,只有宽度可以继承的特征*/
<div class="wrap">
<div class="box2">
<img src="https://img.php.cn/upload/image/307/729/950/1562898659859226.jpg" alt="小姐姐" width="200">
</div>
</div>
<hr>
<!-- 方法3: box-sizing 盒尺寸-->
<!--子盒子是父盒子的内容，内容继承父盒子的宽度，不继承高度-->
<div class="box3">
<img src="https://img.php.cn/upload/image/307/729/950/1562898659859226.jpg" alt="xiaojiejie" width="200">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3. 浮动的实现原理与清除的技巧
文档流：html元素默认按照书写顺序在浏览器中，从左到右，从上到下排列；
布局前提通常将元素从文档流中脱离，使其不受浏览器影响；
元素脱离文档流的手段：浮动和绝对定位
浮动：
.box{
float : left/right;
}
向左或右浮动，多个元素中某一个元素脱离文档流后，后面未脱离文档流的元素将占据前一个元素原来位置；
后续脱离文档流的元素将排列顺序将在前一个脱离文档流元素的后面；
浮动元素适应页面变化，尽可能向显示面两边靠近；
如box1向左浮动，box2向右浮动,box3未脱离文档流，则box3位于box1和box2之间；
清除浮动：
clear : left/right ;
简写清除两边浮动：
clear :both;
清除浮动后的元素位置将紧贴浮动元素最底边或最左/右边。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.box1{
width:150px;
height:150px;
background-color:lightblue;
}
.box2 {
width:180px;
height:180px;
background-color: lightcoral;
}
/*左浮动:元素脱离文档流，下面元素会自动占据脱离文档流的元素位置*/
.box1{
float:left;
}
.box2{
float:left;
}
/*后浮动元素排在前一个浮动元素后面*/
.box3{
width:200px;
height:300px;
background-color:lightgreen;
float:right;
}
/*浮动元素自动适应页面变化，尽可能的向页面两边靠近，随页面大小变化而变化*/
.box4{
width: 100%;
height: 60px;
background-color: gray;
}
/*box4将占据浮动元素空开的位置*/
.box4{
/*clear:left;*/
/*clear:right;*/
/*简写：*/
clear:both;
}
/*将不受左边浮动元素影响，紧贴已经浮动元素的下面，谁高贴着谁*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4. 相对定位与绝对定位的区别与联系,并实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位与相对定位</title>
<style>
.box1 {
width: 150px;
height: 150px;
background-color: lightblue;
}
.box2 {
width: 150px;
height: 150px;
background-color: lightgray;
}
.box3 {
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box4 {
width: 150px;
height: 150px;
background-color: lightcoral;
}
.box5 {
width: 150px;
height: 150px;
background-color: lightseagreen;
}
.box1{
position:relative;
left:150px;
/*距离左边150px*/
}
.box2{
}
.box3{
position:relative;
left:150px;
top:-150px;
}
.box4{
position:relative;
left:150px;
bottom:150px;
}
.box5{
position:relative;
left:300px;
top:-450px;
}
</style>
</head>
<!--<body style="border:1px solid black">-->
<!--
定位:将元素在页面中重新排列,分为四类
1.静态定位: 浏览器默认方式, 即文档流中的位置
2.相对定位: 元素并未脱离文档流,只是相对于它原来的位置,做相对移动
3.绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
4.固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位
-->
<!--<div style="width:100px;height:100px;background-color:red;position:relative;top:50px;left:30px;"</div>-->
<!--相对body定位-->
<!--案例：十字架-->
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
定位:将元素在页面中重新排列,分为四类
1.静态定位: 浏览器默认方式, 即文档流中的位置
2.相对定位: 元素并未脱离文档流,只是相对于它原来的位置,做相对移动
3.绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
4.固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<!--绝对定位某种意义上是相对定位的一种，但需要一个定位父集。-->
<style>
.box1 {
width: 150px;
height: 150px;
background-color: lightblue;
}
.box2 {
width: 150px;
height: 150px;
background-color: lightgray;
}
.box3 {
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box4 {
width: 150px;
height: 150px;
background-color: lightcoral;
}
.box5 {
width: 150px;
height: 150px;
background-color: lightseagreen;
}
.box1{
/*绝对定位元素脱离文档流，则脱离后下面的元素自动占据前一个元素的位置*/
position:absolute;
left:150px;
/*距离左边150px*/
}
.box2{
position:absolute;
top:150px;
}
.box3{
position:absolute;
left:150px;
top:150px;
}
/*!* 注: 这里必须使用负数才可以向反方向移动 *!*/
.box4{
position:absolute;
left:150px;
top:300px;
/*或bottom:-300px;绝对定位一般没有负值*/
}
.box5{
position:absolute;
left:300px;
top:150px;
}
.parent{
border:1px dotted black;
height:450px;
width:450px;
/*给定位父集盒子添加一个定位属性*/
position:relative;
/*相对定位基本都用来给绝对定位父集进行定位属性*/
}
</style>
</head>
<body >
<!--
定位:将元素在页面中重新排列,分为四类
1.静态定位: 浏览器默认方式, 即文档流中的位置
2.相对定位: 元素并未脱离文档流,只是相对于它原来的位置,做相对移动
3.绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
4.固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位
-->
<!--<div style="width:100px;height:100px;background-color:red;position:relative;top:50px;left:30px;"</div>-->
<!--<div style="height:300px;width:300px;background-color:lightgreen;position:absolute">-->
<!--<div style="height:100px;width:100px;background-color:red;position:absolute;-->
<!--top:30px;left:30px"></div>-->
<!--</div>-->
<!--绝对定位案例：十字架-->
<div class="parent">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5. 模仿完成课堂上的二个定位案例:模拟php中文网登陆(遮罩+绝对定位)和固定定位广告的展示方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位实例（php中文网）：遮罩</title>
<style>
body{
margin:0;
background-image:url(“”);
background-size:cover; /*背景平铺*/
background-repeat: no-repeat;
}
/*设置遮罩，使用绝对定位，自动伸展到整个窗口,宽高拉伸100%，top:0,left:0*/
.shadow{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:black;
opacity:0.3;
/*背景透明度*/
}
.login img{
position:absolute;
height:460px;
width:380px;
}
.login{
background-color:white;
position:absolute;
top: 50%;
left:50%;
margin-top:-230px;
margin-left:-190px;
}
</style>
</head>
<body >
<div class="shadow"></div>
<div class="login img"><img src="https://img.php.cn/upload/image/117/263/185/1563172771345473.jpg" alt="login.jpg"></div>
<div class="login"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟着屏幕滚动不消失的广告</title>
<style>
body{
height:2000px;
}
.ads{
width:350px;
height:250px;
background-color: lightblue;
/*固定定位相对于body,固定在某一位置*/
right: 0;
/*右下角*/
bottom: 0;
position:fixed;
}
</style>
</head>
<body>
<h2>固定定位小案例</h2>
<div class="ads">
<button onclick="this.parentNode.style.display='none'">x</button>
<h2>php中文网第七期线上班</h2>
<h1>招生进行中...</h1>
</div>
</body>
</html>
<!--固定定位相对于body，参照物固定；相对定位相对于原来位置进行定位-->点击 "运行实例" 按钮查看在线实例
定位:将元素在页面中重新排列,分为四类
1.静态定位: 浏览器默认方式, 即文档流中的位置
2.相对定位: 元素并未脱离文档流,只是相对于它原来的位置,做相对移动
3.绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高
4.固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位相对定位：没有脱离文档流，
相对定位没有脱离文档流，position:relative; 相对定位未脱离文档流，相对原来所在位置进行相对移动。
绝对定位需要定位父集, position:absolute; 只有绝对定位，才能保证内容在页面中间，无论如何页面（缩放或拉伸）。脱离文档流。
固定定位相对于body，固定在某一固定位置，且未脱离文档流。position:fixed;
背景透明度：opacity:0.7;
浮动
清浮动：
为什么要清浮动?
当有嵌套关系的元素时, 父元素的高度应该由子元素撑开
元素浮动后, 脱离了文档流,如果有父级区块,则父元素无法再包裹住
<div style="border: 2px solid; float: left;">
清浮动的方式：
嵌套盒子，当子盒子浮动时，如何调整父集？
方案一：父元素设置与子元一样的高度,缺点：修改子盒子必须同时修改父盒子的高度
.box1{
height:300px;
}
方案二：父元素跟着子元素一起浮动，缺点：如果box1还有父元素, 那么也要添加float,逐级向上浮动
.box1{
float:left;
}
方案三：添加附加元素，专门用来清浮动
.clear{
clear: both;
}
方案四（首选）：创建特殊元素块BFC，在父集添加属性overflow:hidden使父集包裹子元素
.box1{
overflow: hidden;
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
