CSS盒模型详解：内容盒，边框盒_width: 200px; height: 40px; margin: 20px; padding:-CSDN博客

本文链接：https://blog.csdn.net/qq_62224122/article/details/146147209

盒模型

盒子模型（Box Modle）可以用来对元素进行布局

盒子模型的组成由margin（外边距）、border（边框），padding（内边距），content（内容）组成。

盒子模型分类：标准的盒子模型与怪异盒模型（IE低版本浏览器下会自动呈现）

CSS3中定义盒子模型类型属性box-sizing，content-box|border-box；

content-box内容盒

设置的width、height属性为内容的宽高

border-box边框盒

设置的width、height属性为边框以内，相关盒子属性（border+padding+content）的宽高

width：设置的盒子的宽度

height：设置的盒子的高度

<style>
        div {
            padding:10px;// 内边距
            margin: 20px;//外边距
            border: 10px solid greenyellow;//边框
            background-color: lightgreen;
            width: 300px;
            height: 300px;
        }
    </style>
    <body>
    <div>

    </div>
</body>

盒模型宽高计算

标准盒模型：元素的宽度和高度：content |width |height + border + padding + margin

怪异（IE）盒模型：元素的宽度和高度：width|height（content + border + padding） + margin

左右留白：网站左侧内边距是固定的，内容在右侧甩出的空白不一样，可以给定一个固定宽度，只设置左边内边距，右边空白区域自动剩余。

实际工作中，我们不设置高度。高度用内部的内容撑开。

是为了避免后期的问题。

margin

同级元素之间的距离，或者距离父元素之间的距离；

margin设置分类：

单值法：margin： 10px 设置盒子的上下左右的外边距都为10px

二值法：margin：10px 20px；设置盒子的上下外边距为10px 左右外边距为20px；

三值法：margin：10px 20px 30px；设置盒子上的上外边距为10px，左右为20px，下外边距为30px；

四值法：margin： 10px 20px 30px 40px 设置盒子的上左下右分别为10px 20px 30px 40px

按照方向划分：

margin-top 上外边距

margin-bottom 下外边距

margin-left 左外边距

margin-right 右外边距

例：

<style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;/*外边距*/
        }
       .box2{
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 10px;
        }
    </style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

border

border也可以根据方向设置，-top，-bottom ，-left， -right

border属性：

-style 设置边框的线形： soild实线 dashed 虚线 dotted 点线 double 双实线

-width：设置边框的厚度像素值 thick 粗线 thin 细线 medium 中等线宽

-color 设置颜色

简写四个方向：border style width color

<style>
        div {
            width: 200px;
            height: 200px;
            border: 5px solid red;
        }
    </style>
<body>
    <div></div>
</body>

padding

padding分类和margin一样，有四种设置方法

也可以在四个方向进行设置

 <style>
     div{
        width: 400px;
        height: 400px;
        background-color: coral;
        padding: 100px;
     }
     section{
        width: 200px;
        height: 300px;
        padding: 50px;
        background-color: deeppink;
     }
    </style>
<body>
    <div>
        <section></section>
    </div>
  </body>