批改状态:合格
老师批语:很简洁
一、浅析盒模型
浅析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号