元素之块级元素和行内元素特点(面试题)

行内元素:a,button.big,em,i,input,mark,span,select,option,strog,b,sup,sub,textarea,u

内联元素是指本身属性为display:inline的元素.因为它自身的特点,我们通常使用行内元素来进行文字\小图标(小结构)的搭建

块级元素:table,dl-dt-dd,figure,figcaption,div,h1-h6,hr,ul-li,ol-li,nav,p,form

本身属性为display:block的元素；因为它自身的特点，我们通常使用块级元素来进行结构的搭建布局

行内块状元素img,input

块级元素的特点

• 1.独占一行,每一个块级元素都会从新的一行重新开始
• 2.排列方式:从上到下依次排布
• 3.可以直接控制宽度、高度以及盒子模型的相关css属性
• 4.在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度,高度是它本身内容的高度
• 5.块级元素可以嵌套行内元素
• 6.ul/ol下面只能是li;dl下面只能是dt,dd;
• 7.p不能包裹其他块级元素包括它本身,可以嵌套行内元素

元素之间的相互转换

1. 行内元素=> display: inline
2. 块级元素=>display: block
3. 行内块元素=>display: inline- block

	<a href="#">
		<a href="#">大灰牛博客</a>
		www.dhnblog.com
	</a>

a标签不能嵌套a标签,即使我们嵌套了，最后浏览器也会解析为并列关系而不是嵌套关系