display

display

参考学习:https://www.cnblogs.com/zhuzhenwei918/p/6058457.html
https://www.cnblogs.com/zhuzhenwei918/p/6014538.html#3544669

经常用到的仅仅是block、inline-block、inline和none等几个属性值
none
【特征】
  隐藏元素并脱离文档流
【标签】

<base><link><meta><title><datalist><dialog><param><script><source><style>

block
【特征】
  [1]不设置宽度时,宽度撑满一行
  [2]独占一行
  [3]支持宽高
  padding,margin上下左右都有效果
  
  常见的块级元素由<p><div><h1><li>等等。
  块级元素中可以容纳其他块级元素或行内元素
  行内元素一般不可以包含块级元素

inline
【特征】
  [1]内容撑开宽度
  [2]非独占一行
  [3]不支持宽高(其高度一般由其字体的大小来决定,其宽度由内容的长度控制。)
  [4]代码换行被解析成空格
  可设置左右padding,margin,上下设置没有效果。
  
*常见的行内元素由<a><em><img>等等。
  
inline-block
【特征】
  [1]不设置宽度时,内容撑开宽度
  [2]非独占一行
  [3]支持宽高
  [4]代码换行被解析成空格
 padding,margin上下左右都有效果
补充:行内元素无background-color:,
background-color包括内边距,不包括外边距。

原文地址:https://www.cnblogs.com/princeness/p/11664993.html