liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のレイアウト関連 - display属性(inline,block,none)

box modelの種類

  1. block(div,p) : 高、幅設定できて、一行を占める
  2. inline(span, a) : 高、幅設定しても効かない、一行に複数設置できる
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> デフォルトbox model </title>
   <style type="text/css">
        div,span{
            width: 300px;
            height: 40px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
</body>
</html>

f:id:liguofeng29:20160203212857p:plain

display属性を指定することでデフォルトbox modelを変更できる。

  • block
  • inline
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> display属性 </title>
   <style type="text/css">
        div,span{
            width: 300px;
            height: 40px;
            border: 1px solid black;
        }
        /* divにinline */
        body>div{
            display:inline;
        }
        /* spanにblock設定 */
        body>span{
            display:block;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span3</span>
<span>span4</span>
</body>
</html>

f:id:liguofeng29:20160203213426p:plain

display属性のnone属性値

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> display属性のnone </title>
   <style type="text/css">
    div{
        width:300px;
        height:40px;
        background-color:#ddd;
        border:2px solid black;
    }
    </style>
</head>
<body>
<input type="button" value="隠蔽" 
    onclick="document.getElementById('test1').style.display='none';"/>
<input type="button" value="表示" 
    onclick="document.getElementById('test1').style.display='';"/>
<div id = "test1">
displayで表示非表示を制御する<br>
領域を消す
</div>
<input type="button" value="隠蔽"
    onclick="document.getElementById('test2').style.visibility ='hidden'"/>
<input type="button" value="表示"
    onclick="document.getElementById('test2').style.visibility ='visible'"/>
<div id = "test2">
visibilityで表示非表示を制御する<br>
領域を消さない
</div>
<hr/>
</body>
</html>

f:id:liguofeng29:20160203214422g:plain