阅读 18364
『面试的经历』—— 四年前端在CSS面试上跪了/(ㄒoㄒ)/~~

『面试的经历』—— 四年前端在CSS面试上跪了/(ㄒoㄒ)/~~

四年前端跪在CSS面试上,不可思议! CSS面试不是初级前端才会跪的吗。

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

.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的触发条件之一就是根元素html,红块和蓝块是同在根元素html容器下的相邻块级元素,其margin会生重叠,所以红块和蓝块之间间距只有20px。

3.2 规则三

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

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

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

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

再例如,如果某个元素的position属性是staticrelative,包含块就是由它的父级元素的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的触发条件

  • 根元素html
  • float的值不是none
  • position的值不是static或者relative
  • display的值是inline-blockinline-flexflex flow-roottable-captiontable-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面试上跪了的后续,如果觉得好的,点个赞,让更多人看到,谢谢。

文章分类
前端
文章标签