CSSアドバンスドレイアウトテクニック

CSSアドバンスドレイアウトテクニック

一、empty空の要素のスタイル

1、:empty { }擬似クラス選択子empty

2、:not(:empty) { }擬似クラス選択子not

.
空の要素スタイル表示

二、xx_-of-type擬似クラスセレクタ

1、first-of-typeは、同じタイプの最初の兄弟要素と一致する.

2、last-of-typeは、同じタイプの最後の兄弟要素と一致する.

3、nth-of-type(n)は、同じタイプのn番目の兄弟要素に一致する.

…3, 3n, odd, 2n+1…

4、 only-of-type

1 1つのレベルでこのタイプは1つしかありません.そうしないと、スタイルは無効です.

マルチレベル有効xx_-of-type

三、calc関数値でフローレイアウトをする

width: calc(100% - 15rem);

calc関数

四、vhとvwは純粋なcssダイナミックサイズを実現する

1、vhのビューポートに対する高さ.ビューポートは、100単位のvh

に均等に分割されます.

2、vwのビューポートに対する幅.ビューポートは、100単位のvw

に均等に分割されます.
vhとvw

五、vhとvwの全画面スクロールページ応用

Webアプリケーション

六、unsetはCSSリセットをする

は前のレベルのスタイルにリセットされ、前のレベルではこのスタイルは設定されていません.Resetはデフォルトのスタイル

に設定されます.
unset

七、background-blend-mode混合モード

八、column列を応答レイアウトとする

nav {
  /* column-count: 4;
  column-width: 150px; */

  columns: 4 150px;

  column-gap: 2rem;
  column-rule: 1px dashed #ccc;
  column-fill: auto;
}

column列応答レイアウト

九、その他の偏門は実用的である

1、  input        
outline: none;

2、       
contenteditable

3、        
user-select: none

4、Box-sizing     、    border、padding
box-sizing: border-size

5、calc   
width: calc(100% - 100px)

元のチュートリアルのアドレス