<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
/*初始化外边距*/
margin: 0px;
/*外边距 margin*/
/*外边距就是两个元素之间的距离*/
/*外边距不影响元素的实际尺寸*/
/*外边距特性：
1.上下相邻元素都存在外边距时，实际两个元素的间距为外边距最大的值。
2.左右相邻元素都存在外边距时，实际两个元素的间距为两个元素外边距的和。 */
/**/
/*初始化内边距*/
padding: 0px;}
/*内边距 padding*/
/*内边框就是内容（content）到边框（border）的距离*/
/*内边距会影响元素的实际尺寸*/
/*内边距特性：
1. 简写 内边距，一个值时，同时设置4个方向的内边距。
例如： 例1
2. 两个值 , 第一个值为上下 ，第二个值为左右。
例如： 例2
3. 三个值, 上 左右 下。
例如： 例3
4. 四个值, 上 右 下 左。
例如： 例4 */
/**/
.box{width: 1000px;
height: 1000px;
background-color: pink;
padding: 10px;
/*例1. padding: 10px;*/
/*例2. padding: 10px 20px;*/
/*例3. padding: 10px 20px 30px;*/
/*例4. padding: 10px 20px 30px 40px;*/
margin: 10px;
border: 50px solid red;
text-align: center;}
.a1{font-size: 30px;}
dd{ padding: 10px 0px 10px 700px;}
</style>
</head>
<body>
<div class="box">
<h2>盒子模型由 内容 、 内边距 、 外边距 、 边框 组成</h2>
<br>
<h1>内容(width、height)：盒子的原始尺寸。</h1>
<br>
<h1>内边距(padding)：设置内容到边框的距离。</h1>
<h3>内边框就是内容(content)到边框(border)的距离。</h3>
<br>
<h1>外边距(margin)：设置两个盒子之间的距离。</h1>
<h3>外边距就是两个元素之间的距离。</h3>
<br>
<h1>边框(border)：围绕在内边距和内容外的是边框。</h1>
<h3>边框会影响元素的尺寸。</h3>
<br>
<hr>
<h3>盒子的实际尺寸 = 原始尺寸(width 、 height) + 内边距(padding) + 边框(border)</h3>
<hr>
<h3>
元素的实际尺寸 = 原始尺寸(width 、 height) + 内边距(padding)
<br>
</h3>
</div>
<dl class="a1">
<dt>内边距(padding)、外边距(margin)、边框(border) : </dt>
<dd>上(top)</dd>
<dd>下(bottom)</dd>
<dd>左(left)</dd>
<dd>右(right)</dd>
</dl>
</body>
</html>
版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除