目录
当上下两个元素设置margin-bottom和margin-top时
盒模型
Windows:在游览器中按f12或右击检查
- margin(外边距) - 清除边框外的区域,外边距是透明的
- border(边框) - 围绕在内边距和内容外的边框。
- padding(内边距) - 清除内容周围的区域,内边距是透明的。
- content(中间内容) - 盒子的内容,显示文本和图像。
border
(边框)
border的设置
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: aqua;
/* 设置边框
solid 实线
dashed 虚线
*/
/* border: 5px #00FFFF solid; */
/* 四个方向的边框可以分别设置 */
/* border-left、border-right、border-top、border-bottom */
/* border-left: 5px #00FFFF solid; */
/* 边框的样式也可以单独设置 */
border-left-color: #0000FF;
border-left-width: 5px;
border-left-style: solid;
}
</style>
padding
(内边距)
padding的设置
<style type="text/css">
div{
width: 100px;
height: 30px;
background-color: antiquewhite;
/* 设置四个方向*/
padding: 20px;
/* 分别设置padding的上右下左*/
padding-top: 100px;
padding-right: 60px;
padding-bottom: 50px;
padding-left: 40px;
/* 设置上下内边距为20px,左右边距为40px */
padding: 20px 40px;
/* 或者直接设置四个方位,四个数分别对应上右下左,从上开始,顺时针设置*/
padding: 10px 20px 30px 40px;
/* 正常盒模型:设置padding和border会让元素变大 */
/* IE盒模型:设置padding和border不会让元素变大,会压缩内容区域*/
border: 100px solid aqua;
}
</style>
正常盒模型与IE盒模型的区别?
正常盒模型:设置padding和border会让元素变大
IE盒模型:设置padding和border不会让元素变大,会压缩内容区域
创造IE盒模型
/* 创造IE盒模型 */
box-sizing: border-box;
margin
(外边距)
margin的设置
<style type="text/css">
div{
width: 100px;
height: 30px;
background-color: antiquewhite;
/* 四个方向的外边距 */
margin: 100px;
/* 第一个值是上下,第二个是左右*/
margin: 100px 200px;
/* 从上开始顺时针设置 */
margin: 10px 20px 30px 40px;
/* 分方向设置 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
</style>
当上下两个元素设置margin-bottom和margin-top时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 上下两个元素同时设置margin-bottom和margin-top
会发生叠压 取最大值 -->
<div style="margin-bottom: 100px;background-color: #FF0000;">one</div>
<div style="margin-top: 80px; background-color: #FFFF00;">two</div>
</body>
</html>
margin的传递问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#out{
width: 300px;
height: 300px;
background-color: #00FFFF;
}
#in{
width: 100px;
height: 100px;
background-color: #ffff7f;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- 第一个子元素的margin-top会传递给子元素 -->
<div id="out">
<div id="in"></div>
</div>
</body>
</html>
解决方法:
1.给父级设置border
/* 第一种方法 */
border: 1px solid #FF0000;
2.overflow
子元素超出父元素被隐藏
overflow: hidden;
小练习:设置奥运五环效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 20px solid blue;
/* border-radius: 120px 120px 120px 120px;*/
border-radius: 50%;
}
#black{
border-color: black;
margin-top: -240px;
margin-left: 260px;
}
#red{
border-color: red;
margin-top: -240px;
margin-left: 520px;
}
#yellow{
border-color: yellow;
margin-top: -120px;
margin-left: 140px;
}
#green{
border-color: green;
margin-top: -240px;
margin-left: 400px;
}
</style>
</head>
<body>
<div></div>
<div id="black"></div>
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</body>
</html>