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>