首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 排版与正常流 —— 重学CSS

这一周我们重新回到《重学 CSS》系列,之前的文章中我们重新学习了《CSS 选择器》和《CSS 语法与规则》。接下来我们就一起来讲讲 CSS 里面的排版与正常流。...在讲解 CSS 当中的排版和正常流的时候,我们会按照属性的一些逻辑关系来分成几个部分来讲解与学习。 盒 ( Box ) 讲到排版,我们需要引入的第一个概念就是 "盒"。...之前我们在《模拟浏览器》和之前的一些 CSS 的文章中都讲到了排版相关的概念。 而我们真正去讲到排版的时候,我们需要用到的单位一定就是 "盒"。...CSS 选择器中的是元素。 其实这里还可以加一个 "或",在《CSS 选择器》中讲到的,CSS 选择器选中的是元素或者是伪元素。 !! CSS 选择器中的元素,在排版时可能产生多个盒。...正常流 CSS排版其实是有三代的排版技术的: 第一代就是正常流 第二代就是基于 Flex 的排版 第三代就是基于 Grid 的排版 结合最近推出的 CSS Houdini,可能更接近的是 3.5 代

84321
您找到你想要的搜索结果了吗?
是的
没有找到

CSS flex 排版与动画 — 重学 CSS

这一部分我们来了解一下 Flex 排版的详细知识。 !! 今天这个特别的日子,我给这篇文章加入了 1024 节日彩蛋。认真阅读,认真学习你们会找到你们自己的一片彩虹哦!...Flex 排版 在之前的《实现中学习浏览器原理》篇章中,其实已经有了比较详细的接触到 Flex 排版的知识。这里我们基本上是重新复习一下 Flex 的排版技术。...Flex 的排版逻辑还是分为三步: 收集盒进行 计算盒在主轴方向的排布 计算盒在交叉轴方向的排布 !! 对 flex 排版来说,是没有文字的,所以说 flex 排版我们是收集所有的盒进行。...计算交叉轴方向 根据每一个行最大元素尺寸计算行高 根据行高 flex-align 和 item-align ,确定元素具体位置 CSS 动画 CSS 当中控制表现的无非就是三类: 控制元素位置和尺寸的信息...这个就是 CSS animation 的基本用法。

1.3K51

《精通CSS》第4章 网页排版

或许大家会觉得排版都是设计师的工作,前端开发按照已经排版好的设计稿复原就行。当然,这样理解也没有太大问题,但是过于依赖于设计师往往会限制我们的脚步。...作为前端开发,对于排版我们要有自己的认知,而且更好地理解 CSS 中关于网页排版的技术,我们也能更得心应手地还原设计稿。...本章原书用了近 40 页的篇幅来介绍排版,歪马会尽量精简地将其中的核心内容传达给大家。 同原书,借助维基百科中一篇关于月亮的文档来给大家介绍排版。...、连字符的使用、Web 字体的使用以及 OpenType 新排版特性。...small-caps效果 CSS2.1 中,只规定了small-caps这一个有效值。CSS Font Modules Level 3[3]扩展了很多,后面高级排版技术我们再介绍。

1.4K20

css过去及未来展望—分析css演进及排版布局的考量

css历史CSS的早期历史可以读此文:http://www.w3.org/Style/LieBos2e/history/ ,以及CSS之父的博士论文:层叠样式表。css的特性早起由印刷出版业而来。...CSS2 的规范是基于 CSS1 设计的,包含了 CSS1 所有的功能,并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。...css是有一系列的标准组成。每个系列完成的时间不一样。所以css3是不断的演进的,直到现在。css模块演化图从形式上来说,CSS3 标准自身已经不存在了。每个模块都被独立的标准化。...把设置成浮动会使得对应的盒子有一定的自适应效果,多个浮动元素一一排列,如果超出了容器元素宽度,一行放不下时还会自动换行。...就不多说了参考文章:前端技术演进(四):前端三层结构与应用 https://juejin.im/post/5c137fc96fb9a049e82b677b转载本站文章《css过去及未来展望—分析css演进及排版布局的考量

32830

群分享:Markdown + CSS 实现微信公众号排版

封面来源:见图片水印 Markdown 是一种轻量级的标记语言,它的文本可以转换为 HTML ,加上 CSS 的样式控制,能够很方便快捷进行文章排版。...Markdown 解决了一文多处投放(微信公众号+博客)以及排版的问题。...我们发布在网络各处的文章,最终都会被转换为 HTML 进行展示,因此,当不需要复杂排版时,Markdown + CSS 完全可以满足我们的排版需求,比如本文。...关于中文排版 关于中文排版,我直接拷贝了李笑来教程的原话,重点只有三个: 字体大小 行间距 字间距 至于选择哪一种字体,其实并不是关键,因为对字体来说,最重要的其实是“通用” —— 即便是你设置好了你喜欢的字体...关于配色 经过乔先生漫长的吐槽以及挑刺,我最终有两个配色方案,一个是基于李笑来配色方案的修改版(本文采用的配色),一个是没采用 Markdown + CSS 排版之前一直使用的粉色系模板的配色方案。

5.2K60
领券