行级元素,块级元素,行级块元素特点

1em=1 font-size 宽度=高度
1.行级元素 inline
feature:内容决定元素所占位置,不可以通过css改变宽高
span strong em a del

2.块级元素 block
feature:独占一行,可以通过css改变宽高
div p ul li ol form address

3.行级块元素 inline-block
feature:内容决定大小,可以改宽高
img img只需要设置宽度就好了,高度会成比例缩放
凡是带有inline的元素,都带有文字特性 - 所以img会自动分割（两个img之间会有空格间隙）
注意:1.元素嵌套时,行级元素只能嵌套行级元素,块级元素可以嵌套任何元素,但是有个特例,p标签不能套块级元素,会被div卡成两个p标签
2.凡是带有inline属性的都是文本类元素比如 inline inline-block
3.有种情况行级元素a可嵌套块级元素,为了使链接更大,更好点击

（一）块级元素
div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre
HTML5：header、section、article、footer等

块级元素独占一行，当没有设置宽高时，它默认设置为100%（其宽度自动填满其父元素宽度）
块级元素允许设置宽高，width、height、margin、padding、border都可控制
注：块级元素设置了width宽度属性后仍然独占一行
块级元素可以包行内元素、块级元素

（二）行内元素（内联函数）及行内块元素

（1）span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u

button（display：inline-block）
行内元素不能独占一行，与其他行内元素排成一行，其宽度随元素的内容变化而变化
行内元素不能设置width、height、margin、padding
行内元素默认宽度为其content宽度
行内元素只能包括文字或行内元素、行内块元素，不能包括块级元素
display：inline-block：行内块元素与行内元素属性基本相同即不能独占一行，但是可以设置width及height
行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

（2）有一些特别的行内元素可设置宽高
替换元素：< img>、< input>、< textarea>、< select>、< object>

这些元素与其他行内元素不同的是，它有内在尺寸。因为它像是一个框，比如img元素，它能显示出图片是由于src的值，在审查元素时就不能直接看到图片，而input是输入框或是复选框也是因为其type的不同。

这种需要通过属性值显示的元素，其本身是一个空元素，像一个空的框架。

二、将行内元素分行显示或将块级元素同行显示

display:block  -- 显示为块级元素（块级元素默认样式）
display:inline  -- 显示为行内元素（行内元素默认样式）
display:inline-block -- 显示为行内块元素，表现为同行显示并可修改宽高内外边距等属性（行内块元素默认属性）

常将<ul>元素加上display:inline-block样式，原本垂直的列表就可水平显示

三、关于行内元素和块级元素的嵌套问题

一般情况下块级元素可以包含行内元素、行内块元素、块级元素，行内元素不能包含块级元素，只能包含行内元素及行内块元素。

eg：下图为正确的嵌套

<div>
	<span>
		<p></p>
	</span>
	<p></ p>
	<input type="text">
</div>

有些特殊的块级元素不能包含块级元素,只能包含行内元素：h1~h6、p、dt