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

1. 行内元素:a,button.big,em,i,input,mark,span,select,option,strog,b,sup,sub,textarea,u
2. 块级元素:table,dl-dt-dd,figure,figcaption,div,h1-h6,hr,ul-li,ol-li,nav,p,form
3. 行内块状元素img,input

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

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

块级元素的特点

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标签,即使我们嵌套了，最后浏览器也会解析为并列关系而不是嵌套关系

转载请注明：大灰牛博客 » 元素之块级元素和行内元素特点(面试题)