CSS中关于linebox的baseline位置移动的理解
前言
最近看到一篇文章，弗里得木的翻译笔记，里面有个问题没有解决，就是linebox的baseline为什么会移动呢？
在讨论这个问题之前读者需要对 默认值baseline 以及 其他属性值（天镶的博客）有一定了解。
下面详细描述这个baseline移动的问题，先上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin: 100px auto;
width: 500px;
background: #bbbbbb;
font-size: 30px; } span.child {
display: inline-block;
border: 10px solid #0000cc; } span.big {
display: inline-block;
width: 100px;
height: 200px;
background: #FF6600;
vertical-align: bottom;
}
/*
问题
child元素和文本框text的vertical-align的默认值为baseline，
将big元素的vertical-align分别设置为top、bottom、middle，
为什么child和text会随之移动？，而改变了veritical-align值的big元素却几乎没有移动
因为child和text的默认值为baseline，所以会移动是不是代表着linebox的baseline也移动了呢？
*/
</style>
</head>
<body>
<div>
<span class="child">child</span>
text
<span class="big"></span>
</div>
</body>
</html>
问题：
child和text的vertical-align的默认值为baseline，将big元素的vertical-align分别设置为top、bottom、middle，
为什么child和text会随之移动？而改变了veritical-align值的big元素却几乎没有移动。
因为child和text的默认值为baseline，所以会移动是不是代表着linebox的baseline也移动了呢？
我的想法：
其实baseline没有发生移动，只是CSS默认overflow不能向上溢出，所以只能强制把baseline的位置相对向下移动了。
上面这句话是本文的重点，理解了这句话后面就不用看了，后面将详细解释这句话。
正文
一、big元素的veritical-align设置为bottom
①首先，我们先把big元素给注释掉，只剩下child和text
②接下来我们把big元素vertical-align：bottom重新加上去，假设overflow可以向上溢出，那会出现这样的情况，以下属于个人yy
③可是没办法，overflow不能向上溢出，只能向下或向右溢出，现在就只能把这个盒子向下移动，并且保持父元素的margin-top为100px，于是乎，出现了这样的情况。
二、big元素的vertical-align设置为top
①首先，我们先把big元素给注释掉，只剩下child和text
②然后我们把big元素给加回来，因为vertical-align：top不会向上溢出，所以变成下面这样的情况
③到此就结束了，是不是还没明白我们在搞什么鬼，哈哈，那看看下面的总结。
总结
上面我们解释了为什么把big元素的vertical-align从bottom变为top后，big元素本身位置没有移动，
而child和text两个默认vertical-align为baseline却随之移动。
其实linebox的baseline并没有发生移动，只是overflow不能向上溢出，所以强制父元素盒子相对向下移动了。其他vertical-align设置为middle、text-top、text-bottom也是类似，这里就不再赘述了。
以上纯属个人的猜想，欢迎大家指正文章中不正确的地方，谢谢阅读。
CSS中关于linebox的baseline位置移动的理解的更多相关文章
- CSS中的before和:after伪元素深入理解
1.定义: “伪元素”,顾名思义.就是它创建了一个虚假的元素,并且将其虚假的元素插入到目标元素的内容之前或之后. 2:特点: a.它在实际文档中不改变什么,但是对用户可见,可以通过css控制,源码中看 ...
- CSS中vertical-align的默认值baseline的理解
写在前面的话 在学校业余学习了一个月的CSS,人生中第一篇博客就献给CSS了,欢迎大家指正文章中不正确的地方,在此感谢.在尝试开始写博客的时候查了好多资料,原本以为写自己熟悉的知识的博客很容易,没想到 ...
- CSS中盒子模型和position（一）
今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...
- css中的baseline
这是css中的一个容易被人忽略的概念,今天在知乎上看到一个问题,这个问题应该是关于baseline,才去补习了一下关于baseline的知识,首先我来还原一下问题: <div style=&qu ...
- 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
- 如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果
映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...
- CSS中的IFC和BFC入门
CSS中的IFC和BFC入门 提到CSS,首先会想到的就是盒模型,如果对于盒模型不是很理解的,看这里.这是一个基础的系列,看了盒模型还可以看看box-sizing,好了不多说了,下面介绍今天的重点 ...
- CSS中各种布局的背后(*FC)
CSS中各种布局的背后,实质上是各种*FC的组合.CSS2.1中只有BFC和IFC,CSS3 中还增加了FFC和GFC. 盒模型(BoxModel) 上图为W3C标准盒模型,另外还有一种IE盒模型(I ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
随机推荐
- 如何理解<base href="<%=basePath%>" ---转载
原文链接http://316325524.blog.163.com/blog/static/6652052320111118111620897/ "base href " 今天在写 ...
- Jenkins持续集成企业实战系列之Jenkins插件下载及邮件配置-----05
注:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任. 最初接触Jenkins也是由于公司需求,根据公司需求Java代码项目升级的.(公司是 ...
- Jenkins项目部署使用教程-----01安装
基本配置: 1.Linux安装配置jdk环境 1.1.上传到 Linux 服务器:例如: 上传至: cd /usr/local 1.2.解压: rpm -ivh jdk-8u111-linux-x64 ...
- 关于RN热更新-iOS端捕获加载jsbundle异常解决方案
1.监听加载jsbundle异常的处理 模拟情况:合并增量后jsbundle文件出现部分错误调试发现当加载jsbundle出现异常时,RN模块RCTBatchedBridge.m中如下代码会执行: - ...
- xz
- js中的slice和splic
一:slice 的用法 slice() 用于数组方法可从已有的数组中返回选定的元素,也就是在该方法中指定的元素.该方法不会改变原数组,,返回值是一个新的数组. 选取的范围是 从 当前位(0) 开始(索 ...
- python之列表，元组，字典。
在博主学习列表,元组以及字典的时候,经常搞混这三者.因为他们都是用括号表示的.分别是[],(),{}. 列表(list): [1,'abc',1.26,[1,2,3],(1,2,3),{'age:18 ...
- 洛谷 P3157 [CQOI2011]动态逆序对(树套树)
题面 luogu 题解 树套树(树状数组套动态开点线段树) 静态使用树状数组求逆序对就不多说了 用线段树代替树状数组,外面套树状数组统计每个点逆序对数量 设 \(t1[i]\)为\(i\)前面有多少个 ...
- 【AC自动机】【树状数组】【dfs序】洛谷 P2414 [NOI2011]阿狸的打字机 题解
这一题是对AC自动机的充分理解和树dfs序的巧妙运用. 题目背景 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机. 题目描述 打字机上只有28个按键,分别印有26个小写英文字母和' ...
- POJ - 3261 后缀数组 height应用
题意:求最少重叠\(k\)次的重复子串的最大长度 子串长度问题依然是二分枚举,可以观察出重叠的一定是sa排序中连续的 之前想出一种判断要\(n^2\)的方法,没有考虑到后面肯定会连续出现的情况 (大概 ...