欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

行内元素和块级元素有哪些?_html/css_WEB-ITnose

程序员文章站 2022-05-22 08:06:05
...
一.行内元素和块级元素有哪些?

块级元素

information on author
long quotation
push button
table caption
definition description
deleted text
generic language/style container
definition list
definition term
form control group
interactive form

heading

heading

heading

heading
heading
heading

horizontal rule
inline subwindow
inserted text
fieldset legend
  • list item
    client-side image map
    alternate content container for non frame-based rendering
    alternate content container for non script-based rendering
    generic embedded object
      ordered list

      paragraph
      preformatted text
      table
      table body
      table data cell
      table footer
      table header cell
      table header
      table row
        unordered list

        行内元素

        anchor
        abbreviated form
        acronym
        bold text style
        I18N BiDi over-ride
        large text style

        forced line break
        push button
        citation
        computer code fragment
        deleted text
        instance definition
        emphasis
        italic text style
        inline subwindow
        行内元素和块级元素有哪些?_html/css_WEB-ITnose Embedded image
        form control
        inserted text
        text to be entered by the user
        form field label text
        client-side image map
        generic embedded object
        short inline quotation
        sample program output, scripts, etc.
        option selector
        small text style
        generic language/style container
        strong emphasis
        subscript
        superscript
        multi-line text field
        teletype or monospaced text style
        instance of a variable or program argument

        二.行内元素与块级元素有什么不同?

        1.尺寸-块级元素和行内元素之间的一个重要的不同点

        行内元素和width

        W3C CSS2 标准规定行内元素、非置换元素不会应用width属性。

        以下例子中,对行内元素应用了width:200px,你可以看到,根本就没有什么效果。

        行内元素和height

        W3C CSS2 标准规定行内元素、非置换元素不会应用height属性,但是盒子高度可以通过line-height来指定。

        以下例子,对行内元素应用了height:50px,你可以看到什么效果都没。

        行内元素和padding

        你可以给行内元素设置padding,但只有padding-left和padding-right生效。

        以下例子,行内元素应用了padding:50px。你可以看到对左右的内容有影响,但是对上下没影响。

        行内元素和marging

        margin属性也是和padding属性一样,对行内元素左右有效,上下无效。

        下面的例子,对应用了margin:50px,你可以看到左右边缘是生效了但是内容上下却没有。

        记住对行内元素

        设置宽度width 无效。
        设置高度height 无效,可以通过line-height来设置。
        设置margin 只有左右margin有效,上下无效。
        设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的,看图上效果就知道了

        上文部分翻译自:http://www.maxdesign.com.au/presentation/inline/

        2.text-align属性是两者表现的又以不同之处

        在W3C CSS2.1规范第16.2节 对text-align 有详细地描述:
        ------------------------------------------
        值: left | right | center | justify | inherit
        初始值:匿名值,由'direction'的值而定,如果'direction'为'ltr'则为'left',如果'direction'为'rtl'则为'right'。
        应用于: 块级元素,表格单元格,行内块元素
        继承性: 是
        计算后的值:初始值或指定值
        ------------------------------------------

        这个特性描述了如何使一个块元素的行内内容对齐。
        注意一点,标准里说这个属性是用来对齐行内内容的,所以,应该对块级内容起作用。
        解释一下,行内内容是说由行内元素组成的内容,行内元素大家都知道吧,比如 SPAN 元素,IFRAME元素和元素样式的 ‘display : inline’ 的都是行内元素;块级内容跟则是由块级元素构成,DIV 是最常用的块级元素。块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。
        这样,我们对这个特性的认识应该就清楚了。但是,问题来了,虽然标准里这么规定,那么是不是所有浏览器都遵守呢?答案是否定的。猜猜是哪个浏览器这么特立独行啊? IE!!
        IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。
        解决这个问题比较好的方式,就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持,所以还要设置父容器的 "text-align:center;"。

        若居中对齐的子元素内的行内内容不需要居中对齐,则还需要为其设置“text-align:left”:

        行内元素和块级元素有哪些?_html/css_WEB-ITnose

        声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

        相关文章

        相关视频


        网友评论

        文明上网理性发言,请遵守 新闻评论服务协议

        我要评论
      • 行内元素和块级元素有哪些?_html/css_WEB-ITnose
      • 专题推荐

        作者信息
        行内元素和块级元素有哪些?_html/css_WEB-ITnose

        认证0级讲师

        推荐视频教程
      • 行内元素和块级元素有哪些?_html/css_WEB-ITnosejavascript初级视频教程
      • 行内元素和块级元素有哪些?_html/css_WEB-ITnosejquery 基础视频教程
      • 视频教程分类