CSS小记

记录一些学习途中遇到的CSS小问题:

-------------------------------------------------------------------------------------------------

1.box-sizing: content-box(默认值) or  border-box

content-box 是我们平常用的默认值

用了border-box以后代表width，height等属性设置的时候不包括padding和border 。什么意思？ 

#demo{

width:200px;

height:200px;

padding:10px;

border:1px solid black;

}

那么最后渲染到浏览器的宽度等于 200（width） + 10*2（padding）+ 1*2 （border） 也就是222，而不是默认的centent-box下的200px。

------------------------------------------------------------------------------------------------------