前端-----盒子模型

盒模型分为两种:标准模型和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时也要减宽或者高,这样就可以往里面挤了

]

猜你喜欢

转载自www.cnblogs.com/liuafan/p/9449509.html