yejiang1015 · September 8, 2017 02:45 · yejiang1015 · Sep 8, 2017
diff --git a/使用border实现等边距布局 b/使用border实现等边距布局
 场景: 一个盒子，盒子内有四个子盒子，子盒子基于父盒子等边距居中，子盒子内的内容再基于子盒子居中---》实现等边距内容居中
 -------------------
 1. 假如等边距为16px；由于边框不会像margin一样出现合并。
 2. 给父盒子设置宽高,（UC浏览器获取不到flex布局的自适应的高度，可用定位0来得到高度：left:0,right:0,bottom:0,top:12rem;）
 3. 给父盒子设置边框，边框宽度为目标距离的一半
 4. 给子盒子设置边框，边框宽度为目标距离的一半 （边框上下左右都设置）
 5. 即可实现等边距效果，给边框设置边距自己的颜色即可实现
 6. 再用flex设置子盒子，使用flex属性可让子盒子内的内容居中
 7. 核心：父子同时设置目标距离的一半边框宽度，子盒子浮动
 8. 效果实现。

 ``
 // 两行两列 或者三行三列
 .list {
  width: 100%;
  height: 100%;
  border: 8px solid red;
 }
 .item {
  width: 50% / 33.33333%;
  height: 50% / 33.33333%;
  float: left;
  border: 8px solid red;
  display: flex;
  just-content: center;
  align-item: center;
 }
 // 效果 等边距为16px,所有内容居中显示
 ``
	场景: 一个盒子，盒子内有四个子盒子，子盒子基于父盒子等边距居中，子盒子内的内容再基于子盒子居中---》实现等边距内容居中
	-------------------
	1. 假如等边距为16px；由于边框不会像margin一样出现合并。
	2. 给父盒子设置宽高,（UC浏览器获取不到flex布局的自适应的高度，可用定位0来得到高度：left:0,right:0,bottom:0,top:12rem;）
	3. 给父盒子设置边框，边框宽度为目标距离的一半
	4. 给子盒子设置边框，边框宽度为目标距离的一半（边框上下左右都设置）
	5. 即可实现等边距效果，给边框设置边距自己的颜色即可实现
	6. 再用flex设置子盒子，使用flex属性可让子盒子内的内容居中
	7. 核心：父子同时设置目标距离的一半边框宽度，子盒子浮动
	8. 效果实现。

	``
	// 两行两列或者三行三列
	.list {
	width: 100%;
	height: 100%;
	border: 8px solid red;
	}
	.item {
	width: 50% / 33.33333%;
	height: 50% / 33.33333%;
	float: left;
	border: 8px solid red;
	display: flex;
	just-content: center;
	align-item: center;
	}
	// 效果等边距为16px,所有内容居中显示
	``
No results found