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>