• 技术文章 >web前端 >html教程

    HTML 行内元素和块级元素的理解及其相互转换

    2016-06-20 08:42:14原创830
    块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格)...

      特点:1、块级元素会独占一行,其宽度自动填满其父元素宽度。

         2、可以设置width,height属性。(即使设置了宽度,也是独占一行的,除非用float属性等特殊情况)

         3、可以设置margin(外边距)和padding(内边距)。

    行内元素:span, strong, em, br, img, input, label, select, testarea...

         (行内元素、内联元素、内嵌元素、直进式元素都是指 "inline element")

      特点:1、行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化(其宽度由内容撑开)。

         2、设置width,height属性无效。

         3、水平方向上的padding-left,padding-right,margin-left,margin-right产生边距效果,

           但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生效果。

    可变元素:需要根据上下文关系确定该元素是块级元素还是行内元素。属于上述两种元素类别,一旦上下文关系确定了他的类别,他就遵循块级元素或行内元素的规则限制。

    CSS:css能够改变html的默认布局模式,把块级元素摆放到你想要的位置上去。

        块级元素和行内元素的基本差异是块元素一般从新行开始,而当加入了css控制之后,这种属性差异就不成为差异了。

        给行内元素加上 display:block 这样的属性,让行内元素也有每次都从新行开始的属性。

        给块级元素加上 display:inline 这样的属性,让块级元素不具有从新行开始的属性。

        给行内元素加上 display:inline-block 属性,仍为行内元素,但是可以设置width及height属性等。

    (该文仅供学习交流。如有不同观点,欢迎留下宝贵意见~)

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:HTML 行内元素和块级元素的理解及其相互转换
    上一篇:css预处理器和后处理器 下一篇:基础理解4:弹出层和拖动
    PHP编程就业班

    相关文章推荐

    • html5中元素能拉伸宽度吗• html下拉菜单文字怎么变小• myeclipse打开html乱码怎么解决• html怎么禁止文字选择• HTML里怎么设置thead表头的颜色

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网