css盒子模型和样式更改

• 2019-12-13
  好久没更新了哈~到年底了冲冲业绩（/笑哭）
  盒子模型超级常用的样式相关，包括怎么对齐，布局和背景设置等等。

(图片取自菜鸟教程）

盒子模型各部分说明

margin - 外边距，多个盒子排列时外边距取较大的那一个，并不是相加
border - 边框
padding - 内边距
content - 内容

盒子模型样式简写

这个基础应用直接放代码了哦

.box1{
	margin: 10px;	/* margin上下左右都为10px */
	padding: 20px 30px;		/* padding上下为20px，左右为30px */
}

/* 下面这种写法只需要记住，顺序为从上开始顺时针旋转就可以了 */
.box2{
	margin: 10px 20px 30px;		/* margin上为10px，左右为20px，下为30px */
	padding: 10px 20px 30px 40px;		/* padding上10px，右20px，下30px，左40px */
}

/* 也可以分开写，等价于box2 */
.box3{
	margin-top: 10px;
	margin-right: 20px;
	margin-left: 20px;
	margin-bottom: 30px;
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 40px;
	padding-bottom: 40px;
}

盒子模型宽高设置

1. 默认情况下，设置盒子的宽高是设置了content部分，这样就导致了有些地方不是很好布局，比如我们定义了两个宽度为50%的盒子，两个盒子在一行左右分布，但是同时我们需要加上边框，就会导致两个盒子的总宽度超过100%，第二个盒子会被挤到第二行。

2. 这种情况下，可以使用box-sizing解决。
   box-sizing默认值是content-box，就是我们写的width和height规定的是content的宽高，
   我们在这里定义为border-box，这时设置width和height就是content+padding+border一共的宽高了。

3. 当然不止这一种方法，还可以用cale(50%-npx)来计算宽高实现，这里就不展开讲了。

盒子模型背景设置

1. 在网页布局中，还有一种常见的需求。
   在盒子与盒子之间的布局中，我们必须使用到padding来定义，但是背景色或者背景图片并不设置到这么大的范围，这个时候可以使用 background-clip来定义背景范围。

2. background-clip的值和box-sizing相同，也有content-box和border-box。具体效果如图。