css box边框挤在下面去了,css3——box-sizing属性

很多朋友们可能会疑惑，不知道box-sizing属性是有什么作用，自己也很少会用到，但是想必不少人在做网页布局的时候经常遇到一个问题就是我明明设置了父元素设置了假如是宽高500px，5个子元素左浮动设置宽高均是100px都设置有边框。为什么第五个元素被挤下到第二排呢？

例子1：

1

2

3

4

5

加边框的

6

7 .box{

8 width:300px;

9 height:300px;

10 border:1px solid black;

11 margin:0 auto;

12 }

13 .first{

14 width:150px;

15 height:100px;

16 float:left;

17 background:pink;

18 border:1px solid red; /*增加了边框*/ /*解决方法在这里增加box-sizing:border-box*/

19 }

20 .second{

21 width:100px;

22 height:100px;

23 background:blue;

24 float:left;

25 }

26 .third{

27 width:50px;

28 height:100px;

29 float:left;

30 background:green;

31 }

32

33

34

35

36

37 123