玩儿前端——CSS垂直的那些事儿

tigerZH 发布于2019-08-28 18:18 / 1677人阅读

摘要：替换元素或任何其他类型的非文本元素会忽略这个值。要对齐的元素的行内框底端再与父元素的底端对齐。往往将元素的垂直中点与父元素基线上方处的一个点对齐。

说说自己对行高和垂直对齐的理解

行高

line-height属性是指文本行基线之间的最小距离，而不是字体的大小

首先，基线(baseline)指的是英文四线格的倒数第二条线。

其次，关于font-size，字体大小受font-size形成的em框限制。

最后，在line-height设定时，由line-height决定基线间最小距离。

关于上图

A line box containing some text and elements.

一行文字被放在一个line box里，而line box又由一个或多个inline box(行内框)组成，上图有5个inline box。

inline box中的文本内容组成了content area(虚线框所示)，content area的大小跟文字大小有关，而决定文字大小的是font-size，因此font-size作用于content area。在未设置line-height的情况下，inline box的高度由content area决定。

而line-height则是作用于inline box高度，line-height为20px;font-size为16px;的情况下，会在content area的上下设定2px的间隔。这样上下两行基线间距离也就增加了4px

line box的高度由inline boxs中最高的那一个决定。

height设定的是容器的高度，并非line box高度，如果容器高度正好与line box高度相等，那么行文本就在容器内垂直居中了。
line-height例子

垂直对齐

vertical-align
作用于:行内元素和表单元格
默认值：baseline

baseline: 一个元素的基线与其父元素的基线对齐。如果元素没有基线，比如这是一个图像或表单输入元素，或者是其他替换元素——那么该元素的底端与其父元素的基线对齐。

bottom: 将元素行内框的底端与行框的底端对齐

text-bottom: text-bottom是指行内文本的底端。替换元素或任何其他类型的非文本元素会忽略这个值。要对齐的元素的行内框底端再与父元素content area的底端对齐。

middle: 往往（但并不总是）应用于图像。middle往往将元素的垂直中点与父元素基线上方0.25em处的一个点对齐。

百分数: 把元素的基线（或替换元素的底边）相对于父元素的基线升高或降低指定的量（你指定的百分数要计算为该元素line-height的百分数，而不是相对于其父元素的line-height）。


I felt that, if nothing else, I deserved a
raisefor my efforts.

span的基线身高9px，继承自父元素的line-height×50%

云服务器 GPU云服务器前端技术主要有那些前端css css前端前端css框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111153.html

CSS那些事儿——居中布局

摘要：前言居中布局，是前端页面最常见的一种布局需求。下面将现今自己了解的居中布局方法作个小总结。水平居中行内元素在包含的父元素定义属性为。垂直水平居中对于这个问题，可以综合上述点进行实现。前言居中布局，是前端页面最常见的一种布局需求。刚开始学习前端时还是困扰了一段时间，后来看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面将现今自己了解的居...

JeOam 2019-08-29 13:05 评论0 收藏0
React 服务端渲染完美的解决方案

摘要：三服务端渲染方式方式一传统方式服务端渲染，解决用户体验和更好的，有诸多工具使用这种方式如的的等。未列入白名单即请求不是请求或未通过任何过滤器，将只是充当反向代理，只是按原样传送请求和响应。一、服务器端渲染是什么?使用 React 构建客户端应用程序，默认情况下，可以在浏览器中输出 React 组件，进行生成 DOM 和操作 DOM。React 也可以在服务端通过 Node.js 转换...

CoderBear 2019-08-02 16:09 评论0 收藏0
React 服务端渲染完美的解决方案

摘要：服务端渲染两种方式根据上文介绍对服务端渲染利弊有所了解，我们可以根据利弊权衡取舍，最近在做服务端渲染的项目，找到多种服务端渲染解决方案，大致分为两类。第一种方式传统方式服务端渲染，解决用户体验和更好的，有诸多工具使用这种方式如的的等。最近在开发一个服务端渲染工具，通过一篇小文大致介绍下服务端渲染，和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思，根据你对服务端渲染的利弊权...

DesGemini 2019-08-23 14:02 评论0 收藏0
2019前端面试那些事儿

摘要：虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总新特性，语义化浏览器的标准模式和怪异模式和的区别使用的好处标签废弃的标签，和一些定位写法放置位置和原因什么是渐进式渲染模板语言原理盒模型，新特性，伪虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总1.HTMLHTML5新特性，语义化浏览器的标准模式和怪...

JeOam 2019-08-02 14:28 评论0 收藏0