Displayについて

12314 ワード
テキストリンク

表示について


HTMLレイアウトを決定する重要な属性です.

属性タイプの表示

  • inline
  • block
  • inline-block
  • flex
  • table
  • none
    • 背中がある.
    要素に表示されます.
    大きくinline要素とblock要素に分けられます.
    各プロパティの特徴と違いについて説明します.

    1-1. inline


    特長
  • inline要素はwidthおよびheightからcontentサイズとして決定される.
  • の上下の余白を設定できません.
    ----->line-heightで上下の余白を生成できます.
  • は基本的に側列時に4 px程度のマージンを生じる.
    ----->htmlで改行しました.
    • span,a,b,nav,i,img,strong,labelなどはいずれもinline要素タグである.
    html

<span class="inline">인라인</span>
<span class="inline">인라인</span>
<span class="inline">인라인</span>

css

.inline {
    display: inline;
    font-size: 5em;
    background-color: brown;
    color: white;
}
    実行画面

    1-2. block


    特長
  • ブロック要素の幅はほぼ100%である.
  • ページで1行を占めています.
  • width、height値を変更できます.
  • の横に並べ替えるには、次の手順に従います.
  • floatを使用します.△それでも、clearを譲る必要があることが多い.
  • 親要素の表示をflexに変更します.
  • モニタをinline blockに変更します.
    • p、div、h#、nav、ul、liなどはblock要素タグです.
    HTML

<div class="block">블록</div>

CSS

.block {
    display: block;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: yellow;
}
    実行画面

    1-3. inline-block


    特長
  • inline-block要素はinline要素のように、側面をオブジェクトに揃えます.
  • をテキスト位置合わせに並べ替えることができます.(親要素がblockの場合)
  • block要素のように幅値と高さ値を持つことができます.
    • inlineとの違い

  • marging-topとmarging-bottomに適しています.

  • line-heightは使いやすいです.
    	대신 inline태그는 특정태그를 그대로 사용하면 되지만 inline-block의 경우는 div태그안에 묶어서 설정해주어야 한다.>>> 디테일하게 작업이 가능함
    • HTML

<div class="contain_align">
	<div class="inline_block">인라인블록</div>
	<div class="inline_block">인라인블록</div>
	<div class="inline_block">인라인블록</div>
</div>

CSS

.contain_align {
    text-align: center;
}

.inline_block {
    display: inline-block;
    background-color: violet;
    width: 300px;
    height: 100px;
    padding: 20px;
    line-height: 100px;
    text-align: center;
}
    実行画面

    2-1. flex


    特長
  • flex要素は、親のdisplayをflexに設定することで、柔軟なboxレイアウトを設定できます.
  • ソート属性にはalign-content、align-items、align-sself、previty-contentなどがある.
    -->flexソート属性は後で個別に記録されます.

    • 2-2. table


    特長
  • 表は、レイアウトを制御するために使用されます.
  • htmlのtableタグを使用できる利点.
  • tableタグを使用する必要がなくてもtd、trなどの利点を利用することができる.
  • 行の要素のように、垂直位置合わせを使用して垂直位置合わせを行うなど、利用率の高い属性を使用できます.
    • HTML

<div class="boxwrap">
	<div class="box">
		<h3>제목</h3>
		<p>내용입니다.</p>
    	</div>
	<div class="box">
		<h3>제목</h3>
		<p>내용입니다.</p>
    	</div>
	<div class="box">
		<h3>제목</h3>
		<p>내용입니다.</p>
	</div>
    	<div class="box">
		<h3>제목</h3>
		<p>내용입니다.내용입니다만내용입니다만내용입니다만내용입니다			만내용입니다만내용입니다만내용입니다만</p>	
        </div>
</div>

CSS

.boxwrap {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.boxwrap .box {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    border: 1px solid gray;
    background-color: thistle;
}
    実行画面

    2-3. none


    特長
  • 画面の対応する要素は完全に消えます.
  • とvisibilityには違いがあります.
    • [functional-js]エラーハンドル
    [CodeKata]#15は、再帰的実装を用いて関数を実装する