IT干货|CSS 高级布局技巧

2018-01-30

JiangRen Mr

随着 IE8 逐渐退出舞台，很多高级的 CSS 特性都已被浏览器原生支持，再不学下就要过时了。

用 `:empty` 区分空元素

兼容性：不支持 IE8

假如我们有以上列表：

<div class="item">a</div>
<div class="item">b</div>
<div class="item"></div>

我们希望可以对空元素和非空元素区别处理，那么有两种方案。

用 :empty 选择空元素：

.item:empty {
  display: none;
}

或者用 :not(:empty) 选择非空元素：

.item:not(:empty) {
  border: 1px solid #ccc;
  /* ... */
}

用 `:*-Of-Type` 选择元素

兼容性：不支持 IE8

举例说明。

给第一个 p 段落加粗：

p:first-of-type {
  font-weight: bold;
}

给最后一个 img 加边框：

img:last-of-type {
  border: 10px solid #ccc;
}

给无相连的 blockquote 加样式：

blockquote:only-of-type {
  border-left: 5px solid #ccc;
  padding-left: 2em;
}

让奇数列的 p 段落显示红色：

p:nth-of-type(even) {
  color: red;
}

此外，:nth-of-type 还可以有其他类型的参数：

/* 偶数个 */
:nth-of-type(even)

/* only 第三个 */
:nth-of-type(3)

/* 每第三个 */
:nth-of-type(3n)

/* 每第四加三个，即 3, 7, 11, ... */
:nth-of-type(4n+3)

用 `calc` 做流式布局

兼容性：不支持 IE8

Demo

左中右的流式布局：

nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 5rem;
  height: 100%;
}

aside {
  position: fixed;
  right: 0;
  top: 0;
  width: 20rem;
  height: 100%;
}

main {
  margin-left: 5rem;
  width: calc(100% - 25rem);
}

用 `vw` 和 `vh` 做全屏滚动效果

兼容性：不支持 IE8

Demo

vw 和 vh 是相对于 viewport 而言的，所以不会随内容和布局的变化而变。

section {
  width: 100vw;
  height: 100vh;
  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

section:nth-of-type(1) {
  background-image: url('https://unsplash.it/1024/683?image=1068');
}
section:nth-of-type(2) {
  background-image: url('https://unsplash.it/1024/683?image=1073');
}
section:nth-of-type(3) {
  background-image: url('https://unsplash.it/1024/683?image=1047');
}
section:nth-of-type(4) {
  background-image: url('https://unsplash.it/1024/683?image=1032');
}

body {
  margin: 0;
}
p {
  color: #fff;
  font-size: 100px;
  font-family: monospace;
}

用 `unset` 做 CSS Reset

兼容性：不支持 IE

Demo

body {
  color: red;
}
button {
  color: white;
  border: 1px solid #ccc;
}

/* 取消 section 中 button 的 color 设置 */
section button {
  color: unset;
}

用 `column` 做响应式的列布局

兼容性：不支持 IE9

Demo

nav {
  column-count: 4;
  column-width: 150px;
  column-gap: 3rem;
  column-rule: 1px dashed #ccc;
  column-fill: auto;
}

h2 {
  column-span: all;
}

近期开课

Cisco Certified Network Associate 训练营

2025/10/11 06:13 (Sydney)

Python零基础入门

2025/02/12 03:14 (Sydney)

Web全栈班24期 NodeJS方向

2024/12/08 11:30 (Sydney)

We Accept

Top Categories

Web全栈班 DevOps项目班数据工程全栈班数据分析项目班编程入门班 Business Analyst实习算法集训营

求职就业

BA和产品经理实习数据科学实习数据分析实习 Marketing实习简历修改面试指导导师指导VIP

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)

Level 2, 171 La Trobe St, Melbourne VIC 3000

四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号

Business Hub, 155 Waymouth St, Adelaide SA 5000

联系方式

hello@jiangren.com.au 0421-672-555

Disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

ABN 26621887572

IT干货|CSS 高级布局技巧

用 :empty 区分空元素

用 :*-Of-Type 选择元素

用 calc 做流式布局

用 vw 和 vh 做全屏滚动效果

用 unset 做 CSS Reset

用 column 做响应式的列布局

用 `:empty` 区分空元素

用 `:*-Of-Type` 选择元素

用 `calc` 做流式布局

用 `vw` 和 `vh` 做全屏滚动效果

用 `unset` 做 CSS Reset

用 `column` 做响应式的列布局