前言:
现在大家对“css 条件”大致比较看重,姐妹们都想要剖析一些“css 条件”的相关内容。那么小编同时在网上收集了一些对于“css 条件””的相关知识,希望看官们能喜欢,同学们快快来学习一下吧!前言
我们经常使用CSS,但是却不怎么了解CSS,本文主要对vertical-align、BFC、position中开发过程不怎么注意的特性进行简要总结,从本文中,你将了解到以下内容:
vertical-align为何时灵时不灵BFC是什么?有何作用绝对定位的奇淫技巧CSS特性vertical-align为什么时灵时不灵生效条件
只能应用在display为inline、inline-block、inline-table、table-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)绝对定位元素(元素的 position 为 absolute 或 fixed)行内块元素(元素的 display 为 inline-block)表格单元格(元素的 display 为 table-cell,HTML表格单元格默认为该值)表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)匿名表格单元格元素(元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别- 是HTML table、row、tbody、thead、tfoot 的默认属性)或 inline-table)overflow 计算值(Computed)不为 visible 地块元素display 值为 flow-root 的元素contain 值为 layout、content 或 paint 的元素弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)网格元素(display 为 grid 或 inline-grid 元素的直接子元素)多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)column-span 为 all 的元素始终会创建一个新的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都有值的定位当对立位置(left与right,top与bottom)都设置值且元素没用固定宽高
此时元素的宽高是根据元素位置决定的,张鑫旭大佬在《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平分剩余可用空间,因此就产生居中效果。而垂直方向不存在剩余可用空间,因此无法垂直居中。
上述demo,box-item之所以能够垂直居中,得益于top/bottom设置了值,使元素产生高度100%的外部尺寸,而width/height固定元素的内部尺寸,使得 外部尺寸高度-内部尺寸高度=元素剩余可用空间高度,而auto等分剩余可用空间,可以使元素达到垂直居中效果。可以尝试调整四个方向的值,看看box-item位置是怎么移动的。
无依赖的绝对定位
当绝对定位没有设置四周定位尺寸时,会发生神奇的一幕,当前元素没有相对于最近的非 static 祖先元素定位,而是在当前位置不变,并且当前元素脱离文档流,不占据页面空间。这个特性某些情况下非常有用,比如给box-card加一个图标,借助无依赖定位 + padding/margin即可。写法比较简洁,建议尝试一下。
小结
比起其他的开发语言,想要深入了解CSS,并不是一件容易事,大多数人都是停留在用的基础上,知道这个属性/方法,至于为什么会这样了解较少。张鑫旭大佬CSS高度让人叹为观止,继续加油吧!!!
标签: #css 条件