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

发布时间:2020-11-19 发布网站:脚本之家
前端之家收集整理的这篇文章主要介绍了元素之块级元素和行内元素特点(面试题)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

总结


以上是前端之家为你收集整理的元素之块级元素和行内元素特点(面试题)全部内容,希望文章能够帮你解决元素之块级元素和行内元素特点(面试题)所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。