收藏
批改状态：合格
老师批语：很简洁
一、浅析盒模型
浅析margin（外边距），border（边框），padding（内边距）
一个完整的div 从内到外顺序依次为：content -> padding -> border -> margin
padding：从内容到内边框的距离；
margin：从外边框到其他同级或父级元素之间的距离
<style>
/*禁止全部默认外边距，内边距*/
*{margin:0;padding:0;}
.box{
margin-top:20px;
margin-right:15px;
margin-bottom:10px;
margin-left:5px;
background-color: aquamarine;
width:300px ;
height: 300px;
padding-top:5px;
padding-right: 10px;
padding-bottom:15px;
padding-left:5px;
border-top: 1px solid black;
border-right: 3px dotted black;
border-bottom: 5px double black;
border-left: 7px dashed black;
/*border:10px groove red;*/
/*border-style:groove;*/
}
.box1{
background-color: #888888;
width: 200px;
height: 200px;
margin:20px;
padding: 20px;
}
.box2{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div class="box2"></div>
</div>
</div>点击 "运行实例" 按钮查看在线实例
总结：
margin , padding , border 相同之处
设置顺序 依次为 上 -> 右 -> 下 -> 左
设置一个时 默认为4边为相同样式
设置两个时 默认为第一个参数 设置上下 第二个参数设置左右
border样式缩写 排列顺序 border: border-width border-style border-color;
border-style 可分为 dotted(点状)，solid(实线)，double(双实线)，dashed(虚线)，groove(3D凹槽)，ridge(3D凸槽)
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
