CSS盒子模型

盒子模型在网页布局和样式中有很重要的应用。主要用法如下:

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; 
}

所以,总结来说,盒子模型在网页开发中主要用于:- 设置元素大小(内容区大小)
- 创建内边距、边框和外边距
- 元素布局:相对布局、响应式布局等
- 控制内容溢出
- 等等