[分享]css中box属性有哪些

在CSS中，box属性是一个非常重要的属性，可以控制元素的外观和布局。下面是一些常见的box属性：

.box {
  /* 宽度和高度 */
  width: 200px;
  height: 100px;
  
  /* 边框 */
  border: 1px solid black;
  
  /* 内边距 */
  padding: 10px;
  
  /* 外边距 */
  margin: 20px;
  
  /* 背景颜色 */
  background-color: gray;
  
  /* 盒子模型 */
  box-sizing: border-box;
} 

1. 宽度和高度

width控制元素的宽度，height控制元素的高度。可以使用像素、百分比、rem等单位。

.box {
  width: 50%;
  height: 200px;
} 

2. 边框

使用border属性可以给元素添加边框。可以指定边框的宽度、样式和颜色。

.box {
  border: 2px dotted red;
} 

3. 内边距

使用padding属性可以控制元素的内边距。内边距是元素内容和边框之间的距离。

.box {
  padding: 10px;
} 

4. 外边距

使用margin属性可以控制元素的外边距。外边距是元素和其他元素之间的距离。

.box {
  margin: 20px;
} 

5. 背景颜色

使用background-color属性可以给元素添加背景色。

.box {
  background-color: gray;
} 

6. 盒子模型

box-sizing属性可以控制元素的盒子模型，有两种盒子模型：content-box和border-box。content-box模型表示元素的宽度和高度只包含内容，不包含padding和border的宽度。border-box模型表示元素的宽度和高度包含内容、padding和border的宽度。

.box {
  box-sizing: border-box;
}