初学HTML&CSS——盒子模型

index.php/tags-41973.html" >���子模型

• 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
• 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

                  盒子模型            p {            width: 200px;  /* 宽度 */            height: 200px;  /* 高度 */            box-sizing: border-box; /* 指定width height为盒子的高宽 */            background-color: aquamarine; /* 背景色 */                        padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/             border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */            margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */        }                    A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A