『豪横，让面试官无题可问』☛第二期-Css让人忽视的面试题-----猛男,你还记得吗？

引言

文章目录

- - 引言
  - 1.谈一下为什么要初始化CSS样式？
  - 2.谈一下你对BFC规范的理解
  - 3.谈一下CSS3有哪些新增的特性？
  - 4.谈一下在页面上隐藏元素的方法有哪些？
  - 5.说说什么是重绘和重排？
  - 6.谈谈你对相对定位、绝对定位、固定定位的理解
  - 7.CSS选择器有哪些？哪些属性可以继承？
  - 8.CSS3新增伪类有哪些并简要描述?
  - 9.谈谈你理解的优雅降级和渐进增强？
  - 10.style标签写在body前和body后的区别是什么？
  - 11.什么是FOUC？你是如何避免FOUC的？
  - 12.用css创建一个三角形，并简述原理？
  - 13.谈一下清除浮动的几种方法
  - 14.谈一下css常用的布局方式有哪些？
  - 15.谈一下::before和:after中单冒号和双冒号的区别是什么，这两个伪元素有什么作用？
  - 16.谈一下CSS sprites的原理和优缺点分别是什么？

欢迎学习完第一期的猛男来和快活呀，讨论讨论、切磋切磋，来啊，豪横起来！！！
喜欢的猛男，记得对我关注，点赞，评论讨论沃！

1.谈一下为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异
初始化样式会对 SEO 有一定的影响，不友好

2.谈一下你对BFC规范的理解

BFC是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它。

形成条件（任意一条即可）

浮动的元素
定位元素（绝对定位和固定定位）
display的值是inline-block,table-cell,flex,table-caption或者inline-flex
overflow的值为hidden auto scroll

特性

内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

应用案例：

浮动后高度塌陷，会影响到外界，开启BFC不会影响到外界

已知宽高的元素水平垂直居中
不写宽高的margin：auto属性
左边固定右边自适应
等高布局等

3.谈一下CSS3有哪些新增的特性？

边框(borders):

border-radius 圆角
box-shadow 盒阴影
border-image 边框图像

背景:

background-size 背景图片的尺寸
background_origin 背景图片的定位区域
background-clip 背景图片的绘制区域

渐变：

linear-gradient 线性渐变
radial-gradient 径向渐变

文本效果:

word-break
word-wrap
text-overflow
text-shadow
text-wrap
text-outline
text-justify

过渡:

transition

动画:

@Keyframes规则
animation

弹性盒子(flexbox)

多媒体查询@media

2D转换：

transform
translate（移动）
rotate（旋转）
skew（扭曲）
scale（缩放）

3D转换：

transform
translate3d(x,y,z)
scale3d(x,y,z)
rotate3d(x,y,z,angle)
perspective(n)（景深）

4.谈一下在页面上隐藏元素的方法有哪些？

占位:

visibility: hidden;
margin-left: -100%;
opacity: 0;
transform: scale(0);

不占位:

display: none;
width: 0; height: 0; overflow: hidden;

仅对块内文本元素:

text-indent: -9999px;
font-size: 0;

利用 position （absolute 的情况下）：

left/right/top/bottom: 9999px/-9999px 让元素在视区外
z-index: -9999 放到最底层，同一位置可以让其他元素把这个给遮掉

性能角度：

disaplay: none; 页面不会渲染，可以减少首屏渲染的时间，但是会引起回流和重绘。
visibility: hidden; 页面会渲染只是不限显示。
opacity: 0; 看不见，但是会占据空间。只会引起重绘

5.说说什么是重绘和重排？

repaint（重绘）：

一般改变元素的颜色，文字颜色等等，不影响元素的周围或内部的属性，浏览器就会重绘，重新绘制某一个部分

refolw回流（也叫重排）：

我们浏览器要花费时间去渲染，只要某个部分的布局改变了（例如：浮动的margin等元素几何属性都会改变布局，排除决定定位和相对浏览器窗口定位）浏览器需要倒回去重新排列。（改变了整体）

