0
点赞
收藏
分享

微信扫一扫

Python数据分析-4

unadlib 2024-03-16 阅读 39

HTML5、CSS3面试题(二)

rem 适配方法如何计算 HTML 跟字号及适配方案?(必会)

通用方案

1、设置根 font-size:625%(或其它自定的值,但换算规则 1rem 不能小于 12px)

2、通过媒体查询分别设置每个屏幕的根 font-size

3、CSS 直接除以 2 再除以 100 即可换算为 rem

优:有一定适用性,换算也较为简单

北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com

第 39 页 共 348 页 北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com

第 40 页 共 348 页

劣:有兼容性的坑,对不同手机适配不是非常精准;需要设置多个媒体查询来适应不同

手机,单某款手机尺寸不在设置范围之内,会导致无法适配

网易方案

1、拿到设计稿除以 100,得到宽度 rem 值

2、通过给 html 的 style 设置 font-size,把 1 里面得到的宽度 rem 值代入

x document.documentElement.style.fontSize =

document.documentElement.clientWidth / x + ‘px‘;

3、设计稿 px/100 即可换算为 rem

优:通过动态根 font-size 来做适配,基本无兼容性问题,适配较为精准,换算简便

劣:无 viewport 缩放,且针对 iPhone 的 Retina 屏没有做适配,导致对一些手机的适

配不是很到位

手淘方案

1、拿到设计稿除以 10,得到 font-size 基准值

2、引入 flexible

3、不要设置 meta 的 viewport 缩放值

4、设计稿 px/ font-size 基准值,即可换算为 rem

优:通过动态根 font-size、viewpor、dpr 来做适配,无兼容性问题,适配精准。

劣:需要根据设计稿进行基准值换算,在不使用 sublime text 编辑器插件开发时,单

位计算复杂

CSS 中 link 和@import 的区别?(必会)

适用范围不同

@import 可以在网页页面中使用,也可以在 CSS 文件中使用,用来将多

CSS 文件引入到一个 CSS 文件中;而 link 只能将 CSS 文件引入到网页页面中

功能范围不同

link 属于 XHTML 标签,而@import 是 CSS 提供的一种方式,link 标签除

了可以加载 CSS 外,还可以定义 RSS,定义 rel 连接属性等,@import 就只能加载 CSS

加载顺序不同

当一个页面被加载的时候,link 引用的 CSS 会同时被加载,而@import

引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import 加载 CSS 的页

面时开始会没有样式(就是闪烁),网速慢的时候还挺明显

兼容性

由于@import 是 css2.1 提出的,所以老的浏览器不支持,@import 只有在 IE5

以上的才能识别,而 link 标签无此问题

控制样式时的差别

使用 link 方式可以让用户切换 CSS 样式.现代浏览器如

Firefox,Opera,Safari 都支持 rel=”alternate stylesheet”属性(即可在浏览器上选择不同 的风格),

当然你还可以使用 Javascript 使得 IE 也支持用户更换样式

权重区别 link 引入的样式权重大于@import 引入的样式

22、Display:none 与 visibility:hidden 的区别 ?(必会)

最常用的为 display:none 和 visibility:hidden

dispaly:none 设置该属性后,该元素下的元素都会隐藏,占据的空间消失北京市顺义区京顺路 99

visibility:hidden 设置该元素后,元素虽然不可见了,但是依然占据空间的位置

区别

1.visibility 具有继承性,其子元素也会继承此属性,若设置 visibility:visible,则子元

素会显示

2.visibility 不会影响计数器的计算,虽然隐藏掉了,但是计数器依然继续运行着。

3.在 CSS3 的 transition 中支持 visibility 属性,但是不支持 display,因为 transition 可

以延迟执行,因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户

4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘

Position 的值有哪些,分别有哪些作用?(必会)

static:默认值

不脱离文档流,top,right,bottom,left 等属性不生效

绝对定位:absolute

绝对定位的关键是找对参照物,要成为绝对定位元素的参照物必须满足以下两个条件:

1.参照物和绝对定位元素必须是包含与被包含关系;

2.该参照物必须具有定位属性;

如果找不到满足以上两个条件的父包含块,那么相对于浏览器窗口进行定位

注:设置了 position:absolute;属性后,元素会脱离正常文档流,不在占据空间;左右 margin

为 auto 将会失效;我们通过 left、top、bottom、right 来决定元素位置

相对定位:relative

参照物:元素偏移前位置

注:设置了相对定位,左右 margin 为 auto 仍然有效、并且不会脱离文档流。

固定定位:fixed

参照物:浏览器窗口;

注:固定定位会脱离文档流;

当绝对定位和固定定位参照物都是浏览器窗口时的区别: 当出现滚动条时,固定定位的元 素不会跟随滚动条滚动,绝对定位会跟随滚动条滚动 为什么会出现浮动?浮动元素会引起什么问题?如何清除浮动?(必会)

浮动定位将元素排除在普通流之外,即元素讲脱离文档流,不占据空间。浮动元素碰到包

含它的边框或者浮动元素的边框停留

为什么需要清除浮动

1、父元素的高度无法被撑开,影响与父元素同级的元素;

2、与浮动元素同级的非浮动元素(内联元素)会跟随其后; 北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com

第 42 页 共 348 页

3、若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构解

决方法

清除浮动的方式

1、使用 CSS 中的 clear:both;(放一个空的 div,并设置上述 css),属性来清除元素的浮动

可解决 2、3 问题

2、对于问题 1,添加如下样式,给父元素添加 clearfix 样

式:.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.cl

earfix{display: inline-block;} /* for IE/Mac */

3、给父级元素设置双伪元素

HTML5、CSS3面试题(四)-CSDN博客

举报

相关推荐

0 条评论