重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32861 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

CSS排版:从毕升开始,我们就开始用正常流了

winter 2019-03-14
你好,我是 winter。今天我们来聊聊 CSS 的正常流。
我想,在 CSS 中,大家最讨厌的大概就是排版部分了。因为早年的 CSS 设计上不能够很好地支持软件排版需求,导致大家需要使用很多黑科技,让很多新人望而却步。
现在 CSS 提供了很多种排版方式,我们有很多选项可以选择自己适合的那一种,然而,正常流却是我们绕不开的一种排版。
我们能够在网上看到关于正常流的各种资料,比如:块级格式化上下文、margin 折叠等等……这一系列的概念光是听起来就令人非常头痛。
所以我相信很多同学一定会奇怪:正常流到底正常在哪里。事实上,我认为正常流本身是简单和符合直觉的东西。
我们之所以会觉得它奇怪,是因为如果我们从严苛的 CSS 标准角度去理解正常流,规定排版的算法,就需要引入上述那些复杂的概念。但是,如果我们单纯地从感性认知的层面去理解正常流,它其实是简单的。
下面,就让我们先抛弃掉所有的已知概念,从感性认知的角度出发,一起去理解一下正常流。

正常流的行为

首先,我们先从词源来讲一讲排版这件事。
在毕昇发明活字印刷之前,排版这项工作是不存在的,相应的操作叫做“雕版”。人们要想印刷书籍,就需要依靠雕版工人去手工雕刻印版。
活字印刷的出现,将排版这个词引入进来,排版是活字印刷的 15 道工序之一,不论是古代的木质活字印刷,还是近代的铅质活字印刷,排版的过程是由排版工人一个字一个字从字架捡出,再排入版框中。实际上,这个过程就是一个流式处理的过程。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(24)

  • Scorpio
    我大flex天下第一!!!😂
    2019-03-14
    2
    65
  • AICC
    试了一下,发现上面第二个例子的代码并不能实现想要的效果
    首先,因为hmtl代码的换行使得在inline-block的布局下两个盒子不能被放在一行这个通过父级font-size:0可解决
    第二,由于auto在html的上的顺序是比fixed后面的,想像中的层级是高于fixed的,当auto是一个有背景的盒子,fixed就被完全遮挡了,可以通过transform:translateZ(0)把它提起来
    2019-03-14
    28
  • William
    1. 等宽布局,不用外层font-size:0的方法的话,应该是.inner:not(last-child) {
      margin-right: -5px;
    }吧,前面元素均添加一个负外边距抵消掉空格大小。
    2. 因为也是用inline-block,所以自适应宽需要加上
    .outer {
      font-size: 0;
    }
    2019-03-14
    12
  • 阿成
    Sir, have a look at this...
    https://github.com/aimergenge/inline-block-layout
    2019-03-16
    7
  • 七月有风
    在 CSS 标准中,规定了如何排布每一个文字或者盒的算法,这个算法依赖一个排版的“当前状态”,CSS 把这个当前状态称为“格式化上下文(formatting context)”。
    还是没有理解这句话
    2019-03-17
    5
  • 我要飞
    一个元素规定了自身周围至少需要的空间,这个解释深有体会,无可挑剔啊
    2019-05-21
    2
  • 沉默的话唠
    为什么我写后面的完整版的,不会自动排布,宽度总是不够。被撑下去了。
    2019-03-20
    2
  • 彧豪
    grid写大的整体的布局框架,flex写一维的可线性化的布局,这两种布局的兼容性已经更好了,再加上一些模块和脚手架打包的时候能自动为你添加浏览器前缀,布局变得越来越容易了
    2019-03-15
    2
  • 有铭
    为什么三栏平分的那个样式里,给 outer 添加一个特定宽度和给最后一个 div 加上一个负的右 margin,我用chrome试验的结果,是变成了3个宽度很窄的盒子,而且第三个盒子在第二排?
    2019-03-14
    1
    2
  • away
    formatting context + boxes/charater = positions 单词charater拼写错误,应是charcter
    2019-05-01
    1
    1
  • Sticker
    感觉自适应宽还是浮动更爽一点!
    2019-04-30
    1
  • ycswaves
    .auto {
      width: calc(100% - 200px);
      // ... rest of the necessary styles
    }
    2019-03-24
    1
  • C阳
    自适应宽例子中,是否应该在.fixed, .auto中加入float:left才能正确显示效果呢?
    2019-03-14
    1
  • Geek_fc9b29
    三等分、自适应宽度,可以考虑强大的table-cell布局,自带bfc
    2019-12-03
  • 芝草晟林💦
    感觉 formatting那一段有点难理解...

    作者回复: 确实有点难

    2019-07-09
  • 金海烛光
    最后一段的代码并不是完整版,说最后代码无法换行的小伙伴要把上面消除空白那部分的css加上
    2019-06-15
  • a小磊。จุ๊บ 🌹
    最后一个例子刚好是圣杯布局和双飞翼布局的原理
    2019-04-29
  • favorlm
    老师您好,最大的恐惧就是排版,还请赐教,如何克服
    2019-03-25
  • Geek_eea87d
    请问下(行盒是块级),和一个浏览器是如何工作的 阶段四中的(浏览器对行的排版,一般是先行内布局...)这句话的 两个 行是您说的同一个行吗

    2019-03-23
  • Sentry
    老师的每节课都像是在划重点,很赞!
    2019-03-21
收起评论
24
返回
顶部