盒模型分为两种:标准模型和IE模型,主要了解标准模型
盒模型示意图
盒子模型的属性
width :内容的宽度
height: 内容的高度
padding: 内边距,边框到内容的距离
border: 边框,就是指盒子的宽度
margin :外边距,盒子边框到附近最近盒子的距离
盒模型的计算
盒子的真实宽度 = width +2*padding +2*border
盒子的真是高度 = height +2*padding+2*border
标准盒模型,width不等于盒子真实的宽度。
另外如果要保持盒子真实的宽度,那么加padding就一定要减width,减padding就一定要加width。真实高度一样设置。
[border:none 一般用这个干掉按钮周边的boder
boder 也可以把文字往中间挤,加border时也要减宽或者高,这样就可以往里面挤了
]