盒模型相关面试题
Posted shihaiying
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了盒模型相关面试题相关的知识,希望对你有一定的参考价值。
㈠基本概念是什么?
⑴页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型,盒模型由外而内包括:边距(margin)、边框(border)、填充(padding)、内容(content)。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。
⑵盒模型有两种:标准盒模型和怪异盒模型(IE盒模型)
有关盒模型的相关知识可以看我的这篇博客:https://www.cnblogs.com/shihaiying/p/11246482.html
㈡ 标准模型和IE模型区别是什么?
宽和高的计算方式不同。标准模型的宽度指的就是content的宽度,不包含padding和border。
怪异准盒模型:width = content + padding + border;
标准盒模型:width = content;
有关两者的区别可以看我的这篇博客:https://www.cnblogs.com/shihaiying/p/11329595.html
㈢CSS如何设置这两种模型?
⑴标准盒模型下设置:box-sizing: content-box;
⑵浏览器默认设置:box-sizing: border-box; 是IE下的设置。
有关box-sizing的相关知识可以看我这篇博客:https://www.cnblogs.com/shihaiying/p/11589477.html
㈣对于padding、margin的取值相关理解?
⑴不赋值:默认情况下为0,也就是不会有内外边距
⑵不允许取负值
⑶赋值(以padding为例)
①一个值时:Padding:10px; 四个内边距都为10px
②两个值时:Padding:10px 20px; 上下内边距为10px,左右内边距为20px
③三个值时:Padding:10px 20px 30px;上10px,左右20px,下30px
④四个值时:Padding:10px 20px 30px 40px;上右下左分别为10 20 30 40
有关取值的具体内容可以看我的这篇博客:https://www.cnblogs.com/shihaiying/p/11246482.html
扩展:有关定位的知识可以看我的这篇博客:https://www.cnblogs.com/shihaiying/p/11253597.html
㈤js如何设置获取盒模型对应的宽和高?
⑴dom.style.width/height(只适用获取内联元素的宽和高)
⑵dom.currentStyle.width/height(获取渲染后的宽高,但是仅IE支持)
⑶window.getComputedStyle(dom).width/height(与2原理相似,但是兼容性,通用性会更好一些)
⑷dom.getBoundingClientRect().widht/height(计算元素绝对位置,获取到四个元素left,top,width,height)
有关这个问题的详细代码示例可以看我的这篇博客:https://www.cnblogs.com/shihaiying/p/11600229.html
㈥边距重叠在什么时候或者什么情况下会发生呢?
⑴父与子之间:子级的上下margin会与父级上下margin重叠,以最大值为标准去渲染
⑵空元素:如果设置了margin-top和margin-bottom,它会在这两之间取一个最大值作为它的最终边距值
⑶兄弟元素之间:每个兄弟之间都有上边距或者每个兄弟之间都有下边距,原则就是取最大的值
从第六个问题开始到结束相关的知识可以看我这篇博客:https://www.cnblogs.com/shihaiying/p/11616055.html
㈦什么是BFC?BFC的基本概念是什么?
BFC的基本概念–BFC就是“块级格式化上下文”的意思,也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。通俗的讲,就是一个特殊的块,内部有自己的布局方式,不受外边元素的影响。
㈧BFC的原理是什么?
⑴BFC内部的盒子,会在垂直方向,一个接一个地放置。垂直方向上也会发生边距重叠。
⑵BFC就是页面上的一个独立容器,容器里面的子元素不会影响到外面的元素,外边的也不会影响里边的。
⑶BFC的区域不会与float box重叠。
⑷计算BFC的高度时,浮动元素也被计算在内。
㈨如何创建BFC?如何触发BFC?那些情况会产生新的BFC?
⑴根元素或其它包含它的元素
⑵浮动 (元素的 float 不为 none)
⑶绝对定位元素 (元素的 position 为 absolute 或 fixed)
⑷行内块 inline-blocks (元素的 display: inline-block)
⑸表格单元格 (元素的 display: table-cell,HTML表格单元格默认属性)
⑹表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
⑺overflow 的值不为 visible的元素
⑻弹性盒 flex boxes (元素的 display: flex 或 inline-flex)
希望看完这篇博客和文中链接的详细内容理解的博客,希望能帮助更深刻的了解盒模型!
以上是关于盒模型相关面试题的主要内容,如果未能解决你的问题,请参考以下文章