1、 link 和@import 有什么区别?
- Link 属于 html 标签,而@import 是 CSS 中提供的
- 在页面加载的时候,link 会同时被加载,而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
- @import 只有在 ie5 以上才可以被识别,而 link 是 html 标签,不存在浏览器兼容性问题
- Link 引入样式的权重大于@import 的引用(@import 是将引用的样式导入到当前的页面中)
2、rgba()和 opacity 的透明效果有什么不同?
- rgba()和 opacity 都能实现透明效果,但最大的不同是 opacity 作用于元素,以及元素内的所有内容的透明度,
- 而 rgba()只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果!)
3、BFC
BFC(Block Formatting Context)格式化上下文,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。
形成 BFC 的条件:
- 浮动元素,float 除 none 以外的值
- 定位元素,position(absolute,fixed)
- display 为以下其中之一的值 inline-block,table-cell,table-caption
- overflow 除了 visible 以外的值(hidden,auto,scroll)
BFC 的特性:
- bfc 就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
- BFC元素垂直方向的边距会发生重叠
- BFC的区域不会与浮动元素的box重叠(可用于清除浮动)
4、display:none 与 visibility:hidden 的区别是什么?
- display : 隐藏对应的元素但不挤占该元素原来的空间。
- visibility: 隐藏对应的元素并且挤占该元素原来的空间。
5、 display:inline-block 显示间隙?
- 原因是因为,换行或空格会占据一定的位置
- 解决方法:父元素中设置 font-size:0;letter-spaceing:-4px;
- 浮动也可以
6、超链接访问过后 hover 样式就不出现的问题是什么?如何解决?
- 被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序: L-V-H-A(link,visited,hover,active)
7、css sprite 是什么,有什么优缺点
- 他是将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
- 优点:
- 减少 HTTP 请求数,极大地提高页面加载速度。
- 增加图片信息重复度,提高压缩比,减少图片大小。
- 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现。
- 缺点:
- 图片合并麻烦。
- 维护麻烦,修改一个图片可能需要从新布局整个图片,样式。
8、什么是 FOUC?如何避免
- 在引用 css 的过程中,如果方法不当或者位置引用不对,会导致某些页面出现一些奇怪的现象,以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效,简称 FOCU。
- 原因大致为:
- 使用 import 方法导入样式表
- 将样式表放在页面底部
- 有几个样式表,放在 html 结构的不同位置。
- 其实原理很清楚:当样式表晚于结构性 html 加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。
- 解决方法:使用 link 标签将样式表放在文档 head 中。
9、CSS 在性能优化方面的实践
- 内联首屏关键 CSS(Critical CSS)
- 内联 CSS 能够使浏览器开始页面渲染的时间提前,只将渲染首屏内容所需的关键 CSS 内联到 HTML 中
- 异步加载 CSS
- 文件压缩
- 去除无用 CSS
10、盒子模型
类别:标准盒子模型、怪异盒子模型(又称 IE盒子模型)
区别:宽高计算方式不同
怪异 width = border + padding + content
标准 width = content
如何设置:box-sizing
box-sizing:content-box;
box-sizing:border-box; /*IE模型*/
11、z-index属性失效
- 父元素position为relative时,子元素的z-index失效。解决:父元素position改为absolute或static;
- 元素没有设置position属性为非static属性。解决:设置该元素的position属性为relative,absolute或是fixed中的一种;
- 元素在设置z-index的同时还设置了float浮动。解决:float去除,改为display:inline-block
12、为什么有时候⽤translate来改变位置⽽不是定位?
ranslate 是 transform 属性的⼀个值。
改变transform或opacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)。
⽽改变绝对定位会触发重新布局,进⽽触发重绘和复合。
transform使浏览器为元素创建⼀个 GPU 图层,但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效,
可以缩短平滑动画的绘制时间。 ⽽translate改变位置时,元素依然会占据其原始空间,绝对定位就不会发⽣这种情况。
13、伪元素和伪类的区别和作用
伪元素:在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成。它们只在外部显示可见,但不会在文档的源代码中找到它们,因此,称为“伪”元素。例如:
p::before {content:"第一章:";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
伪类:将特殊的效果添加到特定选择器上。它是已有元素上添加类别的,不会产生新的元素。例如:
a:hover {color: #FF00FF}
p:first-child {color: red}