2021.07.02 CSS-3

4773 ワード
CSS レイアウト 開発ログ フロントエンド コリン テキストリンク
5日目.組織レイアウト用CSS言語の属性を学習しました.今日学んだことを復習する前に、アルファベットH、Iで始まるラベルのInline/Block属性のうち、どの属性を復習しますか.

Inline : <head></head> , <i></i> , ins></ins>Block : <h1></h1> to <h6></h6> , <header></header> , <hr>

今日は何を勉強しましたか。


レイアウト


箱型

  • ボックス型番:html要素の占有空間に関する規則
  • ページ:border外部
    (上、右、下、左画素->マージン:100 px 0、100 pxを時計回りに同時に設定可能)
  • padding:これはコンテンツの外部部分であり、border内の->コンテンツとborderの間の部分でもあるため、padding値を与えると、borderは設定と異なる値を表示する可能性があります.
    (上、右、下、左のピクセルを時計回りに同時に設定可能->border:100 px 0 100 px)
    ∴ .box-model {width: 200px; height: 200px; padding-left: 100px;} もしそうであれば、表示される値は300 px 200 pxです!
    このとき、「box-size:border-box;」200×200サイズのボックスモデルで、中には10 pxフレーム、100 pxダウンジャケットがあり、残りの空間でcontentsの空間を作ることができます(80 x 80)!
    • .box-model {
	box-sizing: border-box;
	width: 200px; height: 200px; 
	background-color: yellow;
	border: solid 10px red;
	padding: 100px 0 0 100px;}
  • border:要素を囲む枠線、境界
  • contents:要素が持つ情報
    • +++TIP
    htmlとbodyラベルの間にも余白とpaddingが適用されているので、空白を解消するにはcssをhtml、body{marign:0;padding:0}に設定してください.

    余白のマージ

  • 兄弟関係にあるタイガー人の境界が重なり、大きな境界に沿っている.
    • 	<div class="margin-1"></div>
	<div class="margin-2"></div>
    設定時、
    .margin-1 { margin-bottom: 100px;}
    .margin-2 { margin-top: 50px;}
    そうすると、margin-1とmargin 2の間のmarginは150 pxではなく、100 px!
  • 親と子の関係にあるタテで、そのマージンは子の関係に設定されたマージンの設定値に従う->この現象を防ぐために、「position」を使いましょう.

    ▼

    • display

  • “display:”-block->inline,inline->block
    (入力:h 1{display:inline;}->inline属性を有するh 1ラベル)
  • 'display: inline-block;' : 2つのプロパティを同時に持つタグに設定
    主にメニューを設定するための
  • Blockプロパティタグは空間を設計できますが、行内のプロパティタグの空間はy軸に空間を設定できません.x軸のスペースを設定できます!

    (空間設定は同じです.width:100 px;height:100 px;marging-top:100 px;marging-right:100 px;)

    • 垂直位置揃え(垂直位置合わせ)

  • inline属性にのみ適用する機能
  • 兄弟関係のラベルは最大空間垂直に
    • 並べられている.
  • 親子関係のタグを親空間に垂直に配置
    (下揃え、中揃え、上揃え)

    • position


    3種類に分けられます.
    ①marging-topを使用する場合、親子関係にmargin合併が発生しているか
    Yes : static, relative
    No : fixed, absolute
    ②top、right、bottom、left属性を使用できるか
    Yes:固定(ブラウザベース)、相対(最初に作成した場所ベース)、絶対(ブラウザ/親ベース)
    No : static
    ③子どもの身長が親に影響するか
    Yes : static, relative
    No : fixed, absolute
  • 静的:Webサイト(ブラウザ)で展開します.(位置の既定)->2 Dプロパティ
  • fixed:指定された位置に固定されます.->3 Dプロパティ
    • 相対
  • :以前に設定した値を使用して配置します.->2 D、3 Dブレンドアトリビュート
  • absolute:必要な場所に配置します.->3 Dプロパティ
    親が同じ3 Dプロパティを持っている場合は親ベース、親が2 Dプロパティの場合はブラウザベース:

    • 何が難しいの?


    position...
    二次元三次元の概念は、位置のそれぞれの特徴もやっと理解でき、合計48種類の場合の数(親子それぞれの位置)を考慮し、まず、大量の情報量が脳に負担を感じさせる.

    どうやって解決したの?


    量が多いときに解決する方法は一つしかなく、自分の基準を見つける前に、量全体を創造して確認するしかない.あるいは試さなくてもすぐにわかる大きな髪を持っている...だから面倒くさいけど練習しなきゃInline/Blockプロパティタグを一つ一つ理解するように...

    だからね。


    やっと一週間のネットプログラミングの授業が終わりました.本当に目が回っているような気がしましたが、徐々についていきました.俳優さんの数が増えているような気がしますが、正直今日学んだポジションはちょっと大変でした.できることが多くなってきたので次はこれをどう応用するか考えます今日は金曜日ではなく月曜日で、休みの時間がなくて、また位置のように重要で、心が狭いという概念が出てきたので、勉強するなら、一時的にやめる考えがあるはずです.周末はゆっくり休んで帰ってきてよく复习してよく勉强します...!
    sumple 3で作成したファイル
    https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0702
    TCP非同期プログラミング受信データ問題
    Programers:文字列内で任意にソート