Fe-interview: [css] 第12天 说说你对css盒子模型的理解

[haizhilin2013]

第12天 说说你对css盒子模型的理解

[AricZhu]

1. css盒模型由两个盒子组成，外在的控制是否换行的盒子，以及内在的控制元素内容的盒子。比如：display: inline-block, 则它的外在的盒子就是inline也就是不占据一行，而block则表示内部的元素具有块状特性。所以，display: inline其实就是display: inline-inline的缩写，display: block就是display: block-block的缩写。
2. 每一个内在的盒子有: width/height, padding, border, margin这几个控制盒子大小的属性。其中 width/height控制元素内容大小，padding则控制元素内容到border线内侧距离，border则是元素外围边框大小，而margin则是控制与其他元素的间距，它的背景透明。
3. 对于早期，计算一个元素的占据大小，需要通过width +2* padding + 2*border来计算，css3中提出了box-sizing：border-box，通过这样设置，就可以使元素最终的宽高就是设定的width/height, 浏览器会根据width/height, padding, border的大小来自动调整内部元素的大小。

[Vi-jay]

盒子模型分为ie盒子模型和标准盒子模型

1. ie盒子模型 padding+content+border border-box
2. 标准盒子模型 content content-box

[wsb260]

1.基本概念：标准模型+IE模型

标准盒子模型：包括margin,border,padding,content,并且content部分不包括其他部分
IE盒子模型：包括margin,border,padding,content，content包含了border和padding

2.css如何设置这两种模式

标准盒模型：box-sizing:content-box
IE盒模型：box-sizing:border-box

3.js如何设置获取盒子模型对应的宽和高

1) dom.style.width:

只能获取内联样式，因此是不准确的
2) dom.currentStyle.width :
与window.getComputedStyle方法功能相同，实现在旧版本的IE浏览器中
3）window.getComputedStyle(dom).width:
方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性值。因此输出是准确的
4）dom.getBoundingClientRect().width
返回一个DOMRect对象，这个对象是由该元素的getClientRects()方法返回的一组矩形的集合。
DOMRect对象包含了一组用于描述边框的只读属性--left,top,right,bottom,单位为像素。除了width和height外的属性都是相对于视口的左上角位置而言的。

[blueRoach]

• 盒模型分为： IE盒模型和W3C盒模型

• 盒模型是由 content、padding、border、margin组成的

• 区别：

IE盒模型的width = content + padding + border
W3C盒模型的width = content

• CSS3的属性box-sizing可以指定两种盒模型

其中border-box属性为IE盒模型
content-box属性为W3C盒模型

[giggleCYT]

盒模型分为标准盒模型和IE盒模型
标准盒模型：width=content
IE盒模型：width=content+padding+border

[LancelotSaki]

按我的理解盒子就是一个我们平常常见的纸箱，纸箱皮中间有层薄薄的纸板间隔，这层纸板就是border， 在这个纸板的外边就是纸箱皮就是margin，纸板内边的纸箱皮就是padding，纸箱里面能放东西的部分就是css的容器,把纸箱打包起来整个部分就是CSS盒子。

[MrZ2019]

1.基本概念：标准模型+IE模型

标准盒子模型：包括margin,border,padding,content,并且content部分不包括其他部分
IE盒子模型：包括margin,border,padding,content，content包含了border和padding

2.css如何设置这两种模式

标准盒模型：box-sizing:content-box
IE盒模型：box-sizing:border-box

3.js如何设置获取盒子模型对应的宽和高

dom.style.width:
只能获取内联样式，因此是不准确的

dom.currentStyle.width :
与window.getComputedStyle方法功能相同，实现在旧版本的IE浏览器中
3）window.getComputedStyle(dom).width:
方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性值。因此输出是准确的
4）dom.getBoundingClientRect().width
返回一个DOMRect对象，这个对象是由该元素的getClientRects()方法返回的一组矩形的集合。
DOMRect对象包含了一组用于描述边框的只读属性--left,top,right,bottom,单位为像素。除了width和height外的属性都是相对于视口的左上角位置而言的。