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

行内元素:a,button.big,em,i,input,mark,span,select,option,strog,b,sup,sub,textarea,u 内联元素是指本身属性为display:inline的元素.因为它自身的特点,我们通常使用行内元素来进行文字小图...

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

  • 发表于 2020-07-29 11:40
  • 阅读 ( 81 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除