SOURCE

console 命令行工具 X clear

                    
>
console
<div>可见div1</div>
<!-- 不可见不占用空间 -->
<div class="hide">不可见div2</div>
<div>可见div3</div>

<!-- 
div默认块级元素 可以换行, 同时能指定大小 
span默认内联元素 不能换行, 不能指定大小
-->

<div>默认div</div>
<span>普通span</span>
<span>普通span</span>
<span>普通span</span>
<span class="block">被改造成块级元素的span</span>
<div class="inline">这是div, 被改造成内联元素, 不能换行, 不能指定大小</div>

<!-- 不换行可以指定大小 -->

<span class="inline_block">不还行可以指定大小</span>
<span class="inline_block">不还行可以指定大小</span>
<span class="inline_block">不还行可以指定大小</span>
<span class="inline_block">不还行可以指定大小</span>
div{
  border: 1px solid lightgray;
}
span{
  border: 1px solid lightgray;
}
.hide{
  display: none;
}

.block{
  display: block;
  width: 50px;
}

.inline{
  display:inline;
  width: 50px;
}

.inline_block{
  display: inline-block;
  width: 30px;
}