网页布局02 盒子模型

Posted rask

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页布局02 盒子模型相关的知识,希望对你有一定的参考价值。

基本概念

盒子模型,英文即box model。无论是div、span、还是a都是盒子,他们在网页上都要占据一定的空间,在进行布局的时候需要考虑他们所占据的空间大小。

例外情况:图片、表单元素作为文本处理,不作为盒子模型计算。

 

盒子模型主要CSS属性


盒子的属性有5个:width、height、padding、border、margin。如下:

width和height:内容的宽度、高度(不是盒子的宽度、高度)。
padding:内边距。
border:边框。
margin:外边距。

 

盒子模型的类型

通过css的属性box-sizing设置盒子模型的类型,该属性值有两个:

content-box:表示标准盒子模型

border-box:表示IE盒子模型

 

标准盒子模型

技术分享图片

标准盒子模型占据空间计算方式(横向为例):

横向占据空间=width  +  padding-left  +  padding-right  +  border-left  +  border-right  +  margin-left  + margin-right

 

 

IE盒子模型

技术分享图片

IE盒子模型占据空间计算方式(横向为例):

横向占据空间=width    +  margin-left  + margin-right

 





以上是关于网页布局02 盒子模型的主要内容,如果未能解决你的问题,请参考以下文章

CSS学习11-盒子模型

十六盒子模型

盒子模型

4. css弹性盒子模型

网页设计css盒子模型代码

盒子模型成分结构以及水平/垂直方向布局,阴影,圆角