• 块级元素和行内元素总结


    行内内容是说由行内元素组成的内容,行内元素大家都知道吧,比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母 之间横向排列,到最右端自动折行。

    块级内容跟则是由块级元素构成,DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。

    块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。

    1、对行内元素,需要注意如下:

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

    2、IE6/7及IE8混杂模式中,text- align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。

    解决方法:为所有需要相对父容器居中对齐的块级元素设置“margin:0 auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持,所以还要设置父容器的 “text-align:center;”。若居中对齐的子元素内的行内内容不需要居中对齐,则还需要为其设置“text-align:left”:

    3、块级元素、行内元素分别汇总如下:

    Examples of block level elements
    ElementDescription
    <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
    Examples of inline elements
    ElementDescription
    <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
  • 相关阅读:
    Dom探索之基础详解
    PS切图(一)
    软件工程课程建议
    【一周读书】一点营养学笔记
    【一周读书】自卑与超越
    【一周读书】先教育好自己,再谈教导孩子
    【一周读书】学习如何学习
    【一周读书】你的理想
    结对项目编程
    Day4——提权学习之MySQL数据库(启动项提权)
  • 原文地址:https://www.cnblogs.com/FnuJava/p/3510884.html
Copyright © 2020-2023  润新知