"重绘"不一定会出现"重排"，"重排"必然会出现"重绘"

为了性能，要减少重绘重排，解决方法如下：

不要一条一条的修改样式，可以直接设置一个预先设置好的类名
千万不要使用table布局，一般我们稍微操作一下就会重新布局
对于动画来说尽量使用绝对定位或相对浏览器定位（因为不会影响到整个页面的布局）
浮动叫做不完全脱离页面流，定位完全

6.谈谈你对相对定位、绝对定位、固定定位的理解

position 属性指定了元素的定位类型。

position 属性的五个值：

static（默认值）
relative（相对定位）
fixed（固定定位）
absolute（绝对定位）
sticky（粘性定位）

relative 相对定位：相对自身元素的原来进行定位。

移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
用途：
- 第一个，为微调元素的位置
- 第二个，做绝对定位的参考(父相子绝)

absolute 绝对定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

<html>

（初始包含块）

absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

fixed 固定定位：元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关，因此不占据空间
Fixed定位的元素和其他元素重叠
用途：
- 固定到浏览器窗口固定位置的元素
- 跟随导航
- 回到顶部

sticky 粘性定位：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
用途：页面吸顶效果

参考：Position(定位) | 菜鸟教程

7.CSS选择器有哪些？哪些属性可以继承？

选择器

通配符
id
class
标签
后代选择器
子选择器
兄弟选择器
属性选择器
伪类选择器
伪元素选择器

可以继承的属性

font-size
font-weight
font-style
font-family
color

8.CSS3新增伪类有哪些并简要描述?

CSS3 中规定伪类使用一个 : 来表示；伪元素则使用 :: 来表示。

CSS3 中新增的伪元素有以下这些:

