龙空技术网

CSS实用技巧(中)

我是切图仔 152

前言:

现在大家对“css 条件”大致比较看重,姐妹们都想要剖析一些“css 条件”的相关内容。那么小编同时在网上收集了一些对于“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的特性,我们可以实现以下功能:

清除浮动防止垂直方向margin合并实现多栏弹性布局BFC的生效条件

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

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

<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 条件