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、省略号默认底部在基线处。如下图所示:

CSS实用技巧(中)

如下,为文本对齐demo:

<div> <span>你好,世界</span> <span>...</span> </div>

实际显示效果如下:

CSS实用技巧(中)

如果要实现垂直居中,利用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 的元素始终会创建一个新的BFc

BFC使用案例

清除浮动

<style> .container{ /* overflow: hidden; */ /* position: absolute; */ /* float: left; */ } .left{ float: left; width: 200px; height: 200px; } </style> <div> <div></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></div> <div> <div>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> <div></div> <div></div> </div> 绝对定位还能玩出什么花样 简介

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

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

当对立位置(left与right,top与bottom)都设置值且元素没用固定宽高

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwdxyp.html