:first-child / :last-child 表示子元素结构关系的
:nth-child() / nth-last-child() 用来控制奇数、偶数行的（控制表单奇数、偶数行的样式）
:first-of-type / :last-of-type 表示一组兄弟元素中其类型的第一个元素 MDN
:nth-of-type() / :nth-last-of-type() 这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素` MDN
:root html 根元素
:not() 否定选择器，用的比较多
:only-child 只有一个子元素时才会生效
:empty 选择连空格都没有的元素

9.谈谈你理解的优雅降级和渐进增强？

渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用 CSS3，而在低级浏览器只保证最基本的功能。

优雅降级

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后再针对低版本浏览器进行兼容。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

参考文章：前端面试题-渐进增强和优雅降级

10.style标签写在body前和body后的区别是什么？

浏览器在渲染页面时 DOM 和 CSSOM 是并行的，然后两者结合形成 Render Tree 显示页面。从直觉上来说，style 写在 body 前不会对 DOM 的渲染进行阻塞；而写在 body 内会对 DOM 渲染进行阻塞。会产生 FOUC（Flash of Unstyled Content) 的现象，既一瞬间的白屏或者样式的突然变化（原因是 Render Tree 重新生成了）。

在 HTML4 的时候，不应该把 style 放到 body 中间。
不过 W3C 在 HTML5.2 的定义中对于 style 标签的使用的定义中是允许将 style 放到 body 中的。
基于浏览器从上而下的浏览机制导致，放在body后，加载速度会慢，遇到大型网站效果更不好

11.什么是FOUC？你是如何避免FOUC的？

FOUC 即 Flash of Unstyled Content，是指页面一开始以样式 A（或无样式）的渲染，突然变成样式B。

原因：是样式表的晚于 HTML 加载导致页面重新进行绘制。

通过 @import 方式导入样式表
style 标签在 body 中

解决方法：把 link 标签将样式放在 head 中

参考文档:什么是 FOUC？如何避免 FOUC？

12.用css创建一个三角形，并简述原理？

#example{
		width: 0;
		height: 0;
		border-top: 50px solid transparent;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 50px solid red;
		}

13.谈一下清除浮动的几种方法

清浮动并不是不让元素浮动，而是清除浮动元素脱离页面流

解决方法：

在父级书写 overflow：hidden 等开始 BFC 的代码，常用overflow：hidden 但是 bfc 代码都有自己的其他效果，在不影响代码的清浮动
2.在所有浮动元素的最下边书写一个空标签（块标签）书写 clear：both 在结构中多书写一行标签，有时候会影响代码
在浮动元素后边书写一个 br 给 br 标签书写一个属性： clear：all
给父级设置高度也可以清除浮动但基本不用

给父级书写

after 伪元素

替代直接在浮动元素下书写空标签的方法

一般可以直接命名一个清浮动的类名，将来如果需要清浮动，直接把类名给浮动元素的父级元素即可

.clearFix:after{
		    content:"\200B";
		    height:0;
		    display:block;
		    clear:both;
		 }
		 因为低版本的IE不支持伪元素，所以要在低版本IE中 给父元素开启haslayout （其实就是现代浏览器的BFC）

		.clearFix{
		  *zoom:1;
		}

14.谈一下css常用的布局方式有哪些？

流式布局: 最基本的布局，就是顺着 html 像流水一样流下来
绝对定位: 利用 position: absolute 进行绝对定位的布局
float 布局: 最初用来解决多栏布局的问题。比如圣杯、双飞燕的布局都可以用 float 来实现
珊格布局: bootstrap 用的布局，把页面分为 24 分，通过 row 和 col 进行布局
flex 布局: css3 的布局可以非常灵活地进行布局和排版
grid 布局: 网格布局

15.谈一下::before和:after中单冒号和双冒号的区别是什么，这两个伪元素有什么作用？

: 表示伪类，是一种样式，比如 :hover , :active 等
:: 表示伪元素，是具体的内容，比如 ::before 是在元素前面插入内容， ::after 则是在元素后面插入内容，不过需要 content 配合，并且插入的内容是 inline 的。
:before 和 :after 其实还是表示伪元素，在css3中已经修订为 ::before 和 ::after 了，只是为了能兼容IE浏览器，所以也可以表示成 :before 和 :after

16.谈一下CSS sprites的原理和优缺点分别是什么？

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。

优点：

CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节；
CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点：

图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节

『豪横，让面试官无题可问』☛第二期-Css让人忽视的面试题-----猛男,你还记得吗？

引言

文章目录

1.谈一下为什么要初始化CSS样式？

2.谈一下你对BFC规范的理解

3.谈一下CSS3有哪些新增的特性？

4.谈一下在页面上隐藏元素的方法有哪些？

5.说说什么是重绘和重排？

6.谈谈你对相对定位、绝对定位、固定定位的理解

7.CSS选择器有哪些？哪些属性可以继承？

8.CSS3新增伪类有哪些并简要描述?

9.谈谈你理解的优雅降级和渐进增强？

10.style标签写在body前和body后的区别是什么？

11.什么是FOUC？你是如何避免FOUC的？

12.用css创建一个三角形，并简述原理？

13.谈一下清除浮动的几种方法

14.谈一下css常用的布局方式有哪些？

15.谈一下::before和:after中单冒号和双冒号的区别是什么，这两个伪元素有什么作用？

16.谈一下CSS sprites的原理和优缺点分别是什么？

继续阅读

CSS的伪元素和伪类的区别

css伪类与伪元素区别

CSS中伪类和伪元素的区别

CSS的伪类与伪元素的区别

css中伪类与伪元素的区别

谈谈css的伪类和伪元素

伪类与伪元素的区别伪类与伪元素的区别

web前端布局练手项目

CSS----对字号的控制:Points, ems, pixels, 及其它单位,关键字,比例参数

赶工心得（一）

两种清除浮动的方法

如何成为一名.net 工程师?

tabpanel 使用问题

CSS之折叠菜单

DOM下元素 offset client scroll 相关属性简介

IE8 CSS设置DIV居中，添加“margin:0 auto”