CSSの構造とレイアウト

0x00 min-content widthadaptive

CSS3 の新しい幅属性値 width:min-content は、コンテナの幅の値をコンテナ内の最大の分割不可能な幅 (最も幅の広い単語、画像、または固定幅ボックス) に設定できますelement)

figure{
    width:min-content;
    margin: auto;    
}

0x01 兄弟要素の数に応じてスタイルを設定します

疑似要素セレクター:only-child は、実際には first-child:last-child と同等であることがわかっています。 、最初の項目は最後の項目でもあるため、論理的にはそれが唯一のものです。 :last-child は、:nth-last-child(1) のショートカットでもあります。

それでは、質問について考えてみましょう。 li:first-chidl:nth-last-child(4) は何を表しますか? 結果は、_ちょうど 4 つのリスト項目を持つリストの最初の項目_です、わかりました、兄弟セレクターと結合されました ~リスト項目が 4 つだけ含まれている場合、その後の各項目をヒットすることで、そのような目標を達成できます

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
  
    background: red;
}

SASS と組み合わせると、簡略化して再利用できます

/*定义混合器*/
@mixin n-items($n){
    &:first-child:nth-last-child(#{$n}),
    &:first-child:nth-last-child(#{$n}) ~ &{
        @content;
    }
}

/*调用*/
li {
    @include n-items(4){
        /*属性与值写在这里*/
        background: red;
    }
}

:nth -child のパワー()

nth-child() は、an+b の形式で式を受け入れるため、当然のことながら、この形式でそのバリアント nth-child(n+4) を使用できます。これにより、以下を除くすべての子要素が選択されます。 1 番目、2 番目、および 3 番目の子要素。

ul li:first-child:nth-last-child(n+4),
ul li:first-child:nth-last-child(n+4) ~ li{
    /*当列表中至少包含四项时，命中包括该项之后的所有列表项*/
}

もちろんそれだけではありません。:nth-child() のゲームプレイは完全にあなたの想像力に依存します。

0x02 calc

場合によっては、画面を埋める背景幅と固定コンテンツ幅を持つレイアウトを実装する必要がある場合、おそらく次のように DOM 構造を設計します

<footer>
    <p>        
    </p>
</footer>

CSS スタイル:

footer{
    background: #333;
}

.wrapper{
    max-width: 900px;
    margin: 1em auto;
    height: 200px;
}

calc() メソッドは必要ありません。とても面倒なので、これを実現するには 3 行のコードだけが必要です:

footer{
  background:#333;
  padding:1em calc(50% - 50px);
 }

clac() を使用して、CSS で単純な算術演算を実行します。これにより、DOM 構造が冗長性のない非常に簡潔になります。もちろん、欠点も明らかです。ここでのコードでは、フッター要素の親が 900 ピクセルを超えた場合にのみ効果が現れます。

calc() のパーセンテージは、その親に基づいて解析されます

しかし、私たちは初めて、CSS3 の cacl() の魔法のトリックについて学びました。

0x03 垂直方向のセンタリング

絶対配置ベースのソリューション

CSS には非常に一般的な現象があり、実際のソリューションは、多くの場合、私たちがまったく予想していないところから生まれます。たとえば、positon:absolute 属性とtransform:translate() 属性を組み合わせて垂直方向の中央揃えを実現できます

このように、translate() 変換関数のパーセンテージは要素自体の幅と高さに基づいて変換されるため、固定サイズへの依存を完全に排除できます。

例: DOM 構造

    <p>
        </p><h1 id="Am-i-center">Am i center?</h1>
        <p>Center me ,please!</p>
    

CSS コード:

.main{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

ただし、この方法には欠点もあります:
1. 一部のブラウザでは、要素が 0.5 ピクセルに配置されるため、表示がぼやける可能性があります。
2. 絶対位置決めが適切でない場合。また、絶対配置はレイアウト全体に与える影響が強すぎます。

FlexBox に基づくソリューション

これが現時点で最良のソリューションであることに疑いの余地はありません。さらに、最新のブラウザーによる FlexBox のサポートはすでにかなり進んでいます。

FlexBox コンテナに基づく項目に margin:auto を使用すると、幅が指定されていない場合でも、水平方向だけでなく垂直方向にも中央揃えにすることができます。これは、この要素に割り当てられた幅が max-content と等しいためです。

FlexBox のもう 1 つの利点は、display:flex を使用して要素に align-items:center と justify-content:center を追加するだけで、テキストを垂直方向に中央揃えにすることもできることです。

.main{
    background: deeppink;
    width: 50%;
    height: 50%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

0x04 下部に張り付くフッター

場合によっては、ヘッダーとフッターの高さが内部要因によって決定されることが期待される一方、コンテンツ ブロックの高さは自動的に縮小され、利用可能なスペースがすべて占有される可能性があります。 。これも FlexBox を使用すると簡単です。

body {
    min-height: 100vh;
    display:flex;
    flex-flow: column;

    header{
        /*heaer style*/
    }
    
    .main{
        flex:1;
    }

    footer{
        /*footer style*/
    }
}

少なくともビューポート全体の高さを占めるように、body に min-height:100vh の高さを与えてから、main に 0 より大きい flex 値を与えます。

質問: フッターが画面の下部に固定されている場合は、ページが最後までスクロールされたときにフッターがコンテンツ領域を覆わないようにする方法はどうすればよいですか?

この問題については、純粋に個人的なアイデアですが、フッターの後に p#_footer を追加できます。

この時点の DOM 構造は次のとおりです:

    <header><header>
    <p></p>
    <footer></footer>
    <p></p>
</header></header>

p#_footer については、コンテンツとスタイルを追加する必要はありません。そのために必要なのは、その高さがフッターの高さと同じであることだけです。 , jQueryを使えば簡単です。

$('#_footer').height($('footer').height())

このように、少しハック的ではありますが、レスポンシブ レイアウトについて心配する必要はありません。これは完璧なソリューションです。

CSS 構造とレイアウト関連の記事の詳細については、お支払いください。 PHP 中国語 Web サイトに注意してください。