background:背景色
盒子区：内容区（content)、
边框（border)、
内边距（padding)、
外边距（margin)
auto(自动）
相邻两个盒子之间同时设置margin,最终取的值是最大的那一个。
外边距塌陷：嵌套的两个盒子之间同时设置margin,最终取的值也是最大的个。
避免嵌套盒子外边距塌陷：给父和子添加边框、或添加padding、或添加overflow:hidden；
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box{
width:500px;
height:400px;
/* border:solid 5px deeppink; */
/* padding:50px; */
/* 背景色 */
background-color:pink;
/* 四个值:上 右 下 左 顺时针 */
/* 三个值:上 左右 下 */
/* 两个值:上 下 左 右 */
/* margin:100px 200px 300px 400px; */
/* margin-left:200px; */
margin:10px auto;
/* 给左右外边距设置auto(自动),盒子水平居中显示 */
/* 超出部分:隐藏 */
overflow:hidden;
}
.boxt{
width:200px;
height:100px;
border:solid 5px green;
padding:50px;
background-color:skyblue;
margin:50px auto;
}
</style>
</head>
<body>
<div class="box">
<div class="boxt">即可更换手机</div>
</div>
</body>
</html>```
扫一扫
3516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
