收藏
批改状态：合格
老师批语：完成的不错
1、针对盒子的嵌套，两种设置内边距的方案
方案一：在外面盒子的外面，再套一个盒子，给最外面盒子设置宽度，再在之前的外面盒子中设置内边距，就可以使最里面的盒子居中
方案二：利用box-sizing的border-box属性值，在给外面盒子设置宽度其实是针对边框设置，这样在外面盒子设置内边距时，就不会影响内容的大小了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>理解内外边距的特殊</title>
<style>
#box1{
/*width: 300px;*/
/*height: 300px;*/
background-color: royalblue;
border: 1px solid darkturquoise;
/*让图片居中显示在box1中，千万不要增加box1的内边距，这位会将盒子内容增大*/
/*方案一：宽度分离。就是在box1外面再套一个盒子box，让box1继承box的宽度，而box1不再设置宽度*/
/*box1有了box的宽度，再对box1设置内边距、背景、边框*/
padding: 50px;
}
#box{
width: 300px;
}
/*方案二：利用box-sizing，让宽度作用到边框，也就是外部盒子上，此时box2对应img来说，相当于box对于box1而言*/
#box2{
width: 300px;
box-sizing: border-box;/*让宽度作用到边框上， 而不是盒子的内容上，属性值content-box意思就是作用到内容上
默认也是这个值*/
background-color:violet ;
border: 1px solid rosybrown;
padding: 50px;/*此时的 内边距就不会影响盒子内容了*/
}
</style>
</head>
<body>
<div id="box">
<div id="box1">
<img src="static/images/img01.jpg" alt="知否" width="200px">
</div>
</div>
<div id="box2">
<img src="static/images/img01.jpg" alt="知否" width="200px">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、熟悉外边距的特征
上下的外边距存在“同级塌陷”的现象，会以更大值为准。
父子盒子之间存在“嵌套传递”的现象，也就是给子盒子设置外边距时，这个值传递给父盒子，子盒子不会生效。
左右边距存在“互相挤压”的现象，当左右边距都是auto时，左右互相抗衡会使得元素水平居中对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>理解内外边距的特殊</title>
<style>
/*外边距特征一：同级塌陷*/
/*两个盒子之间的上下外边距，盒子之间的距离不是简单地两者相加，而是以更大的值为准*/
#box3 {
width: 100px;
height: 100px;
background-color: teal;
margin-bottom: 20px; /*添加下外边距*/
}
#box4 {
width: 100px;
height: 100px;
background-color: teal;
margin-top: 30px;/*添加上外边距*/
}
/*外边距特征二：嵌套传递*/
#box5 {
width: 100px;
height: 100px;
background-color: rebeccapurple;
padding-top: 20px;/*为了使子盒子和父盒子之间有间隙，正确做法是增加父盒子的内边距*/
}
/*外边距特征三：自动挤压*/
#box6 {
width: 50px;
height: 50px;
background-color: darkturquoise;
/*margin-top: 20px;!*为了使子盒子和父盒子之间有间隙，常规思想是给子盒子增肌一定的内边距*/
但由于外边距会自动传递给腹肌，所以结果不是我们想的那样*/
}
#box7 {
width: 100px;
height: 100px;
background-color:darkgreen;
/*margin-left: auto;!*只有这句代码，会使左侧空间都给盒子的左外边距，所以盒子会挤压到右边*!*/
/*margin-right: auto;!*只有这句代码，会使右侧空间都给盒子的右外边距，所以盒子会挤压到左边*!*/
/*margin: 0 auto;左右边距都是auto,会使左右边距互相抗衡，左右互不相让就平衡了*/
margin: auto;/*由浏览器决定，始终左右居中*/
}
</style>
</head>
<body>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5">
<div id="box6"></div>
</div>
<div id="box7"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、浮动
文档流就是浏览器本来给元素的排列方式，按照从左到右、从上到下的方式进行排列。
给元素添加浮动属性 或者 进行绝对定位，就会使元素脱离文档流，到达一个所谓的浮动流 由我们控制的空间内。
浮动流的起始点取决于第一个浮动元素的位置，结束点取决于最后一个浮动元素的位置。
浮动流元素后面的文档流元素，会继续接着之前的文档流元素排列，可能会被浮动元素覆盖。如果要不被覆盖，可以对其进行清除浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1、文档流就是指html元素会被浏览器按照书写顺序，依次从左到右,从上到下进行排列。
2、所谓的浮动流就是让元素脱离文档流，到达一个由我们控制的空间中，而不是由浏览器控制。
3、让元素到达浮动流有两个方法：一是利用浮动属性，二是绝对定位。
-->
<style>
.box {
width: 100px;
height: 100px;
background-color: fuchsia;
border: 2px solid red;
}
/*浮动流的起始点，取决于第一个浮动元素的位置，前面可能存在文档流元素*/
/*浮动流的结束点，取决于最后一个浮动元素的位置*/
/*浮动流元素后面的文档流元素，会继续接着之前的文档流元素排列，可能会被浮动元素覆盖*/
#box1 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
float: left;/*左浮动，该元素在浮动流中向左对齐，由于是第一个浮动元素，所以在浮动流中排在第一个*/
}
#box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;/*左浮动，该元素在浮动流中向左对齐，由于是第二个浮动元素，所以排在第一个的右边*/
}
#box3 {
width: 100px;
height: 200px;
background-color: olive;
float: right;/*右浮动，该元素在浮动流中向右对齐*/
}
/*box4会按照文档流的方式继续排序，但由于前面有浮动元素，所以被浮动元素遮挡了
可以通过清除浮动来解决被遮挡的问题*/
#box4 {
height: 20px;
background-color: lightgray;
clear: left;/*清除向左浮动元素的遮挡*/
clear: right;/*清除向右浮动元素的遮挡*/
clear: both;/*等同于上面两句话，清除前面左右浮动元素的遮挡*/
}
</style>
</head>
<body id="parent">
<div id="yi" class="box">一</div>
<div id="er" class="box">二</div>
<div id="san" class="box">三</div>
<div id="si" class="box">四</div>
<div id="box1">1</div><!--现在让这个元素脱离文档流-->
<div id="box2">2</div><!--现在让这个元素脱离文档流-->
<div id="box3">3</div><!--现在让这个元素脱离文档流-->
<div id="box4">4</div><!--现在让这个元素脱离文档流-->
<div class="box">五</div>
<div class="box">六</div>
<div class="box">七</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、定位
相对定位的元素，如果是文档流元素，就是基于它本来所在的文档流中的位置，进行上下左右的移动。需要加上相对定位的属性。
相对定位的元素，如果是浮动流元素，就是基于它本来所在的浮动流中的位置，进行上下左右的移动。需要加上相对定位的属性。
绝对定位，一定要给父级加上一个相对定位的属性，如果元素没有父级，默认就是body。需要加上相对定位的属性，加上以后就脱离了文档流，成为了块元素，支持宽高。
固定定位，始终是基于浏览器来发生上下左右的移动，如果不设置某些方向，则就是原来的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: fuchsia;
border: 2px solid red;
}
/*关于定位
1、静态定位就是文档流默认的排列方式
2、相对定位：元素依然在文档流中，只是相对于它本来会在的位置 发生上下左右的移动。
3、绝对定位：元素脱离文档流，默认针对整个窗口，也就是是<body> 发生上下左右的移动，
归属于浮动流中，变成了块元素，支持宽高。
4、固定定位：对于浏览器而言，它的位置是***的
*/
/*练习相对定位*/
#yi{
position: relative;
left: 200px;/*把元素“一”向右移动200px*/
top: 100px;/*把元素“一”再向下移动200px*/
}
#box2{
position: relative;/*浮动元素进行相对定位时，是基于它所在浮动流中的位置来进行 上下左右的移动*/
left: 100px; /*盒子一 基于它本来所在文档流的位置向右移动了100*/
}
/*练习绝对定位*/
#parent{
position: relative; /*一定要给父级加上定位，推荐用相对定位*/
border: 1px dashed gray;/*便于看基线，给父级加上一个边框*/
}
#er{
position:absolute;
left: 300px; /*与相对定位相比，这里的位置变化要考虑父级默认的外边距，边框，内边距*/
/*盒子二如果基于父级body向右移动200，就会和盒子一 重叠*/
top:100px;/*与相对定位相比，这里的位置变化要考虑父级默认的外边距，边框，内边距*/
}
/*练习固定定位*/
#san{
position: fixed;
left: 300px;
top: 0;/*如果不设置top,就是它本来的top*/
}
</style>
</head>
<body id="parent">
<div id="yi" class="box">一</div>
<div id="er" class="box">二</div>
<div id="san" class="box">三</div>
<div id="si" class="box">四</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
