CSS知识点汇总(五)--文本对齐&脱离文档流

1. 什么是 FOUC? 如何避免

1. 什么是 Fouc(文档样式短暂失效)？

   在引用 css 的过程中，如果方法不当或者位置引用不对，会导致某些页面在 windows 下的 ie 出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称 FOCU。

2. 原因大致为：

   • 使用 import 方法导入样式表
   • 将样式表放在页面底部
   • 有几个样式表，放在 html 结构的不同位置

当样式表晚于结构性 html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

3. 解决方法：
   使用 link 标签将样式表放在文档 head 中

2. CSS 预编语言是什么？它们之间有什么区别呢？

CSS 预编语言是一种基于 CSS 的扩展语言，可以更加方便和高效地编写 CSS 代码。其主要作用是为 CSS 提供了变量、函数、嵌套、继承、混合等功能，以及更加易于维护和组织的代码结构。

常见的 CSS 预编语言有 Sass、Less 和 Stylus，它们的区别有：

• 语法不同：Sass 和 Less 使用类似于 CSS 的语法规则，而 Stylus 则使用了更加简洁和灵活的缩进式语法。
• 变量定义方式不同：Sass 使用 $ 符号来定义变量，Less 使用 @ 符号，Stylus 则直接使用变量名即可。
• 操作符和函数库不同：Sass 和 Less 支持常见的操作符和函数库，例如运算符、颜色处理、字符串处理等，而 Stylus 的函数库更加强大，支持更多的特性和功能。
• 编译方式不同：Sass 和 Less 都需要通过编译器进行编译，可以将预编译的代码转换成标准的 CSS 代码。而 Stylus 则可以直接在浏览器中解析和执行，可以动态调整样式和布局。

3. z-index属性在什么情况下会失效？

z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效：

• 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
• 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或fixed中的一种；
• 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

4. 单行文本怎么实现两端对齐？

大家首先想到的可能是 text-align: justify;，但justify对最后一行无效

方法一：添加一行
根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下：

//html
<div class="box">
    <span class="item-label" >{{item.label}}</span>：
    <span class="iten-value">{{item.value}}</span>
</div>
//scss
.box{
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    .item-label {
        display: inline-block;
        height: 100%;
        width: 100px;
        text-align: justify;
        vertical-align: top;
        &::after {
            display: inline-block;
            width: 100%;
            content: '';
            height: 0;
        }
    }
    .item-value {
        padding-right: 10px;
    }
}

方法二： text-align-last
text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

//scss
.box{
    margin-bottom: 8px;
    .item-label {
        display: inline-block;
        height: 100%;
        min-width: 100px;
        text-align: justify;
        text-align-last: justify;
    }
    .item-value {
        padding-right: 10px;
    }
}

5. 怎么实现单行、多行文本溢出隐藏？

• 单行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

• 多行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

6. transition和animation的区别

transition是过渡属性，强调过渡，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

7. CSS动画和JS实现的动画分别有哪些优缺点？

1. CSS动画
   优点

   • 浏览器可以对动画进行优化
   • 代码相对简单,性能调优方向固定
   • 对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

   缺点

   • 运行过程控制较弱,无法附加事件绑定回调函数
   • 代码冗长，想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

2. JS动画
   优点

   • 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
   • 动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
   • CSS3有兼容性问题，而JS大多时候没有兼容性问题

   缺点

   • 代码的复杂度高于CSS动画
   • JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况

8. 脱离文档流有哪些方法？

1. 什么是文档流？

将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

2. 什么是脱离文档流？

元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

3. 怎么脱离文档流？

• float
  使用float可以脱离文档流。

  使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

• absolute
  absolute称为绝对定位，使用absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。

• fixed
  完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。