前端面试基础面试题—

前端面试基础面试题——6

1.CSS 隐藏元素的几种方法（至少说出三种）

2.页面导入样式时，使用 link 和@import 有什么区别？

3.伪元素和伪类的区别？

4.行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

5.什么是外边距重叠？重叠的结果是什么？

6.rgba()和 opacity 的透明效果有什么不同？

7.css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

8.display:none 与 visibility:hidden 的区别是什么？

9.li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

10.什么是 FOUC? 如何避免

1.CSS 隐藏元素的几种方法（至少说出三种）

1、display:none;

display翻译成中文是显示、展览的意思；将display的属性改为none可以实现元素的隐藏，元素和盒子模型也不生成，被隐藏的元素不占位置，看不见摸不着，它会导致浏览器的重排和重绘。

2、visibility:hidden;

visibility翻译成中文是能见、可见性的意思；hidden翻译成中文的是隐藏、不易察觉的意思。将visibility的属性改成hidden可以实现元素的隐藏，和display:none的区别是它占位置，看不见但是摸得着，所以它只会导致浏览器重绘而不会重排。

3、opacity:0;

opacity翻译成中文是透明度、不透明的意思；将opacity的属性改成0那就是透明度等于0看不见元素，但是这种方法也是只能隐藏看不见元素，和visibility:hidden一样，元素依然存在页面中。

4、position；

利用定位将元素的top和left值设为足够大的负数，使它移出屏幕在屏幕上看不见。

5、overflow:hidden；

overflow翻译成中文是漫出、溢出的意思；将overflow的属性设置hidden可以实现元素隐藏，但是这个是超出盒子的部分隐藏，有局限性。

总：常用的方法就是display:none 和visibility:hidden。

2.页面导入样式时，使用 link 和@import 有什么区别？

1. Link 属于 html 标签，而@import 是 CSS 中提供的

2. 在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS

3. @import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题

4. Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

3.伪元素和伪类的区别？

伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等

伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。

伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）；

伪类是给页面中已经存在的元素添加一个类。

4.行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。