CSS实用技巧(中)

2021年9月7日 3点热度 0条评论 来源: Gerryli

前言

我们经常使用CSS,但是却不怎么了解CSS,本文主要对vertical-alignBFCposition中开发过程不怎么注意的特性进行简要总结,从本文中,你将了解到以下内容:

  • vertical-align为何时灵时不灵
  • BFC是什么?有何作用
  • 绝对定位的奇淫技巧

CSS特性

vertical-align为什么时灵时不灵

生效条件

只能应用在displayinlineinline-blockinline-tabletable-cell上。

有个高频面试题,“如何使一个不定宽高div垂直水平居中?”,有的萌新竟然回答用vertical-align: middle。这个回答是减分的,至少在某种程度上给人一种感觉CSS基础比较薄弱。

内联元素垂直居中对齐

开发中会遇到用字幕x代替关闭icon,用...显示溢出或者加载中。但是会发现字母x、省略号并没有与文本垂直方向居中对齐,这是因为文本默认是基线对齐,x、省略号默认底部在基线处。如下图所示:

如下,为文本对齐demo:

<div class="container">
  <span>你好,世界</span>
  <span class="more">...</span>
</div>

实际显示效果如下:

如果要实现垂直居中,利用vertical-align,搭配line-height即可,vertical-align不仅可以设置middle/top/bottom/baseline...关键字,也可以设置常用的度量单位,正负值均可,使用比较灵活。为什么要给.more设置line-height属性呢?其实是因为line-height属性可以继承,如果不缩小.more的行高,就会撑大父元素的尺寸。

<style>
  .container{
    font-size: 64px;
    line-height: 64px;
  }
  .more{
    line-height: 16px;
    vertical-align: 16px;
  }
</style>

BFC究竟有什么作用

什么是BFC

BFC全称block formatting context,即“块状格式化上下文”,与外界元素相对独立的一片区域,具有以下特性:

  • 计算BFC高度时,浮动元素也参与计算
  • 属于同一BFC容器的元素垂直方向的margin会合并
  • BFC容器是独立容器,不会影响外部元素的布局

利用BFC的特性,我们可以实现以下功能:

  1. 清除浮动
  2. 防止垂直方向margin合并
  3. 实现多栏弹性布局

BFC的生效条件

