[html/css]display,位置制御

9446 ワード
CSS position テキストリンク

1.コントロールボックスのタイプ


1-1モニタ構成

display:block
タグ出力のブロックボックスのサイズを変更できます.1行を独占するため、両側に他の要素は配置されません.
display:inline
新しい行では開始できませんが、行内に配置します.
width,heightはサイズを調整できず,margin値も調整できない.
dispaly:inline-block
新しい行では開始できませんが、行内に配置します.
インラインアトリビュートとは異なり、サイズと余白の値を調整できます.
display:none
箱を作成できません.スペースを使用しない
<html>
    <head>
        <style>
            #box-container > div, #box-container > span{
                border: 2px solid #09c;
                margin: 3px 0;
                padding: 5px;
}
            .none{ display: none }
            .block1{ display: block }
            .block2{ display: block; width: 300px; height: 60px; }
            .inline{ display: inline; width: 200px; height: 60px; }
            .inline-block{ display: inline-block; width: 200px; height: 60px; }
            .default-inline, .default-block{ width: 200px; height: 60px; }
        </style>
    </head>
    <body>
        <div id="box-container">
            <div class="none">none</div>
            <div class="block1">block1</div>
            <div class="block2">block2</div>
            <span class="inline">inline</span>
            <span class="inline-block">inline-block</span>
            <span>detualt inline-block</span>
            <div>block3</div>
        </div>
    </body>
</html>

1-2位割引

position:static
まずすべてのラベルは最初はposition:静的です.左から右、上から下に順に積み重ねます.(デフォルトでは、これは静的で、単独で書き込む必要はありません.)
postion:relative
top、right、bottom、leftプロパティを使用して位置を調整します.
各マーカーが既存の静的時の位置に応じて、所定の画素を上、右、下、左方向に移動する.
postion:absolute
親の位置が相対的、絶対的、固定的なラベルであれば、親のラベルに従って移動します.
親に相対的、絶対的、固定的なラベルがない場合はbodyを基準とします.
position:fixed
スクロール時に固定されたタグを保持
Day-1
Emoji表情転UTF-8コーデック、フィルタリング