目录
一、margin使用技巧
a.设置元素水平居中： margin:x auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
width: 200px;
height: 200px;
background-color: green;
margin: 50px auto 100px;/* auto自动计算左右宽度求平均值并赋值给左右相对于父级水平居中 */
}
</style>
<title></title>
</head>
<body>
<div class="box"></div>
</body>
</html>margin设置水平方向上的auto即会自动计算左右宽度求平均值并赋值给左右相对于父级水平居中。
b.margin负值让元素位移
1.没有使用margin负值时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin: 0;/* 使其不贴边 */
}
.box{
width:400px;
height: 156px;
background-color: pink;
margin: 50px auto 0px;/* 0为什么没有完全靠过去因为body本身自带8px的margin */
/* 可以给其负值方向向负方向走 */
}
.box div{
width: 200px;
height: 30px;
border: 1px solid green;/* 两条边 */
margin-top: ;/* 边框的合并 */
background-color: gold;
}
/* .box class{
border-bottom: 1px solid pink;
} */
</style>
<title></title>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div calss="last"></div>
</div>
</body>
</html>
2.使用了以后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin: 0;/* 使其不贴边 */
}
.box{
width:400px;
height: 156px;
background-color: pink;
margin: 50px auto 0px;/* 0为什么没有完全靠过去因为body本身自带8px的margin */
/* 可以给其负值方向向负方向走 */
}
.box div{
width: 200px;
height: 30px;
border: 1px solid green;/* 两条边 */
margin-top: -1px;/* 边框的合并 */
background-color: gold;
}
/* .box class{
border-bottom: 1px solid pink;
} */
</style>
<title></title>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div calss="last"></div>
</div>
</body>
</html>
3.解析
相对于没有使用margin-top负值的因为边框的存在导致每个div之间的间距为两个border的间距，而使用的使除第一个以外的元素向上移动一个像素，而第一个元素溢出导致最外面的发生微小的向上移动
c.垂直的margin外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box01, .box02{
width: 200px;
height: 200px;
background-color: gold;
}
.box01{
margin-bottom: 30px;
}
.box02{
margin-top: 20px;
}
/* margin设置上下垂直边距的合并如果重叠会选择最大的，当然只限于垂直方向 水平方向不限*/
</style>
<title></title>
</head>
<body>
<div class="box01">1</div>
<div class="box02">2</div>
</body>
</html>
二、塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败
a.表现
1.代码1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin: 0px;
}
.box1{
background-color: aqua;
height: 200px;
width: 400px;
margin: 0px auto 0px;
}
.box1 .box2{
background-color: brown;
height: 20px;
width: 400px;
margin: 0px auto 0px;
}
</style>
<title></title>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>2.结果1
3.代码2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin: 0px;
}
.box1{
background-color: aqua;
height: 200px;
width: 400px;
margin: 0px auto 0px;
}
.box1 .box2{
background-color: brown;
height: 20px;
width: 400px;
margin: 10px auto 0px;
}
</style>
<title></title>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>4.结果2
b.解决元素塌陷的方法
1.外部盒子设置一个边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin: 0px;
}
.box1{
background-color: aqua;
height: 200px;
width: 400px;
margin: 0px auto 0px;
border: 1px red solid;
}
.box1 .box2{
background-color: brown;
height: 20px;
width: 400px;
margin: 10px auto 0px;
}
</style>
<title></title>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2.外部盒子设置 overflow:hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin: 0px;
}
.box1{
background-color: aqua;
height: 200px;
width: 400px;
margin: 0px auto 0px;
overflow: hidden;
}
.box1 .box2{
background-color: brown;
height: 20px;
width: 400px;
margin: 10px auto 0px;
}
</style>
<title></title>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
3.使用伪元素类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin: 0px;
}
.box1{
background-color: aqua;
height: 200px;
width: 400px;
margin: 0px auto 0px;
}
.box1:before{
content: "";
display: table;
}
.box1 .box2{
background-color: brown;
height: 20px;
width: 400px;
margin: 10px auto 0px;
}
</style>
<title></title>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
4.练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.con{
width: 300px;
height: 300px;
background-color: gold;
}
/* 相当于在外面加边框实际上没加 */
.con:before{
content: "";/* 相当于啥也没加，但是表现上却和加了边框一样 */
display: table;/* 不可以少 */
}
.box{
width: 200px;
height: 100px;
background-color: green;
margin-top: 100px;
margin-left: 50px;
}
</style>
<title></title>
</head>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>
</html>
<!-- 两个盒子之间 只针对于margin-top有塌陷存在-->
三、元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。<!-- 默认的溢出 -->
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。<!-- 减去溢出部分 -->
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。<!-- 无论溢出与否都有滚动条 -->
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。<!-- 溢出才有滚动条 -->
5、inherit 规定应该从父元素继承 overflow 属性的值。<!-- 很少用 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid #000;
margin: 50px auto 0;
background-color: gold;
line-height: 30px;
overflow: hidden;/* 把那些溢出的藏起来 */
}
</style>
<title></title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
<!--
子级元素超过了父级元素就会有元素溢出
如果不给高度的话会自动撑开不会有元素溢出
-->
四、总结
学习了margin使用方法，塌陷、元素溢出的原理以及处理方法。margin:0px auto 50px；设置水平居中
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
