块状元素、内联元素、和内联块状元素

一、前言

工作中使用较多的是js，java，所以一直忽略对css的学习，好多样式方面的东西全靠百度，很少去总结学习。最近写样式的事挺多的，所以该学习学习了。

二、块状元素、内联元素、和内联块状元素

1.特点

块状元素（block ）： 

一个元素占一行，有高度

块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。

 

内联（inline ） ：

没有高度，一个元素占自己的那一部分。行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

内联块状 （inline-block）：和其他元素在一行上面（内联），高度，宽度，行高，底边距都可以设置。

 

2.转换

内联转块状：设置display:block；

块状转内联：设置display:inline

3.常见元素

块级元素：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>　
内联元素（行内元素）:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联块状 元素：

<img>、<input>