前端面试基础面试题——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 是可以设置的），就是里面文字或图片的大小。
5.什么是外边距重叠？重叠的结果是什么？
外边距重叠就是 margin-collapse。
在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。
6.rgba()和 opacity 的透明效果有什么不同？
rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度
而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果）
7.css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height 水平方向：letter-spacing
8.display:none 与 visibility:hidden 的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”; 而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
9.li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
浏览器的默认行为是把 inline 元素间的空白字符（空格换行 tab）渲染成一个空格
换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
是因为 换行导致的，那就可以将 代码全部写在一排
10.什么是 FOUC? 如何避免
1. 什么是 Fouc(文档样式短暂失效)？
在引用 css 的过程中，如果方法不当或者位置引用不对，会导致某些页面在 windows 下的 ie 出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称 FOCU。
2. 原因大致为：
- 使用 import 方法导入样式表
- 将样式表放在页面底部
- 有几个样式表，放在 html 结构的不同位置。
3. 其实原理很清楚：当样式表晚于结构性 html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
4. 解决方法：使用 link 标签将样式表放在文档 head 中。