IT干货|CSS 高级布局技巧

2018-01-30

JiangRen Mr

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

用 :empty 区分空元素

兼容性:不支持 IE8

Demo

假如我们有以上列表:

<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;
}
近期开课hot
logo

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-stripe.png/image/layout/pay-alipay.png

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 8, 11 York st, Wynyard, Sydney CBD
Business Hub, 155 Waymouth St, Adelaide SA 5000

Disclaimer

footer-disclaimerfooter-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.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。 JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2024 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572