CSS 高级布局技巧

随着 IE8 逐渐退出舞台，很多高级的 CSS 特性都已被浏览器原生支持，再不学下就要过时了。

## 用 `:empty` 区分空元素

> 兼容性：不支持 IE8

[Demo](https://jsbin.com/rikecogamu/2/edit?html,css,output)

假如我们有以上列表：

```html
<div class="item">a</div>
<div class="item">b</div>
<div class="item"></div>
```

我们希望可以对空元素和非空元素区别处理，那么有两种方案。

用 `:empty` 选择空元素：

```css
.item:empty {
  display: none;
}
```

或者用 `:not(:empty)` 选择非空元素：

```css
.item:not(:empty) {
  border: 1px solid #ccc;
  /* ... */
}
```

## 用 `:*-Of-Type` 选择元素

> 兼容性：不支持 IE8

举例说明。

给第一个 p 段落加粗：

```css
p:first-of-type {
  font-weight: bold;
}
```

给最后一个 img 加边框：

```css
img:last-of-type {
  border: 10px solid #ccc;
}
```

给无相连的 blockquote 加样式：

```css
blockquote:only-of-type {
  border-left: 5px solid #ccc;
  padding-left: 2em;
}
```

让奇数列的 p 段落显示红色：

```css
p:nth-of-type(even) {
  color: red;
}
```

此外，`:nth-of-type` 还可以有其他类型的参数：

```css
/* 偶数个 */
:nth-of-type(even)

/* only 第三个 */
:nth-of-type(3)

/* 每第三个 */
:nth-of-type(3n)

/* 每第四加三个，即 3, 7, 11, ... */
:nth-of-type(4n+3)
```

## 用 `calc` 做流式布局

> 兼容性：不支持 IE8

[Demo](https://output.jsbin.com/rajazobeka/3)

左中右的流式布局：

```css
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](https://output.jsbin.com/doridehewe/1)

`vw` 和 `vh` 是相对于 viewport 而言的，所以不会随内容和布局的变化而变。

```css
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](https://jsbin.com/titugibebu/3)

```css
body {
  color: red;
}
button {
  color: white;
  border: 1px solid #ccc;
}

/* 取消 section 中 button 的 color 设置 */
section button {
  color: unset;
}
```

## 用 `column` 做响应式的列布局

> 兼容性：不支持 IE9

[Demo](https://jsbin.com/xaruzuratu/2)

```css
nav {
  column-count: 4;
  column-width: 150px;
  column-gap: 3rem;
  column-rule: 1px dashed #ccc;
  column-fill: auto;
}

h2 {
  column-span: all;
}
```

(完)



Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

CSS 高级布局技巧 #14

用 `:empty` 区分空元素

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

用 `calc` 做流式布局

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

用 `unset` 做 CSS Reset

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

用 all + unset 做 CSS Reset

让无内容的 a 标签显示其 href

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Participants

CSS 高级布局技巧 #14

Description

用 :empty 区分空元素

用 :*-Of-Type 选择元素

用 calc 做流式布局

用 vw 和 vh 做全屏滚动效果

用 unset 做 CSS Reset

用 column 做响应式的列布局

Activity

luobotang commented on Dec 13, 2016

fekata commented on Dec 14, 2016

xinghunMeng commented on Dec 14, 2016

ascoders commented on Dec 14, 2016

用 all + unset 做 CSS Reset

MichealWayne commented on Dec 15, 2016

yuanxj1024 commented on Dec 16, 2016

Demy-ouyang commented on Dec 16, 2016

sorrycc commented on Dec 16, 2016

amowu commented on Dec 16, 2016

ooodlx commented on Dec 19, 2016

jstf9673 commented on Dec 19, 2016

JohnnieFucker commented on Dec 21, 2016

zhiqiang21 commented on Dec 27, 2016

shfshanyue commented on Feb 4, 2017

让无内容的 a 标签显示其 href

lkdghzh commented on Jun 14, 2017

jin5354 commented on Jun 14, 2017

Fiv5 commented on Dec 22, 2017

pobing commented on Jan 16, 2018

yuanxj1024 commented on Jun 7, 2018

yilidan commented on Jan 16, 2019

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Participants

Issue actions

用 `:empty` 区分空元素

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

用 `calc` 做流式布局

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

用 `unset` 做 CSS Reset

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