自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:主页 > 前端开发 > HTML|CSS代码 >

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

作者:灰牛站长•发布时间:2021-07-12 01:20:27•浏览
  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标签,即使我们嵌套了,最后浏览器也会解析为并列关系而不是嵌套关系

相关文章

  • 定位元素的异同点

    定位元素的异同点

    定位的值 position: absolute绝对定位 position: relative相对定位 position: fixed固定定位 定位的相同点和不同点 ===相同点: 可以 设置top/ bottom/ left/right四个方位值,如...
    2021-07-12 11.07.09
  • clear的值和特点及伪元素before和after的使用

    clear的值和特点及伪元素before和after的使用

    clear:both的特点 元素需是块级元素 元素不能带有浮动属性 元素必须放在最后一个浮动元素的后面 用户是看不到这个元素的 clearfix清浮动方法的属性 浮动元...
    2021-07-12 11.07.45
  • 如何让元素消失在我们的视野中(面试题)

    如何让元素消失在我们的视野中(面试题)

    /* 面试题:让元素消失在我们的视野中(发挥你的想象力) 1.透明度 opacity:0;[0~1] 2.display:none 隐藏 3.width:0/height:0和overflow:hidden 4.line-height:0和overflow: hidden(没...
    2021-07-12 11.07.23
  • 浮动元素的值

    浮动元素的值

    left元素向左浮动; right元素向右浮动; none默认值。元素不浮动,并会显示在其在文本中出现的位置; iherit规定应该从父元素继承float属性的值 !DOCTYPE htmlhtmlhe...
    2021-07-12 11.07.56
  • 浮动元素的特点

    浮动元素的特点

    float元素的特点 float元素的代码 float代码效果图片 float元素的特点 浮动元素在一行显示 设置属性值为left时,浮动元素会依次从父级盒子的左侧向右排布,设置...
    2021-07-12 11.07.27

手机端