面试题

作者: Wxq_59f9 | 来源:发表于2019-12-09 10:35 被阅读0次

position有几种取值,分别是什么意思?

static:相当于没有定位,元素会出现在正常的文档流中。
fixed:元素框的表现类似于absolute,但是fixed是相对于视窗本身,也就是浏览器窗口而定位的。所以,采用该定位的元素在页面下拉的时候,其位置并不会发生变化。
relative:生成相对定位的元素,相对于元素本身的位置进行定位,它原本所占的空间仍然会保留。
absolute:生成绝对定位的元素,相对于static定位以外的第一个有定位的祖先元素进行定位。由于static定位相当于没有定位,所以absolute定位实际上就是相对于有定位的第一个祖先元素定位,如果所有的祖先元素都没有定位,则相对于初始包含块或者画布,一般就是body元素定位。

浏览器中的回流和重绘是什么,分别在什么情况下触发?

  1. 重绘
    由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的,称为重绘,例如outline, visibility, color、background-color等,重绘的代价是高昂的,因为浏览器必须验证DOM树上其他节点元素的可见性。

  2. 回流
    回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素,因为其变化涉及到部分页面(或是整个页面)的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

3:触发重绘
当页面元素样式改变不影响元素在文档流中的位置时(如background-color,border-color,visibility),浏览器只会将新样式赋予元素并进行重新绘制操作
4:触发回流:
DOM操作(对元素的增删改、顺序变化等)
内容变化,包括表单区域内的文本变化
css属性的更改或者重新计算
增删样式表内容
修改class属性
浏览器窗口变化(滚动或缩放)
伪类样式激活(:hover等)

px、em、rem的区别

1、px像素。绝对单位,像素px是相对于显示器屏幕分辨率而言的,是一个虚拟单位。是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI。
2、em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。
3、rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事,仍然是相对大小但相对的只是HTML根元素。
4、区别:IE无法调用那些使用px作为单位的字体大小,而em和rem可以缩放,rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器已支持rem。

清除浮动的方式有哪些,比较好的是哪种

为什么会出现浮动?
浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题
1、父元素的高度无法被撑开,影响与父元素同级的元素
2、与浮动元素同级的非浮动元素(内联元素)会跟随其后
3、若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

清除浮动的方式
1、父级div定义height。
2、结尾处加空div标签clear:both。
3、父级div定义伪类:after和zoom。
4、父级div定义overflow:hidden。
5、父级div定义overflow:auto。
6、父级div也浮动,需要定义宽度。
7、父级div定义display:table。
8、结尾处加br标签clear:both。

eadonly和disabled的区别:

1、Readonly 只针对 input(text/password)和 textarea 有效,而 disabled 对于所有的表单元素有效,包
括 select,radio,checkbox,button 等。
2、在表单元素使用了 disabled 后,我们将表单以 POST 或者 GET 的方式提交的话,这个元素的值不会被
传递出去,而 readonly 会将该值传递出去

css优先级算法如何计算?有什么不同?

!import < ID 选择器 <类选择器 <属性选择器 < 伪类选择器< 伪元素选择器 < 标签选择器< 通配选择器

相关文章

  • 面试材料

    面试经验 面试题1 面试题2 面试题3 面试题4 面试题5 面试题6――数据结构 面试题7――网络 面试题8――汇...

  • 高阶面试题

    webpack面试题 面试题:webpack插件 Git面试题 面试题:git常用命令 面试题:解决冲突 面试题:...

  • this的指向的面试题

    面试题1 面试题2 面试题3 面试题4

  • 面试所涉及的问题

    面试题参考1 : 面试题 面试题参考2 : 内存管理 面试题参考3 :面试题 ...

  • Android超实用最全面试大纲(三)

    文章目录: ANR面试题 OOM面试题 Bitmap面试题 UI卡顿面试题 内存泄漏面试题 内存管理面试题 一、A...

  • Android最全面试大纲(三)

    文章目录: ANR面试题 OOM面试题 Bitmap面试题 UI卡顿面试题 内存泄漏面试题 内存管理面试题 一、A...

  • 2022年web前端面试题

    web前端面试题分为:html/css面试题、javascript面试题、vue面试题、性能优化面试题、网络方面面...

  • ios面试题

    初级面试题 中级面试题 高级面试题 swift篇

  • Android超实用最全面试大纲(四)

    文章目录: 冷启动和热启动面试题 其他优化面试题 架构模式面试题 插件化面试题 热更新面试题 进程保活面试题 Li...

  • Android最全面试大纲(四)

    文章目录: 冷启动和热启动面试题 其他优化面试题 架构模式面试题 插件化面试题 热更新面试题 进程保活面试题 Li...

网友评论

      本文标题:面试题

      本文链接:https://www.haomeiwen.com/subject/aftbgctx.html