CSS弹性盒模型flex概念

盒模型分为：标准w3c盒模型、IE盒模型、以及css中的伸缩盒模型。

先说CSS的伸缩盒模型:
flex模型是CSS3引入的新的布局模型，是flexible box的缩写，一般称之为弹性盒模型。
和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕。
display: flex | inline-flex分为块级伸缩容器flex | 内联伸缩容器flex-inline。
box-flex: 1;
该版本兼容IE11+、firefox、safari、chrome、opera及移动端，但移动端ios7.1-8.4需要添加前缀-webkit-
CSS3的box-sizing属性
语法：
box-sizing : content-box || border-box || inherit;
在css3中新增了box-sizing属性，具备了以上知识后，我们已经理解：
当为content-box时，将采取标准模式进行解析计算
当为border-box时，将采取怪异模式解析计算，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
当为inherit时，将从父元素来继承box-sizing属性的值

w3c标准盒模型：
使用了doctype的都是标准的文档类型，无论我们使用哪种模式都会触发标准模式,一旦为页面设置了恰当的DTD(文档定义类型),大多数浏览器都会按照标准盒模型来呈现内容。
根据w3c规范，元素内容占据空间是由width属性设置的，而内容周围的padding和border都是另外计算的。
即盒子的宽度width = width;

IE下的怪异盒模型：
如果doctype缺失，则在ie6、ie7、ie8将会触发怪异模式(quirks);
即盒子的宽度width = 内容区宽度 + padding + border

 

 

什么是盒子模型？

 

答案解析：

 

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

 

css盒模型面试题：

 

 

 

计算元素宽高的方法：

1. dom.style.width/height.   只能计算元素上style标签中设置的值，通过style标签的选择器设置的值、外链引入的样式文件中设置的值都无法获取。

2.document.CurrentStyle.width/height.  支持1中三种样式设置方式，但只有IE支持

3.window.getComputedStyle(dom).width/height　　兼容且支持三种方式

4.dom.getBoundingClientRect().width/height　　可以获取元素的width，height，相对于屏幕左边和上边的left,top,right,bottom

  详情见：https://blog.csdn.net/gao_xu_520/article/details/80365799