zoukankan      html  css  js  c++  java
  • 行内元素和块级元素

    块级元素

    <address> information on author
    <blockquote> long quotation
    <button> push button
    <caption> table caption
    <dd> definition description
    <del> deleted text
    <div> generic language/style container
    <dl> definition list
    <dt> definition term
    <fieldset> form control group
    <form> interactive form
    <h1> heading
    <h2> heading
    <h3> heading
    <h4> heading
    <h5> heading
    <h6> heading
    <hr> horizontal rule
    <iframe> inline subwindow
    <ins> inserted text
    <legend> fieldset legend
    <li> list item
    <map> client-side image map
    <noframes> alternate content container for non frame-based rendering
    <noscript> alternate content container for non script-based rendering
    <object> generic embedded object
    <ol> ordered list
    <p> paragraph
    <pre> preformatted text
    <table> table
    <tbody> table body
    <td> table data cell
    <tfoot> table footer
    <th> table header cell
    <thead> table header
    <tr> table row
    <ul> unordered list

    行内元素

    <a> anchor
    <abbr> abbreviated form
    <acronym> acronym
    <b> bold text style
    <bdo> I18N BiDi over-ride
    <big> large text style
    <br> forced line break
    <button> push button
    <cite> citation
    <code> computer code fragment
    <del> deleted text
    <dfn> instance definition
    <em> emphasis
    <i> italic text style
    <iframe> inline subwindow
    <img> Embedded image
    <input> form control
    <ins> inserted text
    <kbd> text to be entered by the user
    <label> form field label text
    <map> client-side image map
    <object> generic embedded object
    <q> short inline quotation
    <samp> sample program output, scripts, etc.
    <select> option selector
    <small> small text style
    <span> generic language/style container
    <strong> strong emphasis
    <sub> subscript
    <sup> superscript
    <textarea> multi-line text field
    <tt> teletype or monospaced text style
    <var> instance of a variable or program argument

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

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

    行内元素和width

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

    行内元素和height

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

    行内元素和padding

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

    行内元素和marging

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

    记住对行内元素

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

    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”

    来源:

    http://www.maxdesign.com.au/articles/inline/

    http://www.cnblogs.com/yehuiyu/p/4281406.html

  • 相关阅读:
    Asp.Net根据角色验证
    牛客登录(四)
    外键约束
    update 和replace更新表
    每日一题力扣485
    牛客登录(6)开窗函数
    牛客登录(5)
    MySQL的UPDATE或DELETE中子查询不能为同一张表
    牛客登录(二)
    剑指offer:二分
  • 原文地址:https://www.cnblogs.com/youguess/p/4292801.html
Copyright © 2011-2022 走看看