displayの種類
- none
- block
- inline
- inline-block
none
画面から消えます。
サイズ自体もとりません！
block
divが持つようになるデフォルトです。（タグによってデフォルト値が異なる場合があります。）
基本的にはwidthが100％がされるようにします。
簡単に言うと、横の行をすべて占めるようになります。
<style>
.block1{ display: block; background-color: yellow;}
.block2{ display: block; background-color: green;}
</style>
<div class="block1">1</div>
<div>初めまして、自分はうにです。</div>
<div>初めまして、<div class="block2">自分はうにです。</div></div>
inline
コンテンツをぴったり包む程度の大きさしかありません。
blockとは違って、改行がされておらず、widthとheightを指定することはできません。
<style>
.block1{ display: inline; background-color: yellow;}
.block2{ display: inline; background-color: green;}
</style>
<div class="block1">1</div>
<div>初めまして、自分はうにです。</div>
<div>初めまして、<div class="block2">自分はうにです。</div></div>
inline-block
inlineとblockの特性を持っている
基本的にはinlineの属性を持っているが、任意のサイズを変えることができる。
ちなみにExplorer7以下では使用できません！
<style>
.block1{ display: inline-block; background-color: yellow; width: 130px;}
.block2{ display: inline-block; background-color: green; width: 40px; height: 100px;}
</style>
<div class="block1">1</div>
<div>初めまして、自分はうにです。</div>
<div>初めまして、<div class="block2">自分はうにです。</div></div>
