css面试题

目录

面试题

1、rem 适配方法如何计算 HTML 跟字号及适配方案

2、CSS 中 link 和@import 的区别？

3、Display：none 与 visibility：hidden 的区别？

4、Position 的值有哪些，分别有哪些作用？

5、为什么会出现浮动？浮动元素会引起什么问题？如何 清除浮动？

---

面试题

面试题一：

1、rem 适配方法如何计算 HTML 跟字号及适配方案

问题解答：

通用方案

        1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）                 2、通过媒体查询分别设置每个屏幕的根 font-size

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

        优：有一定适用性，换算也较为简单

        劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不 同 手机，单某款手机尺寸不在设置范围之内，会导致无法适配

网易方案

        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 编辑器插件开发时，单 位计算复杂

面试题二：

2、CSS 中 link 和@import 的区别？

问题解答：

1.适用范围不同

         @import 可以在网页页面中使用，也可以在 CSS 文件中使用，用来将多 个 CSS 文件引入到一个 CSS 文件中；而 link 只能将 CSS 文件引入到网页页面中

2.功能范围不同

        link 属于 XHTML 标签，而@import 是 CSS 提供的一种方式，link 标签 除 了可以加载 CSS 外，还可以定义 RSS，定义 rel 连接属性等，@import 就只能加载 CSS 加载顺序不同 当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而@import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import 加载 CSS 的页 面时开始会没有样式（就是闪烁），网速慢的时候还挺明显

3.兼容性

        由于@import 是 css2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题

4.控制样式时的差别

        使用 link 方式可以让用户切换 CSS 样式.现代浏览器如 Firefox,Opera,Safari 都支持 rel=”alternate stylesheet”属性(即可在浏览器上选择不同 的 风格),当然你还可以使用 Javascript 使得 IE 也支持用户更换样式 权重区别 link 引入的样式权重大于@import 引入的样式

面试题三：

3、Display：none 与 visibility：hidden 的区别？

问题解答：

最常用的为 display:none 和 visibility:hidden dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失 visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置

区别

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

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

        3.在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为 transition 可 以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户 体 验

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

面试题四：

4、Position 的值有哪些，分别有哪些作用？

问题解答：

static：默认值 不脱离文档流，top，right，bottom，left 等属性不生效 绝对定位：absolute 绝对定位的关键是找对参照物，要成为绝对定位元素的参照物必须满足以下两个条件：

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

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

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

        注：设置了 position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右 margin 为 auto 将会失效；我们通过 left、top、bottom、right 来决定元素位置

        相对定位：relative

        参照物：元素偏移前位置

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

        固定定位：fixed

        参照物：浏览器窗口；

        注：固定定位会脱离文档流；

        当绝对定位和固定定位参照物都是浏览器窗口时的区别： 当出现滚动条时，固定定位的 元 素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动

面试题五：

5、为什么会出现浮动？浮动元素会引起什么问题？如何 清除浮动？

问题解答：

        浮动定位将元素排除在普通流之外，即元素讲脱离文档流，不占据空间。浮动元素碰到包 含它的边框或者浮动元素的边框停留

为什么需要清除浮动

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

         2、与浮动元素同级的非浮动元素（内联元素）会跟随其后；

        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、给父级元素设置双伪元素；

<div class="container clearfix"> 
 <div class="wrap">aaa</div> 
</div> 
.clearfix:after{ 
 content:""; /*设置内容为空*/ 
 height:0; /*高度为 0*/ 
 line-height:0; /*行高为 0*/ 
 display:block; /*将文本转为块级元素*/ 
 visibility:hidden; /*将元素隐藏*/ 
 clear:both; /*清除浮动*/ 
} 
.clearfix{ 
 zoom:1; /*为了兼容 IE*/ 
} 

        4、给父级元素设置 overflow：hidden；或 overflow：auto；本质是构建一个 BFC