布局

图解CSS: Grid布局(Part6)

CSS 网格布局中有 显式网格隐式网格 之分,在 CSS 网格布局中可以使用 grid-template-columnsgrid-template-rowsgrid-template-areas 可以定义显式网格,并且可以定义显式网格固定的网格轨道数量,同时 grid-template-columnsgrid-template-rows 可以用来显式指定网格轨道尺寸。而在 CSS 网格布局中,可以在网格容器上使用 grid-auto-columnsgrid-auto-rowsgrid-auto-flow 可以显式定义隐式网格,并且 grid-auto-columnsgrid-auto-rows 可以用来指定隐式网格轨道的尺寸。那么在这篇文章中,主要和大家一起探讨在 CSS 网格布局中如何定义隐式网格和指定隐式网格轨道尺寸。

图解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 布局模块。

Flexbox布局中不为人知的细节

Flexbox布局 已是目前最为流行的Web布局方式之一,它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。但也是因为它有极大的灵活性,里面隐藏了一些不为人知的细节,如果不是对Flexbox极为熟悉或者对其规范极为了解的话,其中有很多细节将会被遗漏,而这些细节又会让你在使用的感到困惑,甚至是带来一定的麻烦。这次在优化imgcook的Flexbox布局时,重新阅读了一次Flexbox的规范,发现自己曾忽略了部分重要信息。为此在这篇文章中,将Flexbox布局CSS的书写模式逻辑属性,对齐方式结合在一起整理了一篇笔记,希望对于想了解或使用Flexbox碰到痛楚的同学有所帮助。

折叠屏相关的Web API

告诉大家一个好消息,The Screen Fold API 已经进入 W3C规范的ED阶段 了。这个规范主要可以帮助我们以后为使用折叠屏设备用户提供一个更好的用户体验,即 为折叠屏设备在不同的折叠状态(“姿势”)提供相应的布局。这个规范主要由 三星(Samsung)@Diego González英特尔(Intel Corporation)@Kenneth Rohde Christiansen 一起起草的,虽然目前只是处于规范的 ED 阶段,但这为我们今后在折叠屏设备上实现Web布局有了一定的理论依据。也许在未来,这里面的一些属性或API还会有所变动,但这并不影响我们去探究或参与讨论。或许说不定明年,或者后年你就在实际业务中需要面对折叠屏幕的适配需求。如果你感兴趣的话请继续往下阅读。

你可能不太熟知的布局技巧

随着Web技术不断的革新,CSS近几年也变得多年前要更强大。在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的CSS属性。而且时至今日,其中有一些CSS的属性可以让开发者能节约更多的时间。比如说,在Web布局中,现代CSS特性就可以更好的帮助我们快速实现,例如等高布局水平垂直居中,经典的圣杯布局、宽高比例页脚保持在底部等。在本文中,我将会介绍一些不同的CSS属性来实现这些效果,希望大家会感兴趣。更希望对大家今后的工作有所帮助。

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

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

页面

返回顶部