5.中級CSSとインタラクティブ機能

26150 ワード
@media Flexbox inheritance テキストリンク

1. CSS inheritance


継承は、親要素のproperty値がサブ要素によって継承されることを意味します.
複雑な継承関係はコードを汚すので避けるべきです.
  • 継承可能:text-align、line-height、color、font、可視性、不透明
  • 継承不可:width、height、marging、padding、border、display、ボックスサイズ、背景、垂直位置合わせ、position(top、right、bottom left)、z-index、overflow、float
  • Propertyの式の継承について
    • 継承しないproperty値を継承したくない場合は、サブ要素でそのpropertyを継承に設定できます.

    CSS優先度と積層


    !important > Inline Style > id > class > tag
    !コードの複雑さを増すため、重要なラベル内でstyleを記述することは避けます.

    CSS可視性計算規則

  • カンマで区切られた4ビット表示
  • 0, 0, 0, 0
  • Specificity Calculator

    • 2. CSS media

  • viewportは画面上の表示領域を表し、スマートフォンでは多くの仮想viewportが980 px
    • に設定されている.
  • 通常、device-widthは解像度の幅/画素密度を表示するために計算されます.ブラウザがmeta viewportタグに識別して適用したと考えられます.
    • <meta name="viewport" content="width=320">
<meta name="viewport" content="width=device-width">

    メディアクエリ

  • media == device
  • mediaquery==異なるメディアタイプ(異なるスタイル)に応答するための機能
    • @media media-type and (media-feature-rule) {
	// CSS rules go here
}

  • Media-type:all、printなど

  • Media-feature-rule:min-width/max-width、orientation(景観、肖像)など

  • 論理演算子
  • and
  • not
  • only:古いブラウザでの処理が不適切にならないように、複数のメディアクエリが真である場合にのみスタイルを適用します.たとえばonlyを使用せずにscreen and(max-width:300 px)と一緒に使用すると、古いブラウザではscreenのみが読み込まれ、後の部分は無視されてスタイルが適用されます.
  • , == or

    • 3. CSS flexbox

  • displayをflex親として宣言
  • 親要素:flex container
  • サブエレメント:flex item
    • flex containerとflex itemは、それぞれ異なるpropertyを設定できます.
    flex itemは、その要素を囲む親要素であり、flexコンテナが必要です.
    <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      .container {
        border: 1px solid red;
      }
      .item {
        border: 1px solid blue;
        width: 100px;
        height: 100px;
        border-radius: 10px;
        float: left;
      }
			.clearfix::after {
	      content: "";
        clear: both;
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container clearfix">
			<div class="item"></div><div class="item"></div><div class="item"></div>
    </div>
  </body>
</html>

    3.1. flexコンテナの主な構成


    Propertyの意味displayFlexコンテナ定義のflex-directionflex itemの主軸(主軸)方向flex-wrapflex itemの設定flex-flowflex-directionとflex-wrap 1行または複数行を一度に設定するショートカットProperties previties-content主軸ソート方法align-content交差軸に基づくソート方法設定(2行以上)align-tems交差軸に基づく位置合わせの設定(各行適用)

    番組を表示

  • flex:blockプロパティのflexコンテナ定義(垂直位置合わせ)
  • inline-flex:inlineプロパティのflexコンテナ定義(水平位置合わせ)
    • 親要素のdisplayを上記のように設定すると、サブ要素は自動的にflex itemになります.

    flex direction property

  • row:左水平整列
  • row-reverse:右水平整列
  • column:上から下へ垂直に配列
  • column-reverse:下から上へ垂直に整列
    • divボックスでテキストを中央揃え
    水平:text-align:center;
    垂直:line-height:heightで設定した高さ値と同じです.
    <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
  <style>
    .container {
      border: 2px solid #F2E3D5;
      background-color: #F20505;
      width: 200px;
      display: inline-flex;
      flex-direction: row-reverse;
    }
    .item {
      border: 2px solid #F2E3D5;
      margin: 5px;
      text-align: center;
      line-height: 50px;
      background-color: #03658C;      
      width: 50px;
      height: 50px;
      border-radius: 10px;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
  </div>
</body>
</html>

    flex-wrap property


    flex itemを1行または複数行に設定する
  • nowrap:flex itemを1行(デバッガ)
  • wrap:flex itemの幅の和がflex containerの幅より大きい場合は、複数行
    • に表示されます.
  • wrap-reverse:wrapと比較して順次逆表示

    • flex-flow property


    flex-directionとflex-wrapプロファイルを一度に使用するショートカットプロファイル
    flex-flow: flex-direction flex-wrap

    justify-content


    スケルトンベースの水平位置合わせの設定
  • flex-start(デフォルト)
  • flex-end
  • center
  • space-twon:flex itemを左右端に配置すると、内部flex itemが均一間隔で整列
  • space-around:内部flex item均一間隔整列

    • align-itemsとalignコンテンツ

  • align-items:交差軸に基づくソート方法を設定(各行適用)
  • stretch(デフォルト)
  • flex-start:各行の項目を各行の始点でソート
  • flex-end:各行の端点からソート
  • center:各行の交差軸の中心に整列
  • basline:行ごとのテキストベースラインに整列
  • align-content:交差軸に基づくソート方法を設定する(複数行を1つのグループとして適用する)
  • stretch(デフォルト)
  • flex-start:複数行の項目をflex-start各行の始点からソート
  • flex-end:最後の行の末尾からアイテムをソート
  • center:容器全体の中心に整列
  • space-twe間:最初の行と最後の行はそれぞれ最初の行の始点と最後の行の終点に位置し、残りの行はcontainerで均一な間隔で整列
  • space-around:各行を均一な間隔で並べ替える
    • Flexboxで中央揃え
    水平:正当性-内容:中心;
    垂直:align-content:center;

    3.2. flexbox項目の主な製品


    Propertyの意味orderflex itemの配置順序を設定flex-growflex item幅増加率を設定flex-shriflex item幅縮小率を設定flex-basflex itemデフォルト幅設定(空間割り当て前)、デフォルト設定はautofflex-grow、flex-srip、flex-basic一度に設定したショートカット構成です.互換性の問題として使用されるflex containerの「整列-items/align-content」よりも優先するように、単一flex itemの垂直整列方法を設定します.
    Outpan Flexbox Playground 
    <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
  <style>
    .container {
      margin: 0 auto;
      border: 2px solid #F2E3D5;
      background-color: #F20505;
      display: flex;
    }
    .item {
      margin: 10 0px;
      border: 2px solid #F2E3D5;
      box-sizing: border-box;
      text-align: center;
      line-height: 50px;
      background-color: #03658C;      
      border-radius: 10px;
      color: white;
    }
    .item1 {
      flex-shrink: 1;
      flex-basis: 200px;
    }
    .item2 {
      flex-shrink: 0;
      flex-basis: 200px;
    }
    .item3 {
      flex-grow: 1;
      flex-basis: 200px;
    }
    .item4 {
      flex-grow: 0;
      flex-basis: 200px;
    }

  </style>

</head>
<body>
  <div class="container">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
  </div>
  <div class="container">
    <div class="item item3">item3</div>
    <div class="item item4">item4</div>
  </div>

</body>
</html>
    mtk led
    JVMのClassLoader