前端高频面试题---css篇

1. 简单介绍一下bfc

BFC 是 Block Formatting Contexts 的缩写，即块级格式化上下文。它是一个独立的渲染区域，只包含块级元素。BFC 的布局规则决定了内部块级元素的布局。这个区域与外部完全隔绝，内部的 Box 会在垂直方向一个接一个地放置，Box 垂直方向的距离由 margin 决定，属于同一个 BFC 中的两个相邻 Box 的 margin 会重叠。在计算 BFC 的高度时，浮动元素也参与计算。

BFC 可以由以下方式触发：

根元素（HTML 元素）的 float 值为 none。
绝对定位元素（position 值为 absolute 或 fixed）。
display 值为 inline-block、table-cell、table-caption。
overflow 的值不为 visible。

BFC 的特点包括：

垂直外边距（top 和 bottom）会与相邻元素的垂直外边距发生重叠。
内部元素不会对外部元素产生影响，外部元素也不会对它的内部元素产生影响。
不会与浮动元素发生重叠。
高度计算包括内部的浮动元素。

解决 BFC 中 margin"塌陷"的方法是给父元素添加 overflow:hidden 或 float:left，使其成为一个 BFC。当父元素成为 BFC 时，子元素的 margin 不再与父元素的 margin 发生重叠，从而解决了 margin"塌陷"问题。

2. 水平居中，垂直居中，水平垂直居中

水平居中可以在很多不同的场景和元素上实现，下面是一些常见的方法：

文本居中：

使用CSS的text-align属性可以使文本水平居中。

css 复制代码

html复制代码
	<div style="text-align:center;">这是一段居中的文本。</div>

块级元素居中：

如果你想让一个块级元素（比如div）在其父元素中水平居中，你可以使用margin属性。

css 复制代码

html复制代码
	<div style="margin: 0 auto; width: 50%;">这是一个居中的块级元素。</div>

这里，margin: 0 auto表示上下边距为0，左右边距为auto，这会让元素在其父元素中水平居中。

Flex布局居中：

使用CSS的Flex布局也可以很容易地实现居中。

css 复制代码

html复制代码
	<div style="display: flex; justify-content: center;">  

	    <div>这是一个使用Flex布局居中的元素。</div>  

	</div>

这里，display: flex会让元素成为flex容器，justify-content: center会使其子元素在水平方向上居中。

Grid布局居中：

使用CSS的Grid布局也可以很容易地实现居中。

css 复制代码

html复制代码
	<div style="display: grid; place-items: center;">  

	    <div>这是一个使用Grid布局居中的元素。</div>  

	</div>

这里，display: grid会让元素成为grid容器，place-items: center会使其子元素在水平和垂直方向上居中。

使用CSS变量：

对于更复杂的布局，你可能需要使用CSS变量。

xml 复制代码

html复制代码
	<style>  

	    :root {  

	        --main-container-width: 80%;  

	    }  

	    .main-container {  

	        display: grid;  

	        place-items: center;  

	        width: var(--main-container-width);  

	        margin: 0 auto;  

	    }  

	</style>  

	<div class="main-container">  

	    <div>这是一个使用CSS变量和Grid布局居中的元素。</div>  

	</div>

这里，我们定义了一个CSS变量--main-container-width，然后在.main-container中使用它。我们还使用了place-items: center来在水平和垂直方向上居中元素。注意，我们还在width属性中使用了CSS变量。此外，我们使用了margin: 0 auto来在水平方向上居中元素。

垂直居中在CSS中有多种方法，以下是一些常见的方法：

使用Flexbox：

这是一个非常强大且现代的方法，你可以使用它来垂直居中一个元素。

html 复制代码

<div style="display: flex; align-items: center; height: 100vh;">
    <div>这是一个使用Flexbox垂直居中的元素。</div>
</div>

在这个例子中，外层div设置为display: flex让其成为flex容器，align-items: center会让其子元素在垂直方向上居中。为了让元素在整个视口高度内居中，我们将高度设置为100vh。

使用CSS Grid：

CSS Grid布局也是一个现代的布局模型，它可以非常容易地实现垂直居中。

html 复制代码

<div style="display: grid; align-items: center; height: 100vh;">
    <div>这是一个使用CSS Grid垂直居中的元素。</div>
</div>

在这个例子中，我们将外层div设置为display: grid让其成为grid容器，align-items: center会让其子元素在垂直方向上居中。同样，为了让元素在整个视口高度内居中，我们将高度设置为100vh。

使用定位和转换：

这个方法需要使用到定位和转换，比较复杂，但在某些情况下可能会很有用。

html 复制代码

<div style="position: relative; height: 100vh;">
    <div style="position: absolute; top: 50%; transform: translateY(-50%);">这是一个使用定位和转换垂直居中的元素。</div>
</div>

在这个例子中，我们将外层div设置为position: relative，让内部元素可以相对于它进行定位。然后我们将内部div设置为position: absolute并把它的顶部设置为50%，接着使用transform: translateY(-50%)将元素向上移动自身高度的一半，使其垂直居中。

使用line-height：

如果你要居中的是一行文本，那么你可以使用line-height属性。将line-height设置为与height相同的值可以让文本在这一行中垂直居中。

html 复制代码

<div style="height: 100px; line-height: 100px;">这是一段居中的文本。</div>

请注意这种方法只适用于单行文本，并且如果文本有多行，这种方法可能会导致布局出现问题。

3. 简单介绍下弹性盒子flex，以及如何使用

弹性盒子布局，也称为 Flexbox，是一种一维的布局模式，它适用于当页面需要适应不同的屏幕大小以及设备类型时，以确保元素拥有恰当的行为。这种布局方式主要用于对一个容器中的子元素进行排列、对齐和分配空白空间。

使用弹性盒子布局，主要需要设置以下属性：

display: flex;：这将使一个元素变为弹性盒子容器。
flex-direction: 用来控制子项整体的布局方向。
justify-content: 决定了主轴方向上子项的对齐和分布方式。
align-items: 决定了侧轴方向上子项的对齐方式。
flex-wrap: 控制弹性盒子中的换行操作，例如，当子元素的内容已经达到最小宽高的时候就会出现溢出的现象。

以上就是弹性盒子布局的基本概念和使用方法，具体使用时可能还需要根据实际的设计需求进行调整。

4. 请介绍一下iframe,以及它的优缺点

iframe的优点包括：

可以将网页分割成多个模块，每个模块负责不同的功能，使网页更加可维护和可扩展。
可以实现网页的异步加载，将网页分割成多个部分，每个部分可以独立加载，提高网页的加载速度。
可以实现网页的跨域通信，从而实现更多的功能和交互效果，提供更好的用户体验。
可以实现网页多窗口显示，方便用户操作多个网页。
可以原封不动地把嵌入的网页展现出来。
如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用每一个页面内容的更改，方便快捷。
可以增加代码的重用，如果遇到加载缓慢的第三方内容如广告等，这些问题可以由iframe来解决。

然而，iframe也存在一些缺点：

搜索引擎的检索程序无法解读这种页面，不利于SEO（搜索引擎优化）。
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
安全性问题：由于iframe可以嵌入其他网页，这就意味着它可以被恶意网站用于欺骗用户，例如通过伪装成信任的网站来窃取用户的敏感信息。此外，iframe也可以用于点击劫持攻击，即通过透明的iframe覆盖在用户可见的按钮或链接上，当用户点击时，实际上是点击了被覆盖的iframe中的内容。
虽然iframe有跨域的优势，但也有限制。由于浏览器的同源策略，iframe存在跨域限制。这意味着，如果嵌入的网页与父页面不属于同一个域名、协议或端口，那么会影响页面的并行加载。

总的来说，iframe在某些情况下可以用来解决一些问题，但也有一些缺点需要注意。在选择使用iframe时，需要权衡其优缺点并根据具体情况做出决策。

5. link 标签和import标签的区别？

link和import标签的区别主要有以下几点：

本质区别：link是html的一个标签，除了导入css文件外，还可以定义其他事物，而import是css的法则，只供给css加载文件。
DOM控制：DOM可以控制文档中的所有元素，可以插入link修改样式，不可以操作import。
权重优先级：link的修改样式的优先级高于import。
加载顺序：link导入的css文件随着页面加载而加载，import等到页面加载完毕，再加载。
兼容性：link作为html标签没有兼容性问题，而import不兼容ie5及以下。

综上所述，link和import的主要区别体现在它们的本质、DOM控制、权重优先级、加载顺序以及兼容性方面。

6. css3的新特性有哪些

CSS3有很多新特性，其中包括：

选择器：例如，E:last-child和E:nth-child(n)等，它们可以更精确地选择和操作元素。
层叠性：这是解决样式冲突的问题，遵循就近原则，哪个样式离结构近，就执行哪个样式。
继承性：子标签会继承父标签的某些样式，比如text-，font-，line-这些元素开头的可以继承，以及color属性。
优先级：继承或者* ： 0，0，0，0；元素标签选择器： 0，0，0，1；类选择器、伪类选择器： 0，0，1，0；ID选择器： 0，1，0，0；行内样式 style=" " ： 1，0，0，0；!important ：无穷大。优先级根据选择器的特性来决定。
Font-face特性：@font-face可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
多背景图：CSS3允许在一个元素上添加多层背景图片。
过渡与动画：可以实现平滑的过渡效果和动画效果。
阴影：分为文本阴影（text-shadow）和盒子阴影（box-shadow），可以给元素增加立体感和深度。
CSS3的特性还包括圆角（border-radius）、弹性盒子（flexbox）、网格（grid）等。