css盒子模型及盒子模型的类型
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css盒子模型及盒子模型的类型相关的知识,希望对你有一定的参考价值。
参考技术A转自 菜鸟教程
所有html元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括: 边距(外边距) , 边框 , 填充(内边距) ,和 实际内容 。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
转自 链接
盒子模型有两种,分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
1.标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin
1.怪异盒模型中的width指的是内容、边框、内边距总的宽度(content + border + padding);height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width(content + border + padding) + margin
建议不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
即box-sizing属性可以指定盒子模型种类,content-box指定盒子模型为W3C(标准盒模型),border-box为IE盒子模型(怪异盒模型)。
以上是关于css盒子模型及盒子模型的类型的主要内容,如果未能解决你的问题,请参考以下文章