网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
css盒子模型是什么?毕竟在学习css时经常可以看到css盒子模型,所以,接下来的这篇文章php中文网就跟大家来谈一谈css盒子模型的概念以及对css盒子模型的理解。
首先,我们来看一看css盒子模型是什么?
从百度百科上我们可以知道,网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型。如下图:
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
那么,在知道了css盒子模型是什么之后,对于css盒子模型又该如何理解呢?
css盒子模型的理解
我们可以把css盒子模型当成日常中的一个盒子去理解。
content就是盒子里装的东西,它有高度(height)和宽度(width),可以是图片,可以是文字或者小盒子嵌套,在现实中,内容不能大于盒子,内容大于盒子就会撑破盒子,但在css中,盒子有弹性的,顶多内容太大就会撑大盒子,但是不会损害盒子。
padding即是填充,就好像我们为了保证盒子里的东西不损坏,填充了一些东西,比如泡沫或者塑料薄膜,填充物有大有小,有软有硬,反应在网页中就是padding的大小了。
border就是再外一层的边框,因为边框有大小和颜色的属性,相当于盒子的厚度和它的颜色或者材料。
margin外边距,就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子,margin就是盒子之间直接的距离,可以通风,也美观同时方便取出。
css盒子模型有两种,一种是W3C盒模型也就是标准模型,另一种是IE盒模型
css两种盒子模型的设置方法:
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
从上面图中我们可以明显的看出,IE盒模型的宽度或者高度为content(内容)的宽度和高度,W3C盒模型即标准模型的宽度或者高度为content(内容) + padding (内边距)+ border(边框)
我们来举一个例子:一个div的宽度和高度为105px,内边距为10px,边框为5px,外边距为30px。W3C盒模型下显示的div所占的总宽度和总高度(包括外边距、边框、内边距、内容)为105
+ 15 + 5 + 30 = 155px,IE盒模型下显示的div所占的总宽度和总高度(包括外边距、边框、内边距、内容)为105+ 30 = 135px。