内联元素与块级元素

内联元素 –> 块级元素 ： display:block;
块级元素 –> 内联元素 ： display:inline;

常见的块级元素有：div、p、address、blockquote、center、h1~h6、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、pre、table、ul

常见的内联元素有：a、img、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、tt、u、var、textarea

display属性：
值

说明

block

块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符

inline

内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符

inline-block

行内块元素，元素既具有内联元素的特性，也具有块元素的特性

none

设置元素不会被显示

display:block;  
【显示为块元素，能让行内元素显示宽高，能让行内元素具有块元素的特征】

 

display:inline;  

【显示为行内元素，能让块元素具有行内元素的特征】

 

display:inline-block;  

【吸取行内元素和块元素共同的特征，既能排在一行，又能显示宽高】

display:none;  

【元素在页面上看不见，隐藏了，但是在源代码中依然存在】

 

总结：

块级元素与行级元素的转变（block、inline）
控制块元素排到一行（inline-block）
控制元素的显示和隐藏（none）

inline - block和float的区别：
1. display:inline-block

①可以让元素排在一行，并且支持宽度和高度，代码实现起来方便

②位置方向不可控制，会解析空格

③IE 6、IE 7上不支持

2. float

①可以让元素排在一行并且支持宽度和高度，可以决定排列方向

②float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

display后跟的值：

原文：https://blog.csdn.net/baidu_29343517/article/details/82049246