css的block、inline和inline-block

css的block、inline和inline-block

block：块级元素

• 一个块级元素独占一行，即使设置了width，仍然独占一行。

• 默认情况下block元素宽度自动填满父元素宽度。

• 可以设置width、height、margin、padding属性。

• 常见块级元素：

  <header>、<aside,>、<video>、<audio>、<footer>、<h1~6>、<p>、<div>、<form>、<table>、<ul>、<ol>、<li>、<dl>、<hr>等
  

inline：行内元素

• 和其他元素都在同一行。

• 水平方向的margin、padding属性可以设置。

• 元素的width、height，垂直方向的margin、padding不可设置。

• 元素的宽度就是它包含的文字或图片的宽度，不可改变。

• 常见行内元素：

  <a>、<b>、<strong>、<span>、<label>、<button>、<img>、<input>、<select>、<textarea>
  

​ 其中img、input是行内块元素

inline-block：行内块元素

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现，使其既具有block的宽高特性又具有inline的同行特性。

• 和其他元素都在一行上。

• 可以设置width、height、margin、padding属性。

• 常见行内块元素

  <img>、<input>
  

行内元素与块级元素之间的转换

1、float

当把行内元素设置float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动属性

2、position

position:absolute、position:fixed都会使原先的行内元素变为块级元素

3、display

块级元素->行内：display:inline;

行内元素->块级：display:block;

转换为行内块标签：display:inline-block;