前端面试题自我总结第一天

1、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

IE: trident内核

Firefox:gecko内核

Chrome&& Safari:webkit内核 

Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

2、你简述盒模型

所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒模型”或“框模型”。CSS 框模型实质上是一个包围每个 HTML 元素的框。

它包括:

· 外边距 → margin

· 边框 → border

· 内边距 → padding

· 实际的内容 → content

它有标准模型和IE模型两种;

3、标准模型和IE模型的区别?

标准模型和IE模型的区别是计算宽width高height的不同。

(1)标准模型width不计算padding和border;

(2)IE模型width计算padding 和border;

4、怪异盒模型(IE盒子模型)

怪异盒主要表现在IE内核浏览器中,当前大部分浏览器支持的是W3C的标准盒子模型,不过其他浏览器也保留了IE盒子模型的支持,需要在CSS中添加触发怪异盒的条件。

怪异盒子(IE盒子模型)的触发条件:(1) 给元素添加CSS3属性box-sizing:border-box; (注:所以如果用CSS3新属性,就不要考虑低版本浏览器了)(2)文档结构的doctype不写,这个是在IE8 IE7 IE6 IE5等低版本上有,测试可以在win7系统上比较老旧的IE浏览器上,win10自带的新IE浏览器不可以。

5、CSS如何设置这两种模型?

· CSS设置标准模型:box-sizing:context-box (也是浏览器默认的盒模型);

· CSS设置IE模型:box-sizing:border-box

6、JS如何设置/获取盒模型对应的宽和高?

1、DOM.style.width/height     

(element.style.xxx 这种只能取得内嵌样式的属性,获取样式能读能写)

var boxdoms = document.querySelector('.box');

var width = boxdoms .style.width;

var height = boxdoms .style.height;

console.log("width",width)

2、dom.currentStyle.width/height (只有IE兼容 (element.currentStyle[xxx]取得内部和外部样式,但是只兼容ie浏览器,获取的样式只能读)同上

3、document.getComputedStyle(dom,null).width/height (取到的是最终渲染后的宽和高,如果有设置宽高,则不论哪种盒模型获取到的都是设置的宽高,和currentStyle相同,但是兼容性更好,IE9 以上支持getComputedStyle()方法,如果box类不设置宽高,而是由内容自动撑开; 标准盒模型通过 getComputedStyle获取到的宽高是content的值; IE盒模型通过getComputedStyle获取到的宽高

· 第一个参数:取得计算样式的元素;

· 第二个参数:一个伪元素字符串(例如“:after”),如果不需要伪元素信息,默认为null;targetDom=document.querySelector('.box');var width=window.getComputedStyle(targetDom).widthlet

· height = window.getComputedStyle(targetDom).height

· console.log("width",width)

4、dom.getBoundingClientRect().width/height 得到渲染后的宽和高,大多浏览器支持。IE9以上支持。 标准模型中,宽高设置为100的结果,额外包括了padding和border的值;

IE模型包括了padding和border

(所以不论是哪种模型,获取到的都是(border + padding + content)不包括外边距)

拓展:getBoundingClientRect还可以取到相对于视窗的上下左右的距离(用于获取某个元素相对于视窗的位置集合)。

5、dom.offsetWidth/offsetHeight(常用) 包括高度(宽度)、内边距和边框,不包括外边距。(最常用,兼容性最好)。

7、根据盒模型解释边距重叠

外边距重叠是指两个【垂直】 【相邻】的块级元素,当上下两个边距相遇时,其外边距会产生重叠现象,且重叠后的外边距,等于其中较大者。(水平方向不会发生)『原因』

根据​​W3C文档​​的说明,当符合以下条件时,就会触发外边距重合

· 都是普通流中的元素且属于同一个

· 没有被 padding、border、clear 或非空内容隔开

· 两个或两个以上垂直方向的「相邻元素」

相邻元素包括父子元素和兄弟元素

重叠后计算:

1、margin都是正值时取较大的margin值

2、margin都是负值时取绝对值较大的,然后负向位移。

3、margin有正有负,从负值中选绝对值最大的,从正值中选取绝对值最大的,然后相加

8、谈谈BFC

(1)BFC的基本概念

BFC全称为块格式化上下文 (Block Formatting Context) ,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC的通俗理解:首先BFC是一个名词,就是一个有特定规则的区域。我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的。

(2)BFC的布局规则(原理/渲染规则)

1. 计算BFC高度时,浮动元素也会参与计算(清除浮动)

2. BFC的区域不会与浮动元素的box重叠。(防止浮动文字环绕)

3. BFC在页面上是一个独立的容器,内外元素不相互影响。(解决外边距重叠问题)

4. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

(3)如何创建BFC(括号里面是一些副作用

· 浮动元素:float:left | float:right;【会导致父元素的宽度丢失,也会导致下边的元素上移】

· 定位元素:position:absolute | position:fixed;

· display的一些值:display:inline-block【转为行内块会导致宽度丢失】 | display:flex | display:table | table-cell、table-caption、inline-table、inline-flex、grid、inline-grid;

· overflow值不为visible:overflow:hidden;【将会剪切掉溢出的元素】 | overflow:auto、overflow:scroll;

· display:flow-root【新属性,BFC创建新方式,没有任何副作用,注意浏览器兼容】

『注意』

display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell,是这个匿名的table-cell生成了BFC。

并不是任意一个元素都可以被当做BFC,只有当这个元素满足以上任意一个条件的时候,这个元素才会被当做一个BFC

拓展:为什么要清除浮动? 浮动塌陷,包含块没有设置高度或者是自适应的时候、包含块就不能撑起来,变成塌陷的状态。

(4)BFC的使用场景

1、清除浮动(overflow: hidden给父级创建BFC之后

2、防止浮动文字环绕(.brother-boxoverflow: hidden

3、利用BFC解决边距重叠问题

要解决 margin 重叠问题,只要让它们不在同一个 BFC 内就行。 对于相邻元素,只要给它们加上 BFC 的外壳,就能使它们的 margin 不重叠; 对于嵌套元素,只要让父级元素触发(比如给父级加overflow:hidden),就能使父级 margin 和当前元素的 margin 不重叠。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值