CSS中的标准盒子模型和怪异盒子模型

html-css011

CSS中的标准盒子模型和怪异盒子模型,第1张

原文链接: https://blog.csdn.net/qq_41145685/article/details/104464232

—————————————————————

一、什么是盒子模型(Box Model)

盒子想必大家都是知道的吧!

生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着。

模型是什么呢?

它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件

css中的盒子模型它是可以对元素进行布局,设置距离的大小,这里面包括含有外边距、边框、内边距和内容主体这四个部分。

二、CSS中的标准盒子模型(W3c标准的盒子模型)

CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件,在网页的实体中我们是看不见实际盒子模型的。但是我们能够清楚的看到它起到的作用。

1、盒子模型由” content(内容)+padding(内边距)+border(边框)+margin(外边距)“四个部分组成

Margin(外边距) - 清除边框外的区域,外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域,内边距是透明的。

Content(内容) - 盒子的内容,显示文本和图像。

2、标准盒子模型的计算

如图:

标准的盒子模型的大小是:content(区域内容大小)+padding(内边距)+border(边框)+margin(外边距);

注:标准盒子的初始设置宽高大小不包含padding、border和margin的大小。

三、怪异盒子模型(IE标准的盒子模型)

1、怪异盒模型也叫IE盒子模型

怪异盒主要表现在IE内核浏览器中,当前大部分浏览器支持的是W3C的标准盒子模型,不过其他浏览器也保留了IE盒子模型的支持,需要在CSS中添加触发怪异盒的条件。

怪异盒子(IE盒子模型)的触发条件:

(1) 给元素添加CSS3属性box-sizing:border-box(注:所以如果用CSS3新属性,就不要考虑低版本浏览器了)

(2)文档结构的doctype不写,这个是在IE8 IE7 IE6 IE5等低版本上有,测试可以在win7系统上比较老旧的IE浏览器上,win10自带的新IE浏览器不可以。

2、怪异盒子(IE盒子模型)模型的计算

如图可见添加了怪异盒的div盒子宽度变小了。

标准的盒子模型的大小是:content(区域内容大小)+margin(外边距);

注:怪异盒子的初始设置宽高大小包含padding、border大小在内,但不包含margin的大小。

1、W3C标准不是一个标准,而是一系列标准的集合,包含三部分的标准:结构标准、表现标准和动作标准。与结构标准对应的代表语言是HTML,与表现标准对应的代表语言是CSS,与动作标准对应的代表语言是JavaScript。

2、HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。*

3、CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

4、JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单或鼠标滑过表格的背景颜色改变。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

扩展资料:

W3C结构结构标准语言:

一、可扩展标记语言(标准通用标记语言下的一个子集、外语缩写:XML)。现推荐遵循的是万维网联盟于2000年10月6日发布的XML1.0。

和HTML一样,XML同样来源于标准通用标记语言,可扩展标记语言和标准通用标记语言都是能定义其他语言的语言。

XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。

关于XML的好处和技术规范细节这里就不多说了,网上有很多资料,也有很多书籍可以参考。

二、可扩展超文本标记语言(外语缩写:XHTML)。现推荐遵循的是万维网联盟于2000年1月26日推荐XML1.0。

XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。

因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡。

参考资料来源:百度百科-W3C标准

W3C标准英文全程是World Wide Web Consortium,中文是万维网联盟。

万维网联盟标准不是某一个标准,而是一些列标准的集合。网页主要有三部分组成:结构(Structure)、表现(Presentation)、行为(Behavior)。

对应的标准也有三方面:结构化标准主要包括XHTML和XML,表现标准语言主要包括CSS、行为标准主要包括(如W3C DOM)、ECMAScript等。这些标准大部分是W3C起草发布,也有一是其他标准组织制定的标准。

参考资料:

W3C,一直被大众认为是Web标准的制定者,我们遇到的很多问题,大部分都能通过研究W3C官网上发布的文档解决(官方文档也是最好的学习资料,虽然有些地方难以理解,但确是原汁原味和权威的)。

W3C扮演的只是一个论坛的角色:W3C以工作组的方式,把某项技术的相关各方聚集起来,最终由他们来产出标准。它制定了整个平台的规则,监督整个进程。但这些技术规范(基本上)并不是由W3C的工作人员编写完成。

参考资料:百度百科-W3C标准