盒子模型

一、盒子模型概述

1. 什么叫盒子模型 盒子模型是将页面中的所有元素都视为一个个盒子的概念； 盒子包含了宽度、高度、边框、外边距和内边距等属性；

2. <div>标记 <div>标记是一个区块容器标记，可以容纳各种各样的元素；

二、盒子模型的属性

1. 宽高 宽度（width）和高度（height）

2. 边框

   • 样式：border-style（实线、虚线、点线、双实线）
   • 宽度：border-width
   • 颜色：border-color
   • 圆角边框：border-radius（水平半径/垂直半径）

3. 边距

   • 外边距：盒子与盒子之间的距离 外边距使用margin属性进行设置
   • 内边距：里面的元素和边框之间的距离 内边距使用padding属性进行设置

4. box-sizing属性

   • Content-box（默认）：以内容区域为准，不包括边框和内外边距
   • border-box：内容区域会被边框和内外边距包括在内，防止文字移动边框随着变化

三、背景属性

1. 背景颜色（background-color） 设置盒子的背景颜色

2. 背景图片（background-image） 设置盒子的背景图片

3. 不透明度（opacity） 设置盒子的不透明度

4. 背景平铺（background-repeat） 设置背景图片在盒子中平铺的方式

5. 背景大小（background-size） 设置背景图片的大小

以上是关于盒子模型的概述和属性的介绍。在使用HTML和CSS进行页面设计时，准确理解盒子模型和掌握相关属性是非常重要的。通过合理地运用这些属性，可以打造出精美、符合设计需求的网页布局和样式。