博客列表 >盒模型分析-2019年7月4日

盒模型分析-2019年7月4日

坏人也温柔de陈词滥调
坏人也温柔de陈词滥调原创
2019年07月22日 16:33:04446浏览

实例

<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(外边距),border(边框),padding(内边距)

一个完整的div 从内到外顺序依次为:content ->  padding -> border -> margin

padding:从内容到内边框的距离;

margin:从外边框到其他同级或父级元素之间的距离

margin , padding , border 相同之处

设置顺序 依次为 上 -> 右 -> 下 -> 左


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议