学习前端面试知识（3）

BHDDGT

已于 2024-08-24 17:49:14 修改

阅读量567

点赞数 7

分类专栏：前端学习文章标签：前端学习

于 2024-07-29 23:52:50 首次发布

本文链接：https://blog.csdn.net/BHDDGT/article/details/140768370

版权

前端学习专栏收录该内容

18 篇文章 1 订阅

订阅专栏

2024-7-29 打卡第三天学习视频链接

（气死我了，打了大半部分复制粘贴的时候不小心全选删了！！！只能重新打）

BFC，IFC，GFC和FFC

BFC（Block Formatting Context，块级格式化上下文）在这个容器中，内部的布局不会影响到外部的布局，反之亦然。特性：
- 内部的Box会在垂直方向上一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box的左边，与包含块border box的左边相接触（对于从右到左的格式化，则相反）。即使存在浮动也是如此。
- BFC的区域不会与float box重叠
IFC（Inline Formatting Contexts，内联格式化上下文）在IFC中，盒子依次水平放置，从包含块的顶部开始。特性：
- 内联元素从左到右水平排列，直到一行排不下，然后换到下一行继续排列。
- 行框（line box）的高度由其中最高的内联元素决定。
GFC（Grid Formatting Context，网格格式化上下文）主要用于处理网格布局。网格布局是一种二维布局系统，允许开发者将页面划分为行和列，从而实现复杂的布局结构。特性：
- 网格元素在二维方向上（行和列）进行排列，形成一个网格结构。
- 提供了高度的灵活性，可以轻松处理不同类型的布局需求。
- 支持网格元素跨越多个行或列，并且可以定义行和列之间的间隔
FFC（Flex Formatting Context，弹性格式化上下文）主要用于处理弹性盒模型（Flexbox）。Flexbox是一种一维布局系统，允许开发者在一个容器内灵活地排列和对齐元素。特性：
- 弹性元素在一维方向上（主轴或交叉轴）进行排列，形成一个弹性布局。
- 提供了高度的灵活性，可以轻松处理不同类型的布局需求。
- 支持弹性元素根据可用空间进行伸缩，并且可以定义元素之间的间隔

flex布局

flexible box 弹性布局 display:flex

flex-direction 主轴

<div style="display: flex; flex-direction: row;">
    <div class="text">Item 1</div>
    <div class="text">Item 2</div>
    <div class="text">Item 3</div>
</div>
</body>
<style>
    .text{
        width : 100px;
        height: 100px;
        border: 1px solid black;
    }
</style>

flex-direction: row 横向展示
flex-direction: column 纵向展示
flex-wrap 换不换行

<div style="display: flex; flex-wrap: wrap;">
    <div class="text">Item 1</div>
    <div class="text">Item 2</div>
    <div class="text">Item 3</div>
</div>
</body>
<style>
    .text{
        width : 500px;
        height: 100px;
        border: 1px solid black;
    }
</style>

flex-wrap: wrap 换行
flex-wrap: nowrap 不换行，会无视设置的宽度，全部放在同一行
flex-flow 是 flex-direction 和 flex-wrap 的简写形式，默认值为row nowrap 即横向排列并且不换行

<div style="display: flex; flex-flow: row nowrap;">
    <div class="text">Item 1</div>
    <div class="text">Item 2</div>
    <div class="text">Item 3</div>
</div>
</body>
<style>
    .text{
        width : 500px;
        height: 100px;
        border: 1px solid black;
    }
</style>

flex-flow: row nowrap; 横向，不换行
如果设置为column和nowrap也不冲突，我开始的理解以为纵向了就是换行了，其实不是，这个换不换行控制的是一行，如果横向排列，有多个div，加起来的宽度超过了一行，这时候设置wrap才有用。如果纵向排列，每一行只有一个div，不管是换行还是不换行都没有意义，就算哪一行的div宽度超过了页面宽度，也会通过增加横拉条进行展示，而不是将一部分延伸到第二行，所以没有意义
justify-content 主轴对齐方式，不设置flex-direction，默认为row

<div style="display: flex; justify-content: flex-start;">
    <div class="text">Item 1</div>
    <div class="text">Item 2</div>
</div>
</body>
<style>
    .text{
        width : 500px;
        height: 100px;
        border: 1px solid black;
    }
</style>

默认为row justify-content: flex-start
默认为row justify-content: flex-end
默认为row justify-content: center
flex-direction : column，记得要设置容器整体的高度，不然不明显

<div style="display: flex; flex-direction: column; justify-content: center; height : 400px">
    <div class="text">Item 1</div>
    <div class="text">Item 2</div>
</div>
</body>
<style>
    .text{
        width : 500px;
        height: 100px;
        border: 1px solid black;
    }
</style>

设置为column justify-content: flex-start
设置为column justify-content: flex-end
设置为column justify-content: center
align-items 交叉轴对齐方式，即设置了主轴为column/row，对应的交叉轴就是row/column

<div style="display: flex;justify-content:flex-end; align-items: flex-end; width:400px; height : 400px; border: 1px solid black;" >
    <div class="text">Item 1</div>
    <div class="text">Item 2</div>
</div>
</body>
<style>
    .text{
        width : 100px;
        height: 100px;
        border: 1px solid black;
    }
</style>

默认主轴为row justify-content:flex-start设置的就是row; align-items: flex-end;设置的就是与row对应的column。意思是设置为横向的顶端，交叉轴（纵轴）的末端
设置主轴为column。justify-content:flex-start设置的就是column; align-items: flex-end;设置的就是与column对应的row。意思是设置为竖向的顶端，交叉轴（横轴）的末端

子元素属性

order 控制排列顺序,本来是123的，因为order变成了321


