网站首页 > 基础教程正文

四年前端在CSS面试上跪了【亲身经历】

ccvgpt 2024-12-27 12:24:02 基础教程 2 ℃

作者：红尘炼心

四年前端在CSS面试上跪了【亲身经历】

转发链接：https://juejin.im/post/5ea45801e51d4546d4399055

前言

在面试最后，面试官突然问了我最后一个问题。怎么清除浮动。当然我很快给出最常用的方法。

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
复制代码

本来我以为，面试官还会问，还有那些方法，我脑中已经构思了好几种方法。没想到，面试官竟然问我，这个方法清楚浮动的原理。

原理！当时我就有点懵逼，这个方法很常见，也经常在用，但是就没去理解过其原理。脑子在飞快的运转。

首先::after是元素的伪元素,在元素后面；
content是伪元素的内容，为空,应该只是让伪元素不显示，而display:block;height:0保证伪元素高度为零不显示，应该跟清除浮动没多大关系。
另外visibility: hidden,是让伪元素浏览器渲染但不显示，也应该跟清除浮动没多大关系。
那么就剩下clear: both，我也不清楚它的含义，但是用排除法，这应该就是清除浮动的关键。

于是，我就含糊的回答，是clear: both这个属性起了作用。但是面试官的表情告诉我，我的回答他很不满意。

后面他又叫我，简单讲一下什么是BFC，它有什么作用。我只听过KFC,哪里听过BFC，这下彻底懵逼了。平时在工作中大多数都是在写JS代码，很少去操作CSS。

虽然后来还是被录取了，但是薪资下降了2K，达不到预期。只能很遗憾了。

回到家中，上网查一下资料，做个总结，分享一下。

CSS还是前端的基本功，不管你有多年工作经验！！！别认为只有在初级前端面试中才会问CSS，警戒！！

一、清除浮动的原理

没错，clear:both还真是清除浮动的关键，被我蒙对了。

clear是CSS中的定位属性，规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。

clear属性只能在块级元素上起作用，这就是清除浮动样式中display:block的作用。

另外visibility: hidden;height: 0;只要content的值为空。写不写都无所谓。

那么为什么要清除浮动，最常见的是因为外层容器高度坍塌，下面用一段代码演示一下。

