CSS Wrap-Up

12060 ワード
TIL CSS テキストリンク

CSS Wrap-Up


HTML-CSSリンク

<link href="style.css" rel="stylesheet" type="text/css" />
  • link-リンクラベルとして使用するcssファイル
  • href-hrefプロパティcssファイルパス
    • を作成
  • type-リンクラベルにリンクされているファイルの説明.タイプ値は、cssファイルが接続されているため、常に「text/css」
    • です.
  • rel-relはHTMLファイルとCSSファイルの関係を記述する属性である.cssファイルをリンクする場合は、「スタイルシート」の値
    • を常に記入してください.

    text-indent

    text-indentインデントを許可
    .practice {
	text-indent: 50px;
 }

    The Box Model


    Webページを構成する基礎モデルwidthheight:content領域の幅と高さpadding:コンテンツと枠線の間の領域border:contentとpaddingを囲む線margin:borderと外部空間の間の領域

    box-sizing

    boc-sizingプロパティを使用して直感的なwidth値を設定します.
    * {
	box-sizing: border-box;
}
    次のコードが表示されます.
    <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="first">
      첫 번째 박스, 가로 300px
    </div>
    
    <div class="second">
      두 번째 박스, 나도 가로 300px
    </div>
    
    <div class="first new">
      new 첫 번째 박스, 가로 300px
    </div>
    
    <div class="second new">
      new 두 번째 박스, 나도 가로 300px
    </div>
    <div class="third-new">
      new 클래스가 없는 박스
    </div>
  </body>
</html>
    * {
  box-sizing: border-box;
}

.first {
  width: 300px;
  margin-bottom: 20px;
}

.second {
  width: 300px;
  margin-bottom: 20px;
  padding: 50px;
  border-width: 10px;
}

div {
  background-color: yellow;
}

.new {
  box-sizing: border-box;
}

.third-new {
  width: 300px;
}
    box-sizing属性がないと仮定します.
    最初の箱の横は300 pxで、
    2番目の箱の横長は10+10+5+5+300=420であるべきです.
    でも.* { box-sizing: border-box;}を使用すると、システム全体に直感性が与えられるため、ネットワーク出力は次のようになります.


    Block & Inline


    他の要素はBlock要素の隣には配置できませんが、他の要素はInline要素の隣に配置できます.
    本来はタグ自体に付与された属性ですが、CSSでBlock要素をInline、Inline要素をBlock要素に変更することができます.
    /* block요소인 p를 inline요소로 변경 */
p {
  display: inline-block;
}

/* inline요소인 span을 block요소로 변경 */
span {
  display: block;
}

    margin auto


    marginプロパティの左右にautoの値が割り当てられ、左右の空間が均一に(中央に)割り当てられ、余白があります.
    .center {
	margin: 40px auto;
}

    Take Away


    CSSのレビュー


    伝統的な退廃理論を通じて学ぶ内容.それによって再整理された時間.
    当時習った時に理解していた内容なのに、復習中に思い出せず、台本を読み直したり、グーグルゲームをやってみたりして、予想以上に時間がかかりました.
    一口では食べられないと言われていますが、後で時間があれば、整理した内容を省略するように努力しなければなりません.
    wikioi 1282ジョセフ問題セグメントツリー
    C++での二分探索