web前端面试题第二道—简述盒模型

html-css04

web前端面试题第二道—简述盒模型,第1张

W3C组织建议把所有网页上的对象都放在一个盒子(box)中,就是所说的盒子模型,CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:实际内容(content)、填充(padding)、边框(border),边界(margin)。一个div就是一个盒子。

下面的图片说明了盒子模型(Box Model):

不同部分的说明与属性:

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

Padding(内边距) - Padding是盒子中的文字距离盒子边框(border)的距离,内边距是透明的。

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

Margin(外边距) - margin是盒子距离网页边的距离,外边距是透明的。

最终盒子实际所占位置大小计算公式是这样的:

盒子所占位置的实际宽度=宽度+左填充+右填充+左边框+右边框+左边界+右边界

盒子所占位置的实际高度=高度+顶部填充+底部填充+上边框+下边框+上边界+下边界

要注意区分的是盒子所占位置的实际宽度高度值和盒子实际大小的宽度和高度值,盒子实际大小的宽度和高度是所占位置实际宽度高度的值减去边界(margin)所占的大小,即

盒子的实际宽度=宽度+左填充+右填充+左边框+右边框

盒子的实际高度=高度+顶部填充+底部填充+上边框+下边框

盒子模型的3D示意图,如下图所示,padding与margin是看不见的透明元素

从第一层到第五层依次为:border、content+padding、background-image、background-color、margin。

盒子模型分两种,IE盒子模型和标准的W3C盒子模型。他们对盒子模型的解释各不相同。

W3C标准盒子模型

W3C标准盒子模式包括内容(content)、填充(padding)、边框(border)、边界(margin)

IE盒子模型

从图中可以可以看出IE盒子模型的范围也包括content、padding、border、margin,所不同的是IE盒子模型的content包含了border和padding。那么应该选用哪种模型呢,当然是选用W3C 标准盒模型,就是要在网页的顶部加上DOCTYPE声明,否则各个浏览器会根据自己的行为去理解网页。

例如一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为50px

假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:

宽 20*2+1*2+10*2+200=262px、高20*2+1*2*10*2+50=112px

盒子的实际大小为:宽1*2+10*2+200=222px、高1*2+10*2+50=72px

假如用ie 盒子模型,那么这个盒子需要占据的位置为:

宽 20*2+200=240px、高20*2+50=70px

盒子的实际大小为:宽 200px、高 50px

由于IE浏览器使用自己的非标准模型。IE浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。就是要在网页的顶部加上DOCTYPE声明。

label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到标签相关的表单控件上

(label的for关联input的id,自动聚焦)

https://www.jianshu.com/p/9abf4e490ba5

(1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS

(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载

(3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/index.html

udefined、undefined

4,0、1、2、3

1,false

//报错。加上static标识属于构造函数的方法。实例化出来的对象不能调用构造函数的方法,只能使用构造函数的原型protoType和对象原型中的方法。

//报错。题中给构造函数添加了一个方法,然后使用对象的实例来调用改方法。对象不能调用构造函数的方法,只能调用其原型