「本文已参与好文召集令活动，点击查看：[后端、大前端双赛道投稿，2万元奖池等你挑战！](https://juejin.cn/post/6978685539985653767)」 > 作者：[JowayYoung](tel:18819249731)
> 仓库：[Github](https://github.com/JowayYoung)、[CodePen](https://codepen.io/JowayYoung)
> 博客：[官网](https://yangzw.vip)、[掘金](https://juejin.im/user/584ec3a661ff4b006cd6383e/posts)、[思否](https://segmentfault.com/blog/jowayyoung)、[知乎](https://zhuanlan.zhihu.com/c_1169597485852360704)
> 公众号：[IQ前端](https://yangzw.vip/static/frontend/account/IQ前端公众号.jpg)
> 特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权 ### 前言最近有些读者悄悄发现了笔者的[个人官网](https://yangzw.vip)，无一例外都使用`惊喜`、`惊叹`等词形容。没错，笔者使用大量CSS阐述了什么叫做[玩转CSS的艺术之美](https://juejin.cn/book/6850413616484040711)。即使某些应用场景缺少JS的加持，笔者也能将CSS玩得游刃有余，整个网站源码里CSS大概占据`60%`的分量，很多效果不是为了炫技而是想告诉大家CSS的重要性与实用性。因此笔者想通过本文分享一些大家未必知道且超级实用的**纯CSS布局排版技巧**实现一些`常见或特殊的布局排版`。 ![个人官网](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9bd1820474c4d6a9e9b1f7c16746b9c~tplv-k3u1fbpfcp-watermark.image) 开发每一张网页都离不开`布局排版`，基于良好`布局排版`打下基础，才能使后续的开发更顺利。当然不能停留在`IExplorer`时代那种局限思维上，没办法解决的`布局排版`都用JS实现😂。今时不同往日，现代CSS属性能更好地快速实现各种`布局排版`，节约更多时间去摸鱼😉。不过按照笔者目前了解的情况来看，大部分同学即使在无需兼容`IExplorer`的情况下还是遵循`CSS+JS`的方式完成一些`常见或特殊的布局排版`。从`HTML/CSS/JS`前端三剑客的定位来看，`HTML`映射网页的**结构**，`CSS`映射网页的**表现**，`JS`映射网页的**行为**。 **布局排版**指将图形、文本、图像、媒体等可视化信息元素在页面布局上调整`位置`、`尺寸`等属性使页面布局变得条理化的过程。大部分同学认为`布局排版`就是几个合理的CSS属性随便拼凑在一起，但多数情况即使实现也会存在瑕疵，此时就可能使用JS介入。从`布局排版`的特征可知它属于`表现`范畴，因此笔者认为大部分`布局排版`都能使用`纯CSS`完成，无需JS介入。本文秉承**能使用CSS实现的效果都优先使用CSS**的原则，为大家讲解笔者如何巧妙运用各种纯CSS开发技巧完成一些`常见或特殊的布局排版`。因此笔者建议大家认真看一遍以下内容，绝对让你有所收货和惊喜。若对CSS无特别想法，建议体验以下网站，相信你会认真踏实地阅读本文。 - [个人官网](https://yangzw.vip)：暂时支持`PC端`浏览，拒绝支持`IExplorer` - [特效专辑](https://yangzw.vip)：暂时支持`PC端`浏览，拒绝支持`IExplorer` ### 属性在进入主题前，笔者总结出`布局排版`一些必备属性，这些属性能快速搭建整体效果，再通过一些常用选择器加以修饰达到完美效果。看似简单，但使用起来不一定完全驾驭。必备属性都是一些几何属性，主要用于声明`位置`和`尺寸`。 - [x] **浮动布局**：`float` - [x] **定位布局**：`position/left/right/top/bottom/z-index` - [x] **弹性布局**：`display:flex/inline-flex`、`flex系列属性` - [x] **盒子模型**：`box-sizing/margin/padding/border/width/height` 选择器因`CSS模块`众多而派生出的数量也众多，若无特别方式记熟这些选择器对应的功能，也很难将其发挥到最大作用。笔者根据选择器的功能划分出八大类，每个类别的选择器都能在一个应用场景里互相组合，记熟这些类别的选择器，相信就能将选择器发挥到最大作用，也能游刃有余将其应用到一些`常见或特殊的布局排版`里。 `布局排版`可能只应用到某些选择器，但也不妨碍大家通过以下归类方式记忆。选择器作为CSS的重要组成部分，比起属性组合会有更多的玩法。 > 基础选择器选择器|别名|说明|版本|常用 :-:|:-:|-|:-:|:-: `tag`|标签选择器|指定类型的`标签`|1|√ `#id`|ID选择器|指定身份的`标签`|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](https://github.com/JowayYoung/idea-css/blob/master/icss/src/assets/css/reset.css)。 #### 主体布局 **主体布局**指在大部分情况下通用且具备统一特征的占位布局。掌握`主体布局`是一个前端必不可少的技能，养成看设计图就能大概规划出整体布局的前提是必须熟悉这些`主体布局`的特点与构造。 ###### 全屏布局经典的**全屏布局**由`顶部`、`底部`和`主体`三部分组成，其特点为`三部分左右满屏拉伸`、`顶部底部高度固定`和`主体高度自适应`。该布局很常见，也是大部分Web应用主体的主流布局。通常使用`

`、`