レイアウト、愛憎の浮き彫り

7176 ワード
CSS テキストリンク
本文は「堅牢なUIデザインの寸法ガイドby鄭燦明|クイックキャンパス」課の総括である.

図のプロパティの目的を理解する

  • 印刷要素の幅が縮小し、従来の流れから離れている.
  • 隣接する後行ブロック要素は、出図要素と重なり、行内要素は出図要素の周囲を流れる.
  • clear、flow-rootプロパティを使用して解除できます.
  • 列を構成するプロパティではありません.😱

    • float > float


    floatをfloatに無効にする古い方法(マッピング)
    <p class="container">
	<span class="float>...</span>
</p>

.container { float: left; }

    blank element


    空の要素を追加する必要があります(マッピング)
    <p class="container">
	<span class="float>...</span>
    ...
    <span class="clear"></span>
</p>

.clear { display: block; clear: both; }

    overflow: hidden

    <p class="container">
	<span class="float>...</span>
    ...
</p>

.container { oveflow: hidden; }

    overflow: inline-block


    inline-blockに変更すると、サブエレメントの高さが増加します.
    <p class="container">
	<span class="float>...</span>
    ...
</p>

.container { display: inline-block; }

    ::after {clear: both} ⭐


    現在最も一般的なコード
    <p class="container">
	<span class="float>...</span>
    ...
    ::after
</p>

.container::after {
	content: '';
    display: block;
    clear: both;
}

    display: flow-root ⭐


    推薦したいコード(ieがサポートしていないだけ)
    <p class="container">
	<span class="float>...</span>
    ...
</p>

.container { display: flow-root; } //⚠IE

    FLOAT & DISPLAY


    float要素は通常ブロックである.
  • displayプロパティがなくてもwidth/height、垂直エッジ/paddingプロパティを使用できます.
    • したがって、一般的にはdisplayプロパティを指定する必要はありません.
  • display:width、height、margin、marging-top、marging-bottom、floatとともにインラインが使用される場合、警告
  • display:inline block floatとの併用時に警告
  • display:blockを垂直位置合わせとともに使用すると警告
    • が発行されます.
  • display:table-*margin(およびその変形)またはfloatとともに使用する場合に警告
    • が発行されます.

    COLUMN LAYOUT


    columns: <'column-width'> || <'column-count'>

    .container {
	max-width: 640px;
    columns: 310px 2; /* <'column-width'> || <'column-count'> */
    column-gap: 20px;
    column-rule: 20px solid #0002;
    background: #eee;
}
    break-inside: avoid
    1つのアトリビュートで、中央が切り捨てられないようにします(自然に配置されます).

    Summary

  • 図面は使用可能で、解除する必要があります.
  • 列の配置はdisplay:flex|grid属性によって制御される.
    • Memcached高可用性スキームRepcached
    JavaScript基本(Arrow Function)