Web布局系列

图解CSS: Grid布局(Part5)

前面花了两个章节(Grid布局 Part3Part4)介绍了在grid-template-columnsgrid-template-rows 中使用固定长度值,动态值和一些关键词来设置网格轨道的大小。除了这些之外,还可以使用一些函数,比如minmax(min, max)repeat() 等来设置网格轨道大小。在这一章节点,主要围绕着在 grid-template-columnsgrid-template-rows 属性中如何使用函数(minmax(min, max)repeat())设置网格轨道尺寸,感兴趣的话,请继续往下阅读。

图解CSS: Grid布局(Part4)

“图解CSS:Grid布局” 系列第三部分 主要探讨了,在 grid-template-columnsgrid-template-rows 中使用长度值来设置网格轨道尺寸大小。这里长度值指的是使用不同单位(比如,px%emremvw等)值,并且花了较长的篇幅和大家探讨了 fr (弹性系数,又称<flex>系数)给网格轨道尺寸带来的变化以及 fr 在网格轨道中是怎么计算的。不过,在网格布局中,除了使用上一章节中用的带有不同单位的长度值之外,还可以使用一些关键词,比如接下来要介绍的 noneauto(我们熟悉的),min-contentmax-contentfit-content 等关键词以及fit-content()函数。阅读完这篇文章之后,你就能了解这些关键词是如何帮助我们来设置网格轨道尺寸。感兴趣的同学请继续往下阅读。

图解CSS: Grid布局(Part3)

在第二部分中主要介绍了如何使用display来创建网格容器和网格项目,以及怎么使用 grid-template-columnsgrid-template-rowsgrid-template-areas 定义显式网格。在这部分(Part3)将和大家探讨如何设置网格轨道尺寸?简单地说,在grid-template-columnsgrid-template-rows 中可以显式设置网格轨道大小(列宽和行高),而且设置大小的方式有很多种方式,比如使用不同的长度单位,使用关键词,使用CSS函数等来设置网格轨道大小。如果你感兴趣的话请继续往下阅读。

图解CSS: Grid布局(Part2)

在上一节中,主要介绍了 CSS 网格布局中的一些重要概念和相关术语。从这些概念和术语中,从侧面也再次说明CSS 网格布局到目前为止是最为复杂的一个布局系统,换句话说,CSS 网格布局系统中会有很多属性,这些属性和 Flexbox 布局有些类似,有些属性只能作用于网格容器,有些属性只能作用于网格项目。而在这篇文章中,先从可用于网格容器的属性,即使用display属性创建网格容器和网格项目, grid-template-areasgrid-template-columnsgrid-template-rows 以及这三个属性的简写属性grid-template 来定义显式网格。如果感兴趣的请继续往下阅读。

图解CSS: Grid布局(Part1)

Grid 布局指的是 CSS Grid Layout,它和以往 CSS 框架(CSS Framework)中所说的网格系统(Grid System)有所不同。它是一个基于网格的二维布局系统,在 CSS 中有三个版本的规范(Level 1Level 2Level 3,其中 Level 1 和 Level 2 已进入 W3C 规范 TR 阶段,Level 3 目前还在 ED 阶段)从不同的角度定义 CSS 网格布局模块,这几个模块是专门为解决布局问题而创建的。另外,到目前为止,在 CSS 的系统中,只有 CSS Grid 布局才是二维布局。同时它也是一个复杂的布局系统,所涉及到布局知识要比以往了解的布局模块(比如我们熟悉的 Flexbox 布局)要复杂得多。为此,在图解 CSS 系列中,将分几篇文章来和大家一起探讨 CSS Grid 布局模块。

构建杂志布局可能会用到的CSS特性

Web布局可以说是灵活的也是久被受限的。在众多的开发者眼里,Web的布局就应该是方方正正的,因为Web中的每个元素都类似一个盒子,这些盒子就是方方正正,规规矩矩地。同时在很多视觉的眼里也认为,Web的布局无法打破矩形排列的限制。比如说,要在Web中实现一个类似杂志的排版是非常困难的,甚至是不太可能的。值得庆幸的是,时至今日,Web的技术在不断的革新,很多新的特性可以让我们打破这样的限制,让你在Web上实现像杂志一样的排版布局。接下来,我们就来看看,在Web中实现媒体布局会有哪些亮点,有可能会用到哪些特性。

Web布局:浮动

把浮动放到今天来聊,可能很多小伙伴会觉得没有任何意义。会说“CSS都发展到这种程度了,Web的布局还会有谁用浮动呢”?那么真的是如此吗?浮动真的要退出CSS的舞台成为历史吗?我的答案是不可能的。不管CSS怎么发展,浮动都还有其存在的意义和作用,而且在一些场景中是离开不浮动的,最起码近几年之内是不可能的。至于为什么,请继续往下阅读。

Web布局:display属性

经过CSS盒模型视觉格式化模型两个章节中的学习,我们有了一个清晰的概念。即在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子);都有自己的视觉格式化(不同的盒子)。而其中CSS的display属性又可以显式的修改每个盒子的视觉格式化模型,比如说从行内级盒子变成块级盒子。那在这一章节中,我们就来一起探讨CSS的display属性,该属性也是学习CSS不可或缺的属性之一。

Web布局:Web布局发展历程

Web自1989到今年刚好走过30年历程。30年来Web也发生了翻天覆地的变化,从事Web开发工作也衍生出多种工作岗位,而我们做为Web前端开发者的其中一员,更应该感谢Web给我们带来的机遇和未来。自从今天开始,我们来一起探讨Web开发中其中一小部分相关的技能(或者说知识),即Web布局。希望接下来的这个专栏对大家在今后的工作和学习上都会有所帮助。

图解CSS: CSS 盒模型

在学习Web布局之前有一个非常重要的概念需要理解,这个概念就是盒模型。CSS盒模型是多个不同的CSS规则集合,定义了如何渲染Web页面。这一系列的不同的属性决定了HTML元素在页面上的位置。到目前为止,所有Web页面都只是一个接一个渲染的元素。可以说盒模型是我们定制默认布局方案的工具包。作为Web开发人员,大部分工作是将应用CSS盒模型中的规则将设计模型转换为Web页面(简单点说,就是UI还原)。接下来要介绍的CSS盒模型又被视为UI还原的重中之重,因为它定义了盒子的单独行为。特别是在以后的章节中,我们学习的各种布局都将会围绕着HTML的结构和CSS的盒模型一起来展开。

页面

返回顶部