面试题之CSS盒模型
面试题之CSS盒模型
1、基本概念
基本概念:标准模型 + ie模型
(1)标准模型 (宽、高)= content 的宽高
(2)ie模型(宽、高)= content 的宽高 + padding 的宽高 + border 的宽高
2、CSS如何设置这两种模型
标准模型 box-sizing: content-box;
ie 模型 box-sizing: border-box;
浏览器默认是标准盒模型。
3、JS如何设置获取盒模型对应的宽和高
1、内联样式的宽和高:dom.style.width/height
2、渲染后的结果,只有ie支持 : dom.currentStyle.width/height
3、所有浏览器支持,和第二个原理一样,通用性更好些: window.getComputedStyle(dom).width/height
4、计算一个元素的决定位置(根据视窗-左顶点):dom.getBoundingClientRect().width/height
4、解决盒模型边距重叠—BFC
(1)BFC的基本概念
BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。
(2)创建BFC的方式
1.float 除了none以外的值
2.overflow 除了visible 以外的值(hidden,auto,scroll )
3. display (table-cell,table-caption,inline-block, flex, inline-flex)
4. position值为(absolute,fixed)
5. fieldset元素
在以上的情况里可以创建BFC。
(3)BFC的使用场景
1.解决margin叠加问题
2.用于清除浮动,计算BFC高度.