奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 题库 >

Html面试题解答,来自小神

时间:2018-09-11 22:38来源: 作者:Vuez
为何 float 会导致父元素塌陷?防止外边距重叠解决方案

HTML XHML HTML5的关系

  1. HTML属于SGML
  2. XHML属于XML,是Html进行XML严格化的结果
  3. HTML5简单点理解成:h5≈ html+CSS 3+js+API,减少对外部插件的需求(比如 Flash),更优秀的错误处理,更多取代脚本的标记

HTML5新特性

  1. 新的语义化元素:article 、footer 、header 、nav 、section
  2. 表单增强,新的表单控件:calendar 、date 、time 、email 、url 、search
  3. 新的API:音频(用于媒介回放的video和audio元素)、图形(绘图canvas元素)
  4. 新的API:离线,通过创建 cache manifest 文件,创建应用程序缓存
  5. 新的API:本地存储,localStorage-没有时间限制的数据存储,sessionStorage-session数据存储(关闭浏览器窗口数据删除)
  6. 新的API:实时通讯,设备能力

JS获取宽高如何获取盒模型对应的宽高

1、dom.style.width/height
这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在style标签中或外联的CSS文件中 设置的话,通过这种方法是获取不到dom的宽高的

2、dom.currentStyle.width/height
这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式,都能获取到,只有IE浏览器支持该方式

3、window.getComputedStyle(dom).width/height
这种方式的原理和2是一样的,这个可以兼容更多的浏览器,通用性好一些

4、 dom.getBoundingClientRect().width/height
这种方式是根据元素在视窗中的绝对位置来获取宽高的

5、 dom.offsetWidth/offsetHeight

边距重叠

边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界

BFC

块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局



BFC的原理

1、内部的box会在垂直方向,一个接一个的放置
2、每个元素的margin box的左边,与包含块border box的左边相接触(对于从做往右的格式化,否则相反)
3、box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
4、bfc的区域不会与浮动区域的box重叠
5、bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
6、计算bfc高度的时候,浮动元素也会参与计算

怎么创建bfc(边距重叠产生原因)

1、float属性不为none(脱离文档流)
2、position为absolute或fixed
3、display为inline-block,table-cell,table-caption,flex,inine-flex
4、overflow不为visible
5、根元素的垂直margin不会被重叠

防止外边距重叠解决方案

1、外层元素padding代替
2、内层元素透明边框 border:1px solid transparent;
3、内层元素绝对定位 postion:absolute
4、外层元素 overflow:hidden;
5、内层元素 加float:left;或display:inline-block;
6、内层元素padding:1px;

BFC应用场景

1、自适应两栏布局 2、清除内部浮动

浮动float误解和误用

float 被设计出来的初衷是用于文字环绕效果,即一个图片一段文字,图片float:left之后,文字会环绕图片
但是,后来大家发现结合float + div可以实现之前通过table实现的网页布局,因此就被“误用”于网页布局了

为何 float 会导致父元素塌陷?

1、float 的破坏性 —— float 破坏了父标签的原本结构,使得父标签出现了坍塌现象。
2、导致这一现象的最根本原因在于:被设置了 float 的元素会脱离文档流,我们的浮动是左右浮动,所以我们的块级元素都是左右排列。其根本原因在于 float 的设计初衷是解决文字环绕图片的问题
3、包裹性也是 float 的一个非常重要的特性,普通的 div 如果没有设置宽度,它会撑满整个屏幕,在之前的盒子模型那一节也讲到过。而如果给 div 增加float:left之后,它突然变得紧凑了,宽度发生了变化,把内容中的三个字包裹了——这就是包裹性。为 div 设置了 float 之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器 清空格,对于高度不同的容器,float 排版出来的网页严丝合缝,

px

PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。

em

EM就是根据基准来缩放字体的大小。EM实质是一个相对值,而非具体的数值。这种技术需要一个参考点,一般都是以的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em

rem

REM是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而Rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值

px em rem浏览器的兼容性

除了IE6-IE8r,其它的浏览器都支持em和rem属性,px是所有浏览器都支持。 因此为了浏览器的兼容性,可“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果

HTML渲染过程

  1. 构建DOM树(DOM tree):从上到下解析HTML文档生成DOM节点树(DOM tree)
  2. 构建CSSOM(CSS Object Model)树:加载解析样式生成CSSOM树
  3. 执行Javascript:加载并执行Javascript代码(包括内联代码或外联Javascript文件)
  4. 构建渲染树(render tree):根据DOM树和CSSOM树,生成渲染树(render tree);渲染树:按顺序展示在屏幕上的一系列矩形,这些矩形带有字体,颜色和尺寸等视觉属性
  5. 布局(layout):根据渲染树将节点树的每一个节点布局在屏幕上的正确位置
  6. 绘制(painting):遍历渲染树绘制所有节点,为每一个节点适用对应的样式,这一过程是通过UI后端模块完成

重排或者叫回流(reflow,relayout)

  1. 这个过程就是通过渲染树中渲染对象的信息,计算出每一个渲染对象的位置和尺寸
  2. 将其安置在浏览器窗口的正确位置
  3. 触发:增加、删除、修改、移动、修改css样式

重绘(redraw)

  1. 浏览器会根据元素的新属性重新绘制,使元素呈现新的外观
  2. 重绘不会带来重新布局,并不一定伴随重排
  3. 触发:dom改变,css移动,改变visibility、outline、背景色等属性


内容来自:https://hongqingcao.github.io/Front-end-notes/#/

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
Vuez 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2018-03-30 22:03 最后登录:2018-09-11 22:09

关注奔三路