css3盒模型是什么?

什么是盒模型?

CSS3盒模型就是CSS技术所使用的一种思维模型,指在一个网页文档中,每个元素都被呈现为一个矩形的盒子,描述了元素所占空间的内容。

css中的每个元素都是一个盒模型, 包括html、body元素, 浏览器解析css的时候也会把每个元素看成一个盒子来解析。

盒模型具备的属性(存在的特点)有: content (用户设置的width和height)、padding(内边距,用户设置的padding值) 、margin(外边距,用户设置的margin值)、border(边框 用户设置的border值) 、background(背景)等。

盒模型的分类

(1)IE6混杂盒模型:

IE6混杂盒模型是由IE浏览器提出的一个盒模型,主要是为了解决布局的问题,在没有css3之前触发的条件是需要IE6浏览器 以及页面的代码是怪异模式。

(怪异模式是指在解析代码的时候浏览器不按照w3c标准解析,而按照浏览器自己的解析方式进行解析,由于不同浏览器解析方式不同因此我们称之为怪异模式)

触发怪异模式只需要在写html页面的时候第一行不写<Doctype html>或者写错单词均可触发。

IE6混杂盒模型的特点是: 完整的盒子 = content(用户设置的宽高) + margin 也可说 盒子的content部分(用户设置的宽高部分) = 实际内容区的宽高 + padding(用户设置的内边距) + border(用户设置的边框部分)

触发怪异模式并不能让页面对页面中的盒子用IE6混杂盒模型来解析 怎么能用IE6混杂模式盒模型来解析呢 ? 怪异模式 + IE6浏览器

(2) W3C标准盒模型:

w3c组织提出的统一的标准盒模型: 特点是: 完整的盒子 = content(用户设置的宽高) + padding (用户设置的内边距)+ border(用户设置的边框) + margin(用户设置的外边距)

由于IE6混杂盒模型可以解决一些布局上的问题,因此w3c组织在css3中将其加入,

即css3中的可以选择盒模型的类型: box-sizing: border-box(使用IE6混杂盒模型)/content-box(使用标准盒模型);

盒模型实现布局

1.png

2.png

3.png

4.png

效果:

不加box-sizing的效果

5.png更多web开发知识,请查阅 HTML中文网 !!

以上就是css3盒模型是什么?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