收藏
批改状态：合格
老师批语：下次可以换个素材做, 不一定要做的与老师完全一样
我把图片存在这里，方便下面的调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding对盒子的影响</title>
<style>
.box1{
width: 300px;
height:300px;
background-color: cyan;
border: 1px solid black;
padding:50px;
}
.box1{
width:200px;
height:200px;
}
.box2{
background-color: lightgreen;
border: 1px solid black;
padding: 50px;
}
.wrap{
width: 300px;
height: 300px;
}
.box3{
width: 300px;
height:300px;
background-color:lightcoral;
border: 1px solid black;
padding:50px;
box-sizing: border-box;
}
</style>
</head>
<body>
<!--方法一：重设with，利用css的层叠来解决width-->
<div class="box1">
<img src="https://img.php.cn/upload/image/747/163/968/1562465889694757.jpg" alt="小姐姐" width="200">
</div>
<hr>
<!--方法二利用宽度分离-->
<div class="wrap">
<div class="box2">
<img src="https://img.php.cn/upload/image/747/163/968/1562465889694757.jpg" alt="小姐姐" width="200">
</div>
</div>
<hr>
<!--方法三box-sizing指定width到border上（ie的盒模型）-->
<div class="box3">
<img src="https://img.php.cn/upload/image/747/163/968/1562465889694757.jpg" alt="小姐姐" width="200">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
方法一的原理
标准浏览器下padding会撑大盒子的宽高，解决方法呢，css中再新写个宽高，利用css的层叠原理覆盖它。
方法二的原理
宽度分离原则
所谓“宽度分离”，就是CSS中的width属性不与影响宽度的border/padding(有时候包括margin)属性共存。
即不能出现以下的些组合：
{width:200px; border:1px solid #ccc;}
或者是：
{width:200px; padding:20px;}
即CSS中的width属性不与影响宽度的padding/border（有时候包括margin）属性一同使用，即一个div的宽度设计分离成一个父div给定width属性，子div给定padding/border这些属性，如此一来，便于维护，在width不变的情况下，只需要修改padding/border值就可以完成。
方法三的原理：box-sizing:border-box
利用ie 的盒模型来解决(这种方法最好用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin的三个难点</title>
<style>
.box1{
width: 200px;
height:200px;
background-color: lightcoral;
margin-bottom:20px;
}
.box2{
width: 200px;
height: 200px;
background-color: lightgreen;
margin-top: 30px;
}
.box3{
width: 200px;
height: 200px;
background-color: lightgreen;
border:1px solid black;
}
.box4{
width: 100px;
height: 100px;
background-color: lightseagreen;
margin: 50px;
}
.div5{
width: 200px;
height:200px;
background-color: cyan;
margin:10px auto;
}
</style>
</head>
<body>
<!--同级塌陷-->
<div class="box1"></div>
<div class="box2"></div>
<hr>
<!--嵌套传递-->
<div class="box3">
<div class="box4"></div>
</div>
<hr>
<!--自动挤压-->
<div class="div5"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
margin 的同级塌陷
在垂直方向上同级之间的margin会发生塌陷现象，上盒子的margin-bottom和下盒子的margin-top之间真正的外边距是较大者
margin的嵌套传递
在垂直方向上子元素的margin-top会传递给父元素（父元素没有margin-top属性），解决方法1，父元素设置padding-top，同时新添加width（重新计算），方法2给父元素设定border属性。
margin的自动挤压
margin-left:auto 左边被挤压，跑到右边去，左边给予最大的宽度
margin-right:auto 右边被挤压，跑到左边去，右边给予最大的宽度
margin：auto 左右方向被挤压，也就是水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动的实现原理与清除的技巧</title>
<style>
.box1{
width:100px;
height:100px;
background-color:lightseagreen;
float: left;
}
.box2{
width:150px;
height:150px;
background-color:coral;
float: left;
}
.box3{
width:200px;
height:200px;
background-color:skyblue;
float: right;
}
.box4{
width:auto;
height:130px;
background-color:lightgreen;
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
浮动的特性
1：脱离文档流
2：浮动元素互相贴靠
3：浮动元素有字围效果
4：浮动元素有收缩效果
float是魔鬼能印象后面的元素，用clear：left能抵抗左边的float作用，同理clear：right能抵抗右边的float作用
clear：both能抵抗两边的float作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位与绝对定位</title>
<style>
.box1{
width:100px;
height:100px;
background:lightblue;
position: relative;
left:100px;
}
.box2{
width:100px;
height:100px;
background:lightgreen;
}
.box3{
width:100px;
height:100px;
background:lightseagreen;
position: relative;
top:-100px;
left:100px;
}
.box4{
width:100px;
height:100px;
background:lightcoral;
position: relative;
left:200px;
top:-200px;
}
.box5{
width:100px;
height:100px;
background:lightpink;
position:relative;
left:100px;
top:-200px;
}
.box6{
width:100px;
height:100px;
background:lightblue;
position: absolute;
left: 100px;
}
.box7{
width:100px;
height:100px;
background:lightgreen;
position: absolute;
top:100px;
}
.box8{
width:100px;
height:100px;
background:lightseagreen;
position: absolute;
top:100px;
left:100px;
}
.box9{
width:100px;
height:100px;
background:lightcoral;
position: absolute;
top:100px;
left:200px;
}
.box10{
width:100px;
height:100px;
background:lightpink;
position: absolute;
top:200px;
left:100px;
}
.wrap{
border: 1px solid black;
position: relative;
}
</style>
</head>
<body>
<!--用相对定位来写-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<hr>
<!--用绝对定位来写-->
<div class="wrap">
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
相对定位不脱离文档流，相对它自己原来的位置进行偏移。
绝对定位脱离文档流，它的参照物是父元素要有个position属性（一般设置为relative）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟php中文网登陆(遮罩+绝对定位)</title>
<style>
body{
margin:0;
background-image:url("https://img.php.cn/upload/image/650/513/102/1562550348333324.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.shade{
width:100%;
height:100%;
background-color: black;
position: absolute;
opacity: 0.7;
}
.login {
position: absolute;
left:50%;
top: 50%;
margin-top: -230px;
margin-left:-190px;
}
.login img{
width:380px;
height:460px;
}
</style>
</head>
<body>
<div class="shade"></div>
<div class="login">
<img src="https://img.php.cn/upload/image/620/742/406/1562550358860885.jpg" alt="扫码登录">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
注意点
遮罩层要设置绝对定位，因为你要对全屏遮罩
登录层也要绝对定位，它总在屏幕的水平和垂直居中。先用绝对定位的left:50%和top:50%定位，再利用margin进行反向拉来做到居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位小广告</title>
<style>
body{
height:2000px;
}
.ads{
background-color: lightblue;
width:350px;
height:250px;
position: fixed;
right:0;
bottom: 0;
text-align: center;
}
h1{
line-height: 100px;
}
p{
margin-top:50px;
}
button{
float:right;
}
</style>
</head>
<body>
<div class="ads">
<button onclick="this.parentNode.style.display='none'">关闭</button>
<p>php中文网第7期先上班</p>
<h1>招生进行中</h1>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
利用固定定位，以body为参照物，配合js完成。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
