css之html标签中常见的的inline、inline-block、block元素

HTML中常见的inline、inline-block、block元素

display常用属性值

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline：内联元素

inline-block：内联块级元素

block：块元素

flex：弹性盒

display:none与visibility:hidden的区别

浏览器渲染的时候会涉及到重绘与回流的问题，前者隐藏后脱离文档流，不占据页面空间引发回流。后者隐藏后还占用空间，只引起重绘。因此优化的时候会有那么一条：建议用visibility:hidden替换display:none

另外，vue中的v-show指令，切换的就是元素的display样式

inline特点

内联元素会在一条直线上排列，在同一行从左至右水平排列。直到一行排不下，才会换行。

内联元素设置宽、高、margin和padding的上下无效（竖直无效）。

内联元素设置line-height，margin左右和padding的左右有效（水平有效）。

内联元素的宽高随标签里的内容而变化。

block 特点

独占一行，多个block元素另起一行，默认情况下，block元素宽度自动填满其父元素宽度

block元素可以设置width,height属性。块元素即使设置了宽度,仍然是独占一行。

block元素可以设置margin和padding属性。

inline-block 特点#

让block元素不再独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高

常见块内元素

<header></header>
<nav></nav>
<address></address>
<footer></footer>
<form></form>

<div></div>
<p></p>
<h></h>
<hr/>

<ul></ul>
<ol></ol>
<li></li>
<dl></dl>

<tr></tr>
<td></td>
<table></table>

<pre></pre>
<blockquote></blockquote>

常见行内元素

<a></a>
<span></span>
<textarea></textarea>

<br/>
<b></b>
<del></del>
<em></em>
<i></i>
<strong></strong>
<sup></sup>
<sub></sub>

行内块级元素

<img/>、<input/>、<select></select>