CSS实用技巧

我们经常使用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
  • 绝对定位元素(元素的 position 为 absolute 或 fixed
  • 行内块元素(元素的 display 为 inline-block
  • 表格单元格(元素的 display 为 table-cellHTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-captionHTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display 为 tabletable-row、 table-row-grouptable-header-grouptable-footer-group(分别- 是HTML tablerowtbodytheadtfoot 的默认属性)或 inline-table
  • overflow 计算值(Computed)不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layoutcontent 或 paint 的元素
  • 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
  • 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的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

本文为原创文章,如有转载,烦请注明出处,谢谢!