Hosy~Ye 的部落宅

盒子模型之box-sizing

2018-01-30

很多时候我们需要去做一个带边框的一分为几的布局，但是呢，一旦border-width设置了布局就会发生变化。


那么如何解决呢？


方法之一:border-sizing

1
2
3
4
5
6
7
8
<div class="list-wrap">
	<ul>
		<li>内容1</li>
		<li>内容1</li>
		<li>内容1</li>
		<li>内容1</li>
	</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*重置样式*/
html,body,div,ul,li{
	margin: 0;
	padding: 0;
}
ul{
	width: 100%;
	list-style: none;
}
ul li{
	float: left;
	width: 25%;
	height: 100px;
	border: 1px solid red;
	background: gray;
	box-sizing: border-box;
}
ul li:last-child{
	padding: 20px;
	background: #eee;
}