09-盒模型

盒模型

在CSS中,"box model"这一术语是用来设计和布局时使用,而后在网页中基本上都会显示一些方方正正的盒子。咱们称为这种盒子叫盒模型。布局

盒模型有两种:标准模型和IE模型。咱们在这里重点讲标准模型。设计

 

盒模型示意图

 

盒模型的属性

width:内容的宽度blog

height: 内容的高度model

padding:内边距,边框到内容的距离im

border: 边框,就是指的盒子的宽度margin

margin:外边距,盒子边框到附近最近盒子的距离img

 

若是让你作一个宽高402*402的盒子,您如何来设计呢?di

答案有上万种,甚至上一种。co

盒模型的计算

若是一个盒子设置了padding,border,width,height,margin(我们先不要设置margin,margin有坑,后面课程会讲解)术语

 

盒子的真实宽度=width+2*padding+2*border

盒子的真实宽度=height+2*padding+2*border

 

那么在这里要注意看了。标准盒模型,width不等于盒子真实的宽度。

另外若是要保持盒子真实的宽度,那么加padding就必定要减width,减padding就必定要加width。真实高度同样设置。

相关文章
相关标签/搜索