Visibility, Display

9604 ワード
visibility CSS display テキストリンク

visibility


ツールバーの


visible


ELLRIMENTが見える

hidden


ページにはエンティティは表示されませんが、スペースは保持されます(レイアウト)

collapse

  • 2<table>行、列に適用され、display=noneに設定されているのと同じです.
  • の他の要因では、hiddenと同じである.
    • ex)<table>からhiddenとcollapseの違い
    html
    <table>
  <tr>
    <td>1.1</td>
    <td class="visible">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="visible">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
    css
    table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

.visible {
  visibility: hidden;
}
  • visibility: hidden
  • visibility: collapse

    • display


    ツールバーの


    none


    レンダリングしない要素は表示されず、スペースも存在しません

    block


    親要素のすべてのスペースを占有してブロックを作成します.
  • <div> , <p> , <h1~6> , <form>

    • inline


    構成要素に割り当てられたタグのみを使用するスペース
  • <a> , <span> , <img>

    • inline-block

    inlineのように機能するが、blockのようにwidthとheightを設けることができる.
    ex)display属性差異
    span.a {
  display: inline; /* the default for span */
  padding: 5px;
  border: 1px solid blue;  
  background-color: yellow; 
}

span.b {
  display: inline-block;
  width: 110px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

span.c {
  display: block;
  width: 110px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

    flex


    リファレンス


    https://developer.mozilla.org/ko/docs/Web/CSS/visibility
    https://www.w3schools.com/css/css_inline-block.asp
    BOJ 10451シーケンス周期
    [プログラマー]level 1 2018 KAKAO BLIND RECRUITMENT[第1ラウンド]秘密マップ