如云阁经典小说,反腐倡廉工作制度,车间防暑降温措施
关于更多css核心概念的文章请关注github——css核心概念。
当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 css 基础框盒模型(css basic box model),将所有元素表示为一个个矩形的盒子。所有 html 元素可以看作盒子,在 css 中,box model 这一术语是用来设计和布局时使用。
css 盒模型本质上是一个盒子,封装周围的 html 元素,每个盒子由四个部分(或称区域)组成:内容(content),内边距(padding),边框(border),外边框(margin)。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(box model):
css 盒模型不同组成部分的说明:
盒子模型分为两种:第一种是 w3c 标准的盒子模型(标准盒模型) 、第二种 ie 标准的盒子模型(怪异盒模型)。
当前大部分的浏览器支持的是 w3c 的标准盒模型,也保留了对怪异盒模型的支持,当然 ie 浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持 w3c 标准的同时还保留了原来的解析模式”,怪异模式主要表现在 ie 内核的浏览器。
标准盒模型与怪异盒模型的表现效果的区别:
注意:w3c 的标准盒模型和ie 怪异盒模型主要区别是:盒模型中的 width 是否包含 border 和 padding。w3c 的标准盒模型的 width 不包含 border 和 padding,而ie 怪异盒模型的 width 中包含 border 和 padding。
如果是定义了完整的 doctype 的标准文档类型,无论是哪种模型情况,最终都会触发标准模式,如果 doctype 协议缺失,会由浏览器自己界定,在 ie 浏览器中 ie9 以下(ie6、ie7、ie8)的版本触发怪异模式,其他浏览器中会默认为 w3c标准模式。
我们还可以通过设置 html 元素的 box-sizing 来设置盒子模型的解析模式
box-sizing 的属性值:
当设置为 box-sizing: content-box 时,将采用标准模式解析计算(默认模式),当设置为 box-sizing: border-box 时,将采用怪异模式解析计算。如:
<!-- 将 div 设置为怪异盒模型解析模式 --> <div style="box-sizing: border-box;"></div>
关于更多css核心概念的文章请关注github——css核心概念。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论