8个值得了解的纯CSS布局排版技巧

本篇文章将分享一些大家未必知道且超级实用的CSS布局排版技巧,实现一些常见或特殊的布局排版

8个值得了解的纯CSS布局排版技巧

开发每一张网页都离不开布局排版,基于良好布局排版打下基础,才能使后续的开发更顺利。当然不能停留在IExplorer时代那种局限思维上,没办法解决的布局排版都用JS实现。今时不同往日,现代CSS属性能更好地快速实现各种布局排版,节约更多时间去摸鱼。

不过按照笔者目前了解的情况来看,大部分同学即使在无需兼容IExplorer的情况下还是遵循CSS+JS的方式完成一些常见或特殊的布局排版。从HTML/CSS/JS前端三剑客的定位来看,HTML映射网页的结构CSS映射网页的表现JS映射网页的行为

布局排版指将图形、文本、图像、媒体等可视化信息元素在页面布局上调整位置尺寸等属性使页面布局变得条理化的过程。大部分同学认为布局排版就是几个合理的CSS属性随便拼凑在一起,但多数情况即使实现也会存在瑕疵,此时就可能使用JS介入。

布局排版的特征可知它属于表现范畴,因此笔者认为大部分布局排版都能使用CSS完成,无需JS介入。

本文秉承能使用CSS实现的效果都优先使用CSS的原则,为大家讲解笔者如何巧妙运用各种纯CSS开发技巧完成一些常见或特殊的布局排版

属性

在进入主题前,笔者总结出布局排版一些必备属性,这些属性能快速搭建整体效果,再通过一些常用选择器加以修饰达到完美效果。看似简单,但使用起来不一定完全驾驭。

必备属性都是一些几何属性,主要用于声明位置尺寸

  • 浮动布局float
  • 定位布局position/left/right/top/bottom/z-index
  • 弹性布局display:flex/inline-flexflex系列属性
  • 盒子模型box-sizing/margin/padding/border/width/height

选择器因CSS模块众多而派生出的数量也众多,若无特别方式记熟这些选择器对应的功能,也很难将其发挥到最大作用。

笔者根据选择器的功能划分出八大类,每个类别的选择器都能在一个应用场景里互相组合,记熟这些类别的选择器,相信就能将选择器发挥到最大作用,也能游刃有余将其应用到一些常见或特殊的布局排版里。

布局排版可能只应用到某些选择器,但也不妨碍大家通过以下归类方式记忆。选择器作为CSS的重要组成部分,比起属性组合会有更多的玩法。

基础选择器

选择器别名说明版本常用
tag标签选择器指定类型的标签1
#idID选择器指定身份的标签1
.class类选择器指定类名的标签1
*通配选择器所有类型的标签2

层次选择器

选择器别名说明版本常用
elemP elemC后代选择器元素的后代元素1
elemP>elemC子代选择器元素的子代元素2
elem1+elem2相邻同胞选择器元素相邻的同胞元素2
elem1~elem2通用同胞选择器元素后面的同胞元素3

集合选择器

选择器别名说明版本常用
elem1,elem2并集选择器多个指定的元素1
elem.class交集选择器指定类名的元素1

条件选择器

选择器说明版本常用
:lang指定标记语言的元素2×
:dir()指定编写方向的元素4×
:has包含指定元素的元素4×
:is指定条件的元素4×
:not非指定条件的元素4
:where指定条件的元素4×
:scope指定元素作为参考点4×
:any-link所有包含href链接元素4×
:local-link所有包含href且属于绝对地址的链接元素4×

状态选择器

选择器说明版本常用
:active鼠标激活的元素1×
:hover鼠标悬浮的元素1
:link未访问的链接元素1×
:visited已访问的链接元素1×
:target当前锚点的元素3×
:focus输入聚焦的表单元素2
:required输入必填的表单元素3
:valid输入合法的表单元素3
:invalid输入非法的表单元素3
:in-range输入范围以内的表单元素3×
:out-of-range输入范围以外的表单元素3×
:checked选项选中的表单元素3
:optional选项可选的表单元素3×
:enabled事件启用的表单元素3×
:disabled事件禁用的表单元素3
:read-only只读的表单元素3×
:read-write可读可写的表单元素3×
:target-within内部锚点元素处于激活状态的元素4×
:focus-within内部表单元素处于聚焦状态的元素4
:focus-visible输入聚焦的表单元素4×
:blank输入为空的表单元素4×
:user-invalid输入合法的表单元素4×
:indeterminate选项未定的表单元素4×
:placeholder-shown占位显示的表单元素4
:current()浏览中的元素4×
:past()已浏览的元素4×
:future()未浏览的元素4×
:playing开始播放的媒体元素4×
:paused暂停播放的媒体元素4×

结构选择器

选择器说明版本常用
:root文档的根元素3×
:empty无子元素的元素3
:nth-child(n)元素中指定顺序索引的元素3
:nth-last-child(n)元素中指定逆序索引的元素3×
:first-child元素中为首的元素2
:last-child元素中为尾的元素3
:only-child父元素仅有该元素的元素3
:nth-of-type(n)标签中指定顺序索引的标签3
:nth-last-of-type(n)标签中指定逆序索引的标签3×
:first-of-type标签中为首的标签3
:last-of-type标签中为尾标签3
:only-of-type父元素仅有该标签的标签3

属性选择器

选择器说明版本常用
[attr]指定属性的元素2
[attr=val]属性等于指定值的元素2
[attr*=val]属性包含指定值的元素3
[attr^=val]属性以指定值开头的元素3
[attr$=val]属性以指定值结尾的元素3
[attr~=val]属性包含指定值(完整单词)的元素(不推荐使用)2×
[attr|=val]属性以指定值(完整单词)开头的元素(不推荐使用)2×

伪元素

选择器说明版本常用
::before在元素前插入的内容2
::after在元素后插入的内容2
::first-letter元素的首字母1×
::first-line元素的首行1×
::selection鼠标选中的元素3×
::backdrop全屏模式的元素4×
::placeholder表单元素的占位4

技巧

有了上述前置知识,接下来跟着笔者体验一次如何巧妙运用各种纯CSS开发技巧完成一些常见或特殊的布局排版吧。为了方便浏览器自动计算某些样式,需全局设置box-sizing:border-box,编码前请引入笔者整理的reset.css

主体布局

主体布局指在大部分情况下通用且具备统一特征的占位布局。掌握主体布局是一个前端必不可少的技能,养成看设计图就能大概规划出整体布局的前提是必须熟悉这些主体布局的特点与构造。

全屏布局

经典的全屏布局顶部底部主体三部分组成,其特点为三部分左右满屏拉伸顶部底部高度固定主体高度自适应。该布局很常见,也是大部分Web应用主体的主流布局。通常使用

三个标签语义化排版,
内还可插入