[css]displayプロパティ

20001 ワード
display block display inline-block display inline テキストリンク
上記のコードを学習した翌日のlayoutにおいて,display:inline,display:inline-block,`display:block属性に対する学習をまとめた.

1. display


1-1）表示属性？


まず、displayは画面をレンダリングするときに特定の領域を表示する属性です.inline要素をblockに変換block要素は、inlineに設定することができる.
一般的なタイプは次のとおりです.
display : inline;
display : inline-block;
display : block;
.

1-1-1) inline

index.html 
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>display</title>
   <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="main-box">
   <div class="box1 box">나는 inline!!</div>
   <div class="box2 box">나는 inline!!</div>
   <div class="box3 box">나는 inline!!</div>
</div>
</body>
</html>
style.css 
* {
    box-sizing : border-box;
    margin     : 0;
    padding    : 3px;
}
.main-box {
    border : 3px solid black;
    width  : 500px;
}
.box {
    border : 1px solid black;
}
.box1 {
    display          : inline;
    background-color : red;
    width            : 200px;
}
.box2 {
    display          : inline;
    background-color : greenyellow;
    width            : 200px;
}
.box3 {
    display          : inline;
    background-color : cadetblue;
    width            : 200px;
}
displayのプロパティでinlineとして指定されたレイヤーは、1行に他のレイヤーと並べて配置され、前後の改行は必要ありません.
上の図に示すように、divはblockタグですが、display:inlineを使用してinline要素として作成すると、1行に並んで配置されていることがわかります.
よく見るとboxにはwidth: 200pxの属性がありますが、適用されないことを知っていますか?inlineプロパティは、width, heightプロパティ設定を上書きします.inlineを維持しながらblockのプロパティを持ちたい場合は、どうすればいいですか?inline-blockを使えばいい!

1-1-2) inline-block

styls.css 
.box1 {
    display          : inline-block;
    background-color : red;
    width            : 150px;
}
.box2 {
    display          : inline-block;
    background-color : greenyellow;
    width            : 150px;
}
.box3 {
    display          : inline-block;
    background-color : cadetblue;
    width            : 150px;
}

ご覧のように、inlineプロパティで指定できるblockプロパティが適用されます.

1-1-3) block

width 
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>display</title>
   <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="main-box">
   <span class="box1 box">나는 block!!</span>
   <span class="box2 box">나는 block!!</span>
   <span class="box3 box">나는 block!!</span
</div>
</body>
</html>
index.html 
* {
    box-sizing : border-box;
    margin     : 0;
    padding    : 3px;
}
.main-box {
    border : 3px solid black;
    width  : 500px;
}
.box {
    border : 1px solid black;
}
.box1 {
    display          : block;
    background-color : red;
    width            : 200px;
}
.box2 {
    display          : block;
    background-color : greenyellow;
    width            : 200px;
}
.box3 {
    display          : block;
    background-color : cadetblue;
    width            : 200px;
}
style.cssプロパティでdisplayとして指定されたラベルは、前後に改行され、他のエンティティが別の行にプッシュされます.簡単に言えば、blockが1行を占めています.
上の図に示すように、blockはinlineタグであるが、spanの属性が適用され、これらの属性はdisplay:blockを使用して行ごとに空間を占有していることがわかる.blockは、block属性を指定することができる.
IO操作(read,write,flush)メモ
[サイバーハッカー]解答No.17