盒子模型在网页布局和样式中有很重要的应用。主要用法如下:
1. 设置元素大小可以通过设置宽度(width)和高度(height)来控制内容区的大小。
css div { width: 200px; height: 200px; }
2. 创建内边距(padding)设置内边距可以在内容和边框之间创建空间。
css div { padding: 20px; /* 上右下左 */ padding: 10px 20px; /* 上下 右左 */ padding: 10px 20px 0; /* 上 右下 左 */ }
3. 边框(border)样式可以设置边框宽度、样式和颜色。
css div { border: 1px solid red; /* 宽度 样式 颜色 */ }
4. 外边距(margin)设置外边距可以在元素边框和其他元素或包含块之间创建空间。
css div { margin: 20px; /* 上右下左 */ margin: 10px 20px; /* 上下 右左 */ }
5. 元素大小 = 内容 + 内边距 + 边框默认情况下,元素的总宽度/高度 = 内容宽度/高度 + 内边距 + 边框可以通过box-sizing: border-box; 改变这种计算方式,使元素大小 = 设定的值。内边距和边框就包含在该值内。
css div { box-sizing: border-box; width: 200px; /* 此时包含内容 + 内边距 + 边框 */ }
6. 实现响应式布局通过相对单位(%)设置宽度,并设置左右外边距为auto,可以实现响应式布局。
css div { width: 50%; margin: 0 auto; }
所以,总结来说,盒子模型在网页开发中主要用于:- 设置元素大小(内容区大小)
- 创建内边距、边框和外边距
- 元素布局:相对布局、响应式布局等
- 控制内容溢出
- 等等