css盒模型

1.什么是盒子模型

盒子模型是CSS样式修饰之后一个元素占用整个HTML页面的空间大小操作方式

存在外边距，边框，内边距和元素本身

2.边框、内外边距的界限

border-width:边框宽度
border-style:边框样式
solid 实线 double 双实线/空心线
dashed 虚线 dotted 圆点虚线
border-color:边框颜色

border: 边框宽度, 边框样式, 边框颜色;
例如: border: 10px solid black;

 <style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        /* 边框的宽度，样式和颜色 */
        border: 10px solid black;
        /*border-width: 10px;*/
        /*border-style: dashed;*/
        /*border-color: green;*/
    }
</style>

3.内边距、边框以内的世界

/* 内边距 padding /
/padding-top: 50px;/
/padding-left: 100px;/
/padding-right: 200px;/
/padding-bottom: 150px;/
/
一个尺寸：所有的内边距都是该尺寸
二个尺寸: 第一个尺寸对应上下内边距，第二个尺寸对应左右内边距
三个尺寸: 第一个尺寸对应上内边距，第二个尺寸对应左右内边距，第三个尺寸对应下内边距
四个尺寸: 顺时针顺序，上右下左
*/

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            border: 5px solid red;
 
            /* 内边距 padding */
            /*padding-top: 50px;*/
            /*padding-left: 100px;*/
            /*padding-right: 200px;*/
            /*padding-bottom: 150px;*/
            /*
            一个尺寸：所有的内边距都是该尺寸
            二个尺寸: 第一个尺寸对应上下内边距，第二个尺寸对应左右内边距
            三个尺寸: 第一个尺寸对应上内边距，第二个尺寸对应左右内边距，第三个尺寸对应下内边距
            四个尺寸: 顺时针顺序，上右下左
            */
            padding: 100px 200px 150px 50px;
        }
    </style>

4.外边距margin

#id1 {
            /*外边距 margin */
            /*margin-top: 50px;*/
            /*margin-left: 100px;*/
            /*margin-right: 200px;*/
            /*margin-bottom: 150px;*/
            /*
            一个尺寸：所有的外边距都是该尺寸
            二个尺寸: 第一个尺寸对应上下外边距，第二个尺寸对应左右外边距
            三个尺寸: 第一个尺寸对应上外边距，第二个尺寸对应左右外边距，第三个尺寸对应下外边距
            四个尺寸: 顺时针顺序，上右下左
            */
            /*margin: 100px 200px 150px 50px;*/
 
        }

5.margin问题

 <style>
        /*
         问题1
            HTML中body标签和一些其他标签都带有一定的内外边距
            通常情况下，在在css样式表中适用 * 通配选择器 去除HTML标签自带
            的margin padding
         */
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>