盒模型

Posted baoshuang0205

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了盒模型相关的知识,希望对你有一定的参考价值。

和模型的概述

    边:边界

    内边距:解决内部矛盾  padding

    外边距:解决外部矛盾  margin

css的padding

    padding属于盒子内部的,padding改变盒子得跟着增加

写法

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: deeppink;
            margin-bottom: 5px;    /*盒子与盒子之间的距离*/
            /*写法第一种*/
            padding-top: 50px;    /*内边距上*/
            padding-right: 50px;  /*内边距右*/
            padding-right: 50px;  /*内边距下*/
            padding-bottom: 50px; /*内边距左*/
            /*写法第二种*/
            padding :50px;
            /*写法第三种*/
            padding:100px 200px 300px 400px;
            /*写法四 上下对应,左右对应*/
            padding:0 100px
        }
    </style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</body>

 

以上是关于盒模型的主要内容,如果未能解决你的问题,请参考以下文章

彻底搞懂标准盒模型和怪异盒模型

彻底搞懂标准盒模型和怪异盒模型

标准盒模型和怪异盒模型的差异

盒模型代码简写

css盒模型(css的两种盒模型:标准盒模型怪异盒模型)和 css3指定盒子模型种类的box-sizing属性

弹性盒模型