学习三种display:block,inline,inline-block的巩固记录

1. display：block

特点：

* 独占一行

* 宽度默认占满父盒子 100%，高度由内容撑开，

* 可以设置width,height

* 可以设置margin,padding

* 可以作为父盒子涵盖其他三种display (但文字类标签里面不能放block元素)

* 一般用于导航菜单，产品卡片等组件

常见标签：

<div>，<p>， <h1>~<h6>，<ul>， <ol>， <li>

人工设置： display: block;

实例：

这里我们使用一个例子。可以看见子元素宽度默认占满父盒子宽度的100%

当然我们可以自己修改margin来改变其在父盒子中的宽度

block元素作为父盒子涵盖其他三种元素

2.display:inline

特点：

* 不换行，多个可以在一行中排列（当然横向占满父盒子之后会换行）

* 高度、宽度默认由内容决定

* 不能设置 width 和 height(由内容撑开)

* 只能设置左右 padding 和 margin，上下不起作用

* 不可以容纳block元素，会被浏览器纠正

常见标签：

<span>， <a>，<i>，<label> ，<strong>，<em>...

人工设置： display: inline;

实例：

可以看见inline元素一行排列，占满父盒子自动换行

而我们设定width和height是没有用的

现在我们尝试给inline元素设定margin和padding

3.display：inline-block

特点

* 不换行，多个可同行排列

* 可以设置 width 和 height

* 可以设置margin,padding

* 可以作为父盒子涵盖其他三种display

* 一般用于按钮、图标等组件

常见标签：

 <img>，<input>，<button> 

人工设置： display: inline-block;

实例

而我们两个按钮之间存在的空隙是由于代码中存在换行符（或空格），作为文本节点会被当成空格渲染从而存在空隙

而如果我们的写法换成

此时空隙消失