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><divclass="block1">1</div><div>初めまして、自分はうにです。</div><div>初めまして、<divclass="block2">自分はうにです。</div></div>
inline
コンテンツをぴったり包む程度の大きさしかありません。
blockとは違って、改行がされておらず、widthとheightを指定することはできません。
<style>.block1{display:inline;background-color:yellow;}.block2{display:inline;background-color:green;}</style><divclass="block1">1</div><div>初めまして、自分はうにです。</div><div>初めまして、<divclass="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><divclass="block1">1</div><div>初めまして、自分はうにです。</div><div>初めまして、<divclass="block2">自分はうにです。</div></div>