以下CSS属性会触发元素生成BFC结界:

  • 根元素(<html>
  • 浮动元素(元素的 float 不是 none
  • 绝对定位元素(元素的 positionabsolutefixed
  • 行内块元素(元素的 displayinline-block
  • 表格单元格(元素的 displaytable-cellHTML表格单元格默认为该值)
  • 表格标题(元素的 displaytable-captionHTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 displaytabletable-rowtable-row-grouptable-header-grouptable-footer-group(分别- 是HTML tablerowtbodytheadtfoot 的默认属性)或 inline-table
  • overflow 计算值(Computed)不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layoutcontentpaint 的元素
  • 弹性元素(displayflexinline-flex 元素的直接子元素)
  • 网格元素(displaygridinline-grid 元素的直接子元素)
  • 多列容器(元素的 column-countcolumn-width 不为 auto,包括 column-count 为 1)
  • column-spanall 的元素始终会创建一个新的BFc

BFC使用案例

  • 清除浮动
<style>
  .container{
    /* overflow: hidden; */
    /* position: absolute; */
    /* float: left; */
  }
  .left{
    float: left;
    width: 200px;
    height: 200px;
  }
</style>
<div class="container">
  <div class="left"></div>
</div>

以上代码,container容器高度为0,因为子元素left浮动。我们只需要把container容器转成BFC容器,即可清楚浮动,注释的几种方法都可以。

  • 防止垂直方向margin合并
<style>
  .blue, .red-inner {
    height: 50px;
    margin: 10px 0;
  }

  .blue {
    background: blue;
  }

  .red-outer {
    overflow: hidden;
    background: red;
  }
</style>
<div class="blue"></div>
<div class="red-outer">
  <div class="red-inner">red inner</div>
</div>
  • 自适应布局

左侧固定,右侧自适应。

<style>
  .left{
    height: 200px;
    width: 200px;
    float: left;
    background-color: burlywood;
  }
  .right{
    height: 200px;
    margin-left: 200px;
    background-color: cadetblue;
  }
</style>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

绝对定位还能玩出什么花样

简介

绝对定位使用场景非常多。绝对定位元素脱离文档流,相对于最近的非 static 祖先元素定位,可以利用left/right/top/bottom定位元素位置。我们通常都是设置垂直方向与水平方向的的位置,如果四个方向都不设置或者四个方向都设置会出现什么彩蛋呢?下文会给出揭晓。

left/top/right/bottom都有值的定位

  • 当对立位置(leftrighttopbottom)都设置值且元素没用固定宽高

此时元素的宽高是根据元素位置决定的,张鑫旭大佬在《CSS世界》中定义为格式化宽高,如下代码,最终box-item的宽高计算为:width = 200 - 50 -50 = 100px;width = 200 - 50 -50 = 100px;

<style>
  .box{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: bisque;
  }
  .box-item{
    position: absolute;
    left: 50px;
    right: 50px;
    top: 50px;
    bottom: 50px;
    background-color: coral;
  }
</style>
 <div class="box">
    <div class="box-item"></div>
  </div>

这种行为特性对于我们做自适应布局非常有用,而且兼容性非常好,比如我们要做左侧固定宽度,右侧自适应,除了以上BFC的写法,我们还可以采用以下方法:

<style>
  .container{
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
  }
  .left{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    background-color: burlywood;
  }
  .right{
    position: absolute;
    left: 200px;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: cadetblue;
  }
</style>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
  • 当对立位置都设置了值且元素设置了固定宽高

这个时候你会发现,元素的宽高时以width/height为准,上述说的格式化宽度、高度并没有生效。这是因为在高度计算过程中,元素的内部尺寸优先级大于外部尺寸,width/height影响的是元素内部尺寸,绝对定位影响的是外部尺寸,当元素绝对定位四个方向都设置值,此时外部尺寸会被内部尺寸覆盖,导致实际元素宽度是width/height的值。

我们经常用margin: 0 auto;实现元素水平居中,但是不定宽高元素垂直水平居中就有些麻烦。但是有个神奇的现象,绝对定位配合margin: auto;,可以实现元素垂直水平居中,如下所示:

<style>
  .box{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: bisque;
  }
  .box-item{
    position: absolute;
    margin: auto;
    width: 50px;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: coral;
  }
</style>
<div class="box">
  <div class="box-item"></div>
</div>

出现这种现象是因为margin:auto本质上是平分元素剩余可用空间,块级元素一般是水平方向自动充满,垂直方向顺序排列。平常我们用margin: 0 auto;之所以能够使块级元素水平居中,是因为水平方向元素存在剩余可用空间,而auto平分剩余可用空间,因此就产生居中效果。而垂直方向不存在剩余可用空间,因此无法垂直居中。
上述demobox-item之所以能够垂直居中,得益于top/bottom设置了值,使元素产生高度100%的外部尺寸,而width/height固定元素的内部尺寸,使得 外部尺寸高度-内部尺寸高度=元素剩余可用空间高度,而auto等分剩余可用空间,可以使元素达到垂直居中效果。可以尝试调整四个方向的值,看看box-item位置是怎么移动的。

无依赖的绝对定位

当绝对定位没有设置四周定位尺寸时,会发生神奇的一幕,当前元素没有相对于最近的非 static 祖先元素定位,而是在当前位置不变,并且当前元素脱离文档流,不占据页面空间。这个特性某些情况下非常有用,比如给box-card加一个图标,借助无依赖定位 + padding/margin即可。写法比较简洁,建议尝试一下。

小结

比起其他的开发语言,想要深入了解CSS,并不是一件容易事,大多数人都是停留在用的基础上,知道这个属性/方法,至于为什么会这样了解较少。张鑫旭大佬CSS高度让人叹为观止,继续加油吧!!!

参考资料

  • CSS世界》
  • BFC
    原文作者:Gerryli
    原文地址: https://www.cnblogs.com/gerry2019/p/15235117.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。