[大邱AI学校]10705開発ログ6

3618 ワード

[勉強の内容]


Z-index


positionタグおよびそのサブアイテムまたはサブアイテムのZ軸順序のタグ.より大きなz-index値を持つ要素は、より小さな値の要素の上に上書きされます.
z-indexが適用されていない状態は0と考えられる.したがって、z-indexを使用して値を加算すると、その要素は指定されていない要素を上書きし、上に移動します.3 Dフィーチャーを持つ絶対、固定、および2 D、3 Dフィーチャーは、3 Dフィーチャーを持つ相対的に使用できます.
大きな空間をつかむ必要がある場合は、2次元が望ましい.3 Dの場合、レイヤが重なる場合があります.

Float:水平位置合わせ[Float:すいへいいちあわせ]


この要素の概念をオフセットして、3 Dフィーチャーでz列を異なるソースにします.
デフォルトでは、2つの領域を作成すると改行され、同じ線上に配置したい場合はfloat、すなわちfloatとみなすことができます.この場合、2つの要素が重なり、ソートするために属性値を左、右にソートできます.
floatを使用する場合はclearと一緒に使用する必要があります.(ワニとワニの新しい関係)floatは同じ線上に置こうとしたときに使用され、clearは印刷機能をここまでマークして閉じています.
{clear:both;}表示左右都要关闭.

印刷の使用上の注意点


  • (1)固定された値を持つ親領域で印刷を使用して、レイヤのクラックを防止します.
    px値ではなく%(可変値)の領域を指定した場合、親に固定値がなくてもブラウザのサイズを変更してもレイヤは破壊されません.これは珍しい状況だ.
    親のwidth値は、指定した印刷の3つのwidth値の和以上である必要があります.

  • (2)親の高さ値がない場合は,子どもの高さ値に適用する.しかし,子供が3次元で親の高さ値がない場合,親の高さ値に影響を与えることはできない.つまり、印刷された領域を使用しても、その高さの値は親領域に影響しません.

  • (3)印刷を使用する場合,位置状態は純3次元の位置:absolute,fixedを使用できない.代わりに静的で相対的に使用されます.
  • ++脚注が3 D要素に重ならないように正確に位置決めするには、clear:this;使用します.htmlドキュメントが長ければ長いほどfooter上の要素が不明になるため、通常使用されるクラスはclearfixであり、クラスにclearプロパティを提供します.
    @html
    <div class="clearfix"></div>
    
    @css
    }
    .clearfix{
    	clear: both;
    }

    Over Flow


  • overflow : hidden ;
    領域内にコンテンツが多すぎると、領域を超えたコンテンツが隠されます.この要素を使用すると、3 Dサブボディの高さの値でも親に影響します.

  • overflow-y : scroll ;
    スクロールを使用してy軸を超えた内容を表示します.

  • overflow-x : scroll ;
    スクロールを使用して、x軸を超えた内容を表示します.
  • Flex


    flex指定要素の子はすべてx軸で整列しています.左から右へ並べ替えます.

    flex-direction


    :ソート方法の変更

  • flex-direction: row-reverse;
    逆順に並べる.

  • flex-direction: column-reverse;
    逆順でy軸に整列します.
  • flex-wrap


  • flex-wrap: nowrap; これはデフォルト値で、子供たちのwidthサイズが親のサイズより大きい場合、自動的にサイズを調整し、親の領域に入ることができます.

  • flex-wrap: wrap; 子供たちのwidthの大きさの和が親より大きいと、子供たちの大きさは変わらず、改行現象が発生します.
  • justify-content


    :t x軸整列ラベル
  • flex-start;
    左から
  • ソート
  • flex-end;
    右端から
  • が並ぶ
  • center;
    中央揃え
  • space-between;
    両側を揃え、要素間に空白を作成します.
  • space-around;
    両端が揃えられていますが、両端に少しスペースが残っています.
  • align-item



    ※flexboxヘルプサイト
    https://flexbox.help/

    一元的なソート


  • margin: 0 auto;
    :よく使われるブロック要素

  • left: 50%;
    margin-left: -150px;
    :エレメントの左の始点に対してブラウザの50%に配置し、エレメントの幅の1/2に-(負)の値を指定します.欠点は、領域のサイズが変化するたびにmarging-left値を変更することです.
  • ※中央ソート公式参考サイト
    https://css-tricks.com/centering-css-complete-guide/

    [困難な点]


    以前学んだ馬金のようなものは、今日学んだものが言及すると一致しません.

    [解決策]


    やはり復習しなければならないようです.また,今後も学習の要素がページ構成でどのように利用されるかを考え,構想,学習を行う.

    [勉強の感想]


    一週間の進度は思ったよりたくさん学んだようです.前述したように、復習と繰り返しが最も重要なようです.今日は開発ログを見てから寝ます