前端面试题大合集5----CSS篇

目录

一、介绍一下BFC及其应用

二、设置div水平垂直居中

三、：分析比较 opacity: 0、visibility: hidden、display:none 优劣和适用场景。

四、CSS中link和@import的区别是什么？

五、position：absolute和float属性的异同

六、介绍一下box-sizing属性

七、CSS选择符有哪些，优先级呢？

八、CSS3新增伪类有那些？

九、说说你对语义化的理解？

十、说一下saas和less

---

一、介绍一下BFC及其应用

全称：Block Formating Context，块格式化上下文，是web页面的可视CSS渲染的一部分，相当于一个独立的容器，里面的元素和外部的元素相互不影响。

1、什么方式会创建BFC

• 根元素 html
• 浮动 float
• 绝对定位 absolute/fixed
• overflow不为visible
• display为表格布局，或者弹性布局，table/flex/grid

2、BFC主要的作用：

• 清除浮动
• 防止同一个BFC容器中的相邻元素间的外边距重叠问题

二、设置div水平垂直居中

<div class="parent">
    <div class="child"></div>
</div>

1、用flex布局

div.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

2、利用定位

div.parent {
    position: relative;
}
div.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3、利用定位

div.parent {
    position: relative;
}
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -5px;
}

4、利用定位

div.parent {
    position: relative;
}
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

5、利用grid布局

div.parent {
    display: grid;
}
div.child {
    justify-self: center;
    align-self: center;
}

6、利用伪元素

div.parent {
    font-size: 0;
    text-align: center;
}
div.parent::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}
div.child{
    display: inline-block;
    vertical-align: middle;
}

三、：分析比较 opacity: 0、visibility: hidden、display:none 优劣和适用场景。

• opacity: 0

占空间，可以点击，是元素的透明度变成了0，肉眼看不见，但是dom节点本身还在渲染树上，dom节点没有被销毁。

• visibility: hidden

占空间，不能点击，场景：再次显示不会导致页面结构发生变动，不会撑开，肉眼看不见，但是dom节点本身还是在渲染树上，dom节点没有被销毁。

• display:none

不占空间，不能点击，本质上是该元素从dom的渲染节点被销毁了，所以看不见；

四、CSS中link和@import的区别是什么？

1. link属于html标签，而@import是CSS提供的；
2. 页面被加载时，link会被同时加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载它引用的内容；
3. @import只在IE5以上才能识别，而link四HTML标签，无兼容问题；
4. link方式的样式的权重 高于@import的权重。

五、position：absolute和float属性的异同

• 共同点：对元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高；
• 不同点：float仍会占据位置，absolute会覆盖文档流中的其它元素。

六、介绍一下box-sizing属性

• box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是：content-box。
• content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置的width/height不包含padding和border，仅是只content的部分。
• border-box：让元素维持IE传统盒模型（也叫做怪异盒模型，IE6以下版本和IE6 ～ 7的怪异模式）。设置width/height属性包含padding和border，即：border + padding + content。

---

七、CSS选择符有哪些，优先级呢？

• 有以下类别：

1）id选择器（ # myid）

2）类选择器（.myclassname）

3）标签选择器（div, h1, p）

4）相邻选择器（h1 + p）

5）子选择器（ul > li）

6）后代选择器（lia）

7）通配符选择器（ * ）

8）属性选择器（a[rel = "external"]）

9）伪类选择器（a: hover, li:nth-child）

优先级如下：

!important > id > class > tag

important 比 内联优先级高,但内联比 id 要高

---

八、CSS3新增伪类有那些？

• CSS3新增伪类举例：

p:first-of-type选择属于其父元素的首个元素的每个元素。

p:last-of-type 选择属于其父元素的最后元素的每个元素。

p:only-of-type 选择属于其父元素唯一的元素的每个元素。

p:only-child 选择属于其父元素的唯一子元素的每个元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。

:enabled :disabled控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

九、说说你对语义化的理解？

1. 去掉或者丢失样式的时候，能够让页面呈现出清晰的结构；
2. 有利于SEO：和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重；
3. 方便其它设备解析（如盲人阅读器、移动设置），以意义的方式来渲染网页；
4. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

十、说一下saas和less

都是css预处理器，都是css的一种抽象层，都需要用相应的loader编译成css，然后供浏览器渲染。可以增加css代码的复用性，层级，变量，循环，函数等对编写以及开发UI组件都极为方便。虽然它们的功能类似，但是它们之间存在一些区别。

1、编译环境不同

Sass是在服务端处理的，需要使用编译工具将Sass代码编译成CSS文件。目前常用的编译工具有Dart-Sass和Node-Sass。举个例子，如果我们有一个Sass文件“style.scss”，我们可以使用Dart-Sass编译成CSS文件“style.css”的命令，就像这样：

sass style.scss style.css

less则需要在客户端使用JS引入less文件，使用less.js将less代码编译成css文件。

2、变量符不同

sass使用$作为变量符，而less使用@。例如，在sass中定义一个变量：

$primary-color: #f00; 

在less中定义一个变量：

@primary-color: #f00;  

3、条件语句不同

sass支持条件语句，可以使用if else for循环等。例如：

$condition: true;  
@if $condition {  
  // do something...  
} @else {  
  // do something else...  
}

less没有类似的条件语句，例如：

@condition: true;  
.some-class {  
  color: ~`@{condition} ? "#f00" : "#0f0"`; // 使用JavaScript表达式  
} 

4、继承方式不同

Sass和Less都支持CSS的继承方式，但是它们之间的实现方式不同。Sass使用“@extend”语句实现继承，而Less使用“:extend()”方法实现继承。举个例子，在Sass中，我们可以这样实现继承：

.parent {  
  color: #f00;  
}  
.child {  
  @extend .parent; // 使用@extend语句实现继承  
  font-size: 16px;  
}

在less中：

.parent {  
  color: #f00;  
}  
.child {  
  &:extend(.parent); // 使用:extend()方法实现继承  
  font-size: 16px;  
}