美文网首页
简单块级元素和行内元素的区别

简单块级元素和行内元素的区别

作者: 夜舞暗澜_3ea2 | 来源:发表于2018-04-20 20:22 被阅读0次

常见块级元素:div及类似元素(nav,section,header,footer,aside,hgroup...),ul(ol,dl),li(dl,dt),form,p,pre
常见行内元素:a,span,em,i,input,button
特性区别:

  • 块级元素的宽度会自动延展至父元素content的宽度,可以使用width属性限制;
    行内元素的宽度由内容决定,width属性会被忽略。
  • 块级元素每一元素独占一行,所有元素纵向排列,即使宽度不足依然如此;
    行内元素横向依次排列,可以换行。
  • 块级元素永远是标准长方形,宽度为实际宽度;
    行内元素可以换行,此时元素并不是标准长方形,而是两部分相加。虽然不会影响展示,但获取宽度时会获取到最左至最右的长度(即整行宽度),而不是两部分宽度相加。
  • 块级元素使用标准盒模型,margin/padding属性正常使用;
    行内元素不接受height属性,不接受上下margin/padding值(但是可以设置line-height)。
  • 按照html标准,块级元素可以包裹行内元素,但是行内元素不能包裹块级元素。

相关文章

  • 任务8——CSS常见样式

    1.块级元素和行内元素分别有哪些? 区别1块级元素可以包含块级元素和行内元素;行内元素只能包含文本和行内元素 区别...

  • 入门任务8

    块级元素和行内元素分别有哪些?## 块级元素 行内元素 区别 块级元素可以包含行内元素和其他块级元素,行内元素只能...

  • css学习笔记之常见样式

    1 块级元素 和 行内元素区别 1 差异 块级元素可以包含行内元素和块级元素 行内元素只能包含文本和行内元素 块级...

  • css常见样式

    块级元素和行内元素分别有哪些? 块级元素: 行内元素: 特性区别:1.块级元素可以包含行内元素和块级元素,而行内元...

  • 6. CSS常见样式

    知识 块级元素和行内元素 特性区别 由图可知: 块级元素可以包含块级元素和行内元素,而行内元素只能包含行内元素和文...

  • CSS常见样式

    块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素 行内元素 块级元素与行内元素的区别块级可...

  • CSS常见样式问题搜集

    1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别? 块级元素:块级元素 行内元素:行内元素 区别...

  • CSS常见样式

    1.1块级元素和行内元素分别有哪些? 块级元素 行内元素 1.2块级元素和行内元素区别 宽高的设置只对块级元素有效...

  • CSS 常见样式书写

    1. 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级和行内元素的区别:行内元素与块级元素直观...

  • Css元素|属性

    块级元素和行内元素 块级元素 (内联)行内元素 区别描述: 块元素(宽)占满整行,行内元素只占内容所在的宽度。 块...

网友评论

      本文标题:简单块级元素和行内元素的区别

      本文链接:https://www.haomeiwen.com/subject/ubizkftx.html