用?: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; }

　　作者：sorrycc?? ?原文地址：https://github.com/sorrycc/blog/issues/14

轉載于:https://www.cnblogs.com/ZachChan/p/6182833.html

總結

以上是生活随笔為你收集整理的CSS 高级布局技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。