CSSを使った高度なレイアウトテクニック

IE8 が段階的に

撤退する中、多くの高度な CSS 機能がブラウザーでネイティブにサポートされており、学習しないと時代遅れになってしまいます。

空の要素を区別するには

:empty

を使用します

兼容性：不支持 IE8

デモ

上記のリストがあるとします。

a

b

空の要素と空ではない要素を別々に扱いたいので、2 つのオプションがあります。
空の要素を選択するには

:empty

を使用します:

.item:empty {

display: none;}
または、

:not(:empty)

を使用して空でない要素を選択します:

.item:not(:empty) {
b
ord er: 1px Solid #ccc; /* ... */
}

要素

:*-Of-Type

を選択するには、

兼容性：不支持 IE8

を使用します。

最初の p 段落を太字にします:
p
:first-of-type {
font-weight:bold;}
最後の画像に境界線を追加します:
img
:last-of-type { border: 10px Solid #ccc;
}
Style unconnected blockquote:

blockquote:only-of-type {
border-
left: 5px Solid #ccc;
padding-left: 2em ;}
奇数列の p 段落を最初に赤色にします:

p:nth-of-type(even) {
color: red;
}
さらに、

:nth-of-type

は他のタイプのパラメータを持つこともできます:

/* Even number*/
:nth-of-type(even)

/* 3 番目のみ*/
:nth-of-type(3)

/* 3 番目ごと*/
:nth-of-type( 3n)

/* 4 つおきに 3 を加算します。つまり、3、7、11、... */
:nth-of-type(4n+3)

フロー レイアウトには

calc

を使用します

兼容性：不支持 IE8

Demo

Flow左、中、右のレイアウト:

nav {

position: 固定; left: 0;

top: 0;
width: 5rem;
height : 100% ;}
aside {
位置: 固定;

右: 0; 上: 0;
幅: 20rem;
高さ: 100%;
}


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

全画面スクロール効果には

vw

と

vh

を使用します

兼容性：不支持 IE8

Demo

vw

と

vh

は

viewport に相対的なものであるため、コンテンツとレイアウトに応じて変更されません変化。
セクション {
幅: 100vw;
高さ: 100vh;

表示: flex;
align-items: center;
just
ify-content: center;
text-align: center;

背景サイズ: カバー;
背景繰り返し: 繰り返しなし;
背景添付: 固定;}

セクション:nth-of-type(1) {

背景画像: 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;
}
(完)

以上がCSSを使った高度なレイアウトテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。