前言

最近看到一篇文章，弗里得木的翻译笔记，里面有个问题没有解决，就是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位置移动的理解的更多相关文章

  1. CSS中的before和:after伪元素深入理解

    1.定义: “伪元素”,顾名思义.就是它创建了一个虚假的元素,并且将其虚假的元素插入到目标元素的内容之前或之后. 2:特点: a.它在实际文档中不改变什么,但是对用户可见,可以通过css控制,源码中看 ...

  2. CSS中vertical-align的默认值baseline的理解

    写在前面的话 在学校业余学习了一个月的CSS,人生中第一篇博客就献给CSS了,欢迎大家指正文章中不正确的地方,在此感谢.在尝试开始写博客的时候查了好多资料,原本以为写自己熟悉的知识的博客很容易,没想到 ...

  3. CSS中盒子模型和position（一）

    今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...

  4. css中的baseline

    这是css中的一个容易被人忽略的概念,今天在知乎上看到一个问题,这个问题应该是关于baseline,才去补习了一下关于baseline的知识,首先我来还原一下问题: <div style=&qu ...

  5. 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  6. 如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果

    映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...

  7. CSS中的IFC和BFC入门

    CSS中的IFC和BFC入门   提到CSS,首先会想到的就是盒模型,如果对于盒模型不是很理解的,看这里.这是一个基础的系列,看了盒模型还可以看看box-sizing,好了不多说了,下面介绍今天的重点 ...

  8. CSS中各种布局的背后(*FC)

    CSS中各种布局的背后,实质上是各种*FC的组合.CSS2.1中只有BFC和IFC,CSS3 中还增加了FFC和GFC. 盒模型(BoxModel) 上图为W3C标准盒模型,另外还有一种IE盒模型(I ...

  9. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

随机推荐

  1. 分享记录一批免费VIP视频解析接口，不定时更新！

    VIP视频接口的作用相信大家都懂,那么,由于接口的维护.开发具有不稳定性,失效率很高.这里收集一些目前可用的接口,如果不能用,请反馈给我删除,感谢大家! 电影<西虹市首富>优酷链接:htt ...

  2. angluarJs与后台交互get

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  3. 斐讯 N1 刷 Armbian 5.75

    前言 不知不觉居然鸽了快半年的博客_(:3」∠)_ 好吧最近发现之前玩的 N1 Armbian 系统已经出到 5.75 了,之前刷 5.64 玩过,具体博文在此,说实话并不是很稳定,有线网络有时会卡死 ...

  4. HDU6312 Game(博弈，拿出本数与这个数的除数)

    题意:A和B玩游戏 , 给出1 ~ n 的集合 ,每个人可以拿出一个数 , 这个数的除数也被拿出 , A先开始 , 没有数拿的人就输 , 问A赢不赢 分析:很有意思的一道题目 ///假设2 ~ n A ...

  5. HDU - 2089 数位DP 初步

    中文题目,不要62和4 从高位往低位DP,注意有界标志limit的传递 dp2记忆有界情况下的计数结果,据说用处不大 我所参考的入门文章就是半搜索(有界)半记忆(无界)的 进阶指南中提出dfs维度有多 ...

  6. 制作支持UEFI启动的原装系统安装盘

    目前市面上大多数的计算机主板均支持UEFI,而且默认就是UEFI,会让新手安装系统遇到各种问题,最常见的就是找不到硬盘,通过光盘来安装操作系统,固然不会遇到什么问题,但是现在主流手段都是通过U盘来安装 ...

  7. Laravel项目部署到Nginx服务器除了/目录,全飘404

    https://blog.csdn.net/yoywow/article/details/52153610 不管是Nginx还是Apache,如果不配置,都会出现404,不能路由. 我云服务器安装的是 ...

  8. git平台创建项目(码云)

    一.在码云创建项目 1.新建仓库 2,项目名称等 3.创建后的界面 4.克隆远程项目到本地(项目地址和用户名密码) git clone 仓库地址 注意,如果当前目录下出现git仓库同名目录时,会克隆失 ...

  9. 剑指offer5.1——O（n）的复杂度合并两个有序数组

    #include"iostream" #include"stdio.h" using namespace std; int* ArrayMerge(int *a ...

  10. SQL手工注入学习 一

    sql注入:    (基于DVWA环境的sql注入) 流程:    1.判断是否有SQL注入漏洞    2.判断操作系统.数据库和web应用的类型    3.获取数据库信息看,包括管理员信息(拖库)  ...