<style>
.wrap {
    width: 200px;
    border: 1px solid #333;
}
.wrap:after {
    content: '';
    display: block;
    clear: both;
}
.left {
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.right {
    float: left;
    background: red;
    height: 50px;
    width: 100px;
}
</style>
<body>
    <div class='wrap'>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

为了显示清楚一点，在.wrap:after 样式中的content设置为content: 'after伪元素' ,此时如下图所示。

随后在.wrap:after 样式中加上clear:both,表明after伪元素左右两侧均不允许浮动元素，没办法只好把after伪元素放在下面，此时如下图所示。

顺带撑起了.wrap父元素的高度，这样就相当清除了浮动了，解决了外层容器高度坍塌的问题。

那么我们把.wrap:after 样式中的content设置为content:' ',最后就如下图所示。

二、BFC的概念和应用

1、BFC的概念

BFC的全称是 Block Formatting Contexts。

Formatting Contexts是页面中的一块渲染区域，它拥有一套渲染规则，决定其子元素将如何定位，以及和其它元素的关系和相互作用。说白了就是一个决定如何渲染元素的容器。

2、BFC的渲染规则

那么BFC就是一个决定如何渲染元素的容器。我们要了解就是它的渲染规则。

1、内部的块级元素会在垂直方向，一个接一个地放置。
2、块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻块级元素的margin会发生重叠。
3、对于从左往右的格式化，每个元素（块级元素与行内元素）的左边缘，与包含块的左边缘相接触，(对于从右往左的格式化则相反)。即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC。
4、BFC的区域不会与浮动元素重叠。
5、BFC是一个隔离的独立容器，容器里面的子元素和外面的元素互不影响。
6、计算BFC容器的高度时，浮动元素也参与计算。

3、BFC的渲染规则详解

3.1 规则二

以上渲染规则，第一点比较好理解。第二点我们用一个例子解释一下。

<body>
    <div style="width:100px;height:100px;background:red;margin:20px;"></div>
    <div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</body>
复制代码

按样式代码来看，红块和蓝块之间间距应该是40px。但实际上是20px。这就是BFC渲染规则的第二点。

因为BFC的触发条件之一就是根元素，所以body就是一个BFC容器，红块和蓝块是同在body下的相邻块级元素，其margin会生重叠，所以红块和蓝块之间间距只有20px。

3.2 规则三

第三点规则比较难理解我详细解释一下。首先要先理解包含块的含义。

包含块不是一个完整的box，一个完整的box包含margin包含块，border包含块，padding包含块，content包含块。

包含块有可能是box的content包含块，也可能是box的padding包含块。这取决于被包含块所包含的元素的position属性。

例如，如果某个元素position属性是absolute，包含块就是由它的最近的position的值不是 static的父级元素的padding包含块组成。

再例如，如果某个元素的position属性是static或relative，包含块就是由它的父级元素的content包含块。

如果某个元素的position属性是fixed，包含块就是视口。

那么。BFC中的元素应该与其自身的包含块相接触，而非与BFC相接触，这个包含块有可能是BFC中的一部分，也有可能和bfc无关。

正常元素都是从左往右的格式化，那么对元素的position属性是absolute,right为0，或者元素的float的属性为right，那么就是从右往左的格式化，元素的右边缘和包含块的右边缘接触。

元素H触发生成BFC，其中有两个元素A和元素B，元素A的float的属性为left，那么元素A的左边缘和元素H（也是元素A的包含块）左边缘接触，如果元素B的float的属性也为left，元素B的左边缘不和元素H的左边缘接触，而是和元素A的右边缘接触。这种情况就可以用规则中的“即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC”来解释，元素的float的属性不为none会触发生成BFC，所以这种情况是不矛盾的。

3.3 规则四

这点是BFC最重要的一点渲染规则，可以用这个规则解决很多布局的问题。

3.4 规则五

这个规则，可以用来解决内部元素浮动，导致父能元素的高度坍塌问题。

4、BFC的触发条件

根元素
float的值不是none。
position的值不是static或者relative。
display的值是inline-block、inline-flex、flex、flow-root、table-caption、table-cell。
overflow的值不是visible。

5、BFC的应用

1、清除浮动

在文章最初，提到用clear:both来清除浮动，我们也可以根据BFC的渲染规则第6点（计算BFC容器的高度时，浮动元素也参与计算）来清除浮动，解决高度坍塌的问题。

2、解决上下margin边距问题

<body>
    <div style="width:100px;height:100px;background:red;margin:20px;"></div>
    <div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</body>
复制代码

我们利用BFC渲染规则第2点（属于同一个BFC的两个相邻块级元素的margin会发生重叠），那么不属于同一个BFC的两个相邻块级元素的margin就不会发生重叠。

那么我们在第二个div元素用一个div元素包裹起来，并用overflow:auto触发其BFC。再看一下效果是不是不重叠了。

<body>
    <div style="width:100px;height:100px;background:red;margin:20px;"></div>
    <div style="overflow:auto">
        <div style="width:100px;height:100px;background:blue;margin:20px;"></div>
    </div>
</body>
复制代码

3、实现自适应两栏布局

自适应两栏布局，是一个主内容区域和一个侧边栏区域组成，两个区域的宽度都可以随窗口大小自适应。有很多种写法可以实现。

这里来实现一种利用BFC的渲染规则的写法。

<style>
    .main{
        background: red;
        height:500px;
    }
    .sider {
        float: left;
        width: 20%;
        height:300px;
        background: blue;
    }
</stley>
<body>
    <div class="sider">我是侧边栏</div>
    <div class="main">我是主体内容</div>
<body>
复制代码

首先我们根据规则1，要先把.sider div写在.main div前面。这个.sider div才会浮动起来覆盖在.main div上面。

再根据规则4（BFC的区域不会与浮动元素重叠），给.main加上overflow:auto;触发.main div生成BFC。

四、IFC的概念和应用

1、IFC的概念

IFC的全称是Inline Formatting Contexts，也就是“内联格式化上下文”。

2、IFC的生成条件

IFC的形成条件非常简单，块级元素中仅包含内联级别元素，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。

3、IFC的渲染规则

子元素水平方向横向排列，并且垂直方向起点为元素顶部。
子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
在垂直方向上，子元素会以不同形式来对齐（vertical-align）
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。

4、IFC的应用

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

五、FFC的概念和应用

1、FFC的概念

FFC的全称是Flex formatting contexts，弹性盒模型。

2、FFC的生成条件

父级元素设置display:flex或者`display:inline-flex

3、FFC的渲染规则`

可以看阮一峰的Flex 布局教程：语法篇，讲的非常详细。

要注意一点。生成FFC后，其子元素的float、clear和vertical-align属性将失效。

4、FFC的应用

1、自动撑开页面高度，底栏总是出现在页面的底部

<style>
.wrap{
    display:flex;
    padding:0;
    margin:0;
    min-height:100vh;
    flex-direction:column;
}
.main{
    flex-grow:1;
}
</style>
<body class="wrap">
    <header style="line-height:50px;background:red;color:#fff;text-align:center">头部</header>
    <main class="main">内容</main>
    <footer style="line-height:50px;background:#eeeeee;color:#333;text-align:center">底栏</footer>
</body>
复制代码

2、经典的圣杯布局

<style>
.wrap {
    display: flex;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    flex-direction: column;
}
header,
footer {
    flex: 0 0 50px;
}

.content {
    display: flex;
    flex: 1
}

.main {
    flex: 1;
}
.nav,
.ads{
    flex: 0 0 100px;
    background:green;
}
.nav{
    order:-1;
    background:yellow;
}
</style>
<body class="wrap">
    <header style="line-height:50px;background:red;color:#fff;text-align:center">头部</header>
    <div class="content">
        <main class="main">内容区</main>
        <nav class="nav">侧边导航</nav>
        <aside class="ads">侧边栏</aside>
    </div>
    <footer style="line-height:50px;background:#eeeeee;color:#333;text-align:center">底栏</footer>
</body>
复制代码

网站首页 > 基础教程正文

四年前端在CSS面试上跪了【亲身经历】

前言

一、清除浮动的原理

二、BFC的概念和应用

1、BFC的概念

2、BFC的渲染规则

3、BFC的渲染规则详解

3.1 规则二

3.2 规则三

3.3 规则四

3.4 规则五

4、BFC的触发条件

5、BFC的应用

1、清除浮动

2、解决上下margin边距问题

3、实现自适应两栏布局

四、IFC的概念和应用

1、IFC的概念

2、IFC的生成条件

3、IFC的渲染规则

4、IFC的应用

五、FFC的概念和应用

1、FFC的概念

2、FFC的生成条件

3、FFC的渲染规则`

4、FFC的应用

1、自动撑开页面高度，底栏总是出现在页面的底部

2、经典的圣杯布局

推荐CSS学习相关文章

猜你喜欢

网站首页 > 基础教程 正文

四年前端在CSS面试上跪了【亲身经历】

前言

一、清除浮动的原理

二、BFC的概念和应用

1、BFC的概念

2、BFC的渲染规则

3、BFC的渲染规则详解

3.1 规则二

3.2 规则三

3.3 规则四

3.4 规则五

4、BFC的触发条件

5、BFC的应用

1、清除浮动

2、解决上下margin边距问题

3、实现自适应两栏布局

四、IFC的概念和应用

1、IFC的概念

2、IFC的生成条件

3、IFC的渲染规则

4、IFC的应用

五、FFC的概念和应用

1、FFC的概念

2、FFC的生成条件

3、FFC的渲染规则`

4、FFC的应用

1、自动撑开页面高度，底栏总是出现在页面的底部

2、经典的圣杯布局

推荐CSS学习相关文章

猜你喜欢

网站首页 > 基础教程正文