<div style="display: flex;">
    <div class="text" style="order: 2;">项目 1</div>
    <div class="text" style="order: 1;">项目 2</div>
    <div class="text" style="order: 0;">项目 3</div>
</div>
</body>
<style>
    .text{
        width : 100px;
        height: 100px;
        border: 1px solid black;
    }
</style>

flex-grow属性定义了项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果设置为0，就会是自定义样式中的100px，如果两个设置都设置为1，那就是分别占1/2，如果一个是4，一个是1，那就分别占宽度的4/5和1/5，这个时候看的是比例，和自定义样式中的100px是无关的

<div style="display: flex; width: 500px;">
    <div class="text" style="flex-grow: 1;">项目 1</div>
    <div class="text" style="flex-grow: 1;">项目 2</div>
</div>
</body>
<style>
    .text{
        width : 100px;
        height: 100px;
        border: 1px solid black;
    }
</style>

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-shrink为0就保持css中设置的大小不变，如果两个都设置为0，都会保持原来的宽度，展示出来的效果就会超出外盒。其中一个为0，另一个不管是1还是几，是0的保持原来宽度，是1的就填充外盒宽减原来宽度后剩下的部分，两个都是1就等比例缩小，两个分别为1和2的时候，就等比例缩小1/3和2/3

<div style="display: flex; width: 200px;border: 1px solid black">
    <div class="text" style="flex-shrink: 1; width: 150px;">项目 1</div>
    <div class="text" style="flex-shrink: 0; width: 150px;">项目 2</div>
</div>
</body>
<style>
    .text{
        height: 100px;
        border: 1px solid black;
    }
</style>

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器默认值为auto，即项目的本来大小

flex-basis: 20%表示占width:100%的百分之20，没有设置的项目2就保持width:100px。如果flex-basis设置为100%，也会保留项目2的width:100px部分，并且不会出现拉长条

<div style="display: flex; width: 100%;">
    <div class="text" style="flex-basis: 20%;">项目 1</div>
    <div class="text">项目 2</div>
</div>
</body>
<style>
    .text{
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
</style>

flex是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto

<div style="display: flex; width: 100%;">  
  <div style="flex: 1;">项目 1</div>  
  <div style="flex: 2;">项目 2</div>  
</div>

opacity:0，visibility:hidden和display:none 优劣和适用场景

解构：

display:none 完全消失，不占空间，内容不可见，不能点击
visibilit;y:hidden 不会消失，占据空间，内容不可见，不能点击
opacity:0 占据空间，内容不可见，可点击

继承：

display:none 和 opacity:0 非继承属性
visibility:hidden 继承属性

性能：

文档回流和重绘相比性能消耗大。
简单理解一下就是，比如现在有123三个盒子，从左到右排在页面上，这时候如果第一个盒子使用了display:none就直接消失掉了，那么接下来的盒子2和盒子3要重新排位置，在元素比较多的时候性能消耗会很大。
重绘仅仅只影响元素的外观和风格（如颜色、背景色、边框等），而不改变其在文档流中的位置和布局大小，不涉及页面布局的重新计算，所以性能消耗较小。
display:none 文档回流
visibility:hidden 和 opacity:0 重绘

如何用css或者js实现多行文本溢出省略效果，考虑兼容性

white-space:nowrap; 避免文字因超过宽度换行

overflow:hidden; 隐藏超出容器宽度的部分

text-overflow:ellipsis; 在末尾显示省略号

单行效果

<div class="myDiv">
    这是一段很长很长的文字，多出来的会用省略号处理
</div>
</body>
<style>
    .myDiv{
        width:300px;
        height:300px;
        border: 1px solid black;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
</style>

多行效果

display: -webkit-box;: 启用伸缩盒布局

-webkit-box-orient: 设置或检索伸缩盒对象的子元素的排列方式。通常设置为vertical来使子元素垂直排列

-webkit-line-clamp: 3 设置显示三行的文本数

在实现的时候碰到问题，就是设置了盒子的高度为300px，并且在第三行的末尾也出现了省略号，但是后面的内容从下一行开始又打印出来了
-webkit-line-clamp 实际上是通过限制容器的高度来间接实现文本多行截断的效果的。但是当显式设置了 height 属性，并且这个高度足够大以容纳超过三行的文本时，-webkit-line-clamp 就不会进一步限制文本的行数。即去掉height即可，需要调整每一行的高度设置line-height属性。

<div class="myDiv">
    这是一段很长很长的文字，多出来的会用省略号处理。这是一段很长很长的文字，多出来的会用省略号处理，会用省略号处理
</div>
</body>
<style>
   .myDiv{
        width:300px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow:hidden;
        line-height:2;
    }
</style>

display: -webkit-box;等设置涉及到了WebKit内核的浏览器（如Chrome、Safari），考虑到兼容性可以使用::after伪元素
现代浏览器都支持::after伪元素，但需要注意的是，在早期的IE浏览器中（如IE8及以下），可能需要使用单冒号语法（:after）来确保兼容性
开始只设置了p遇到一个问题，...出现在一行的最末尾。添加上限制宽度的div之后就正常了，line-height设置一行的高度，max-height是line-height的三倍表示最多三行，如果设置为40px就是两倍那就是限制为最多两行

<div class="myDiv">
        <p>这是一段很长很长的文字，多出来的会用省略号处理。这是一段很长很长的文字，多出来的会用省略号处理，会用省略号处理</p>
</div>
</body>
<style>
p{
    position : relative;
    line-height : 20px;
    max-height : 60px;
    overflow : hidden;
}
.myDiv{
    width:300px;
}
p::after{
    content : '...';
    position : absolute;
    bottom : 0;
    right : 0;
}
</style>