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

    行内内容是说由行内元素组成的内容,行内元素大家都知道吧,比如 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

                         Examples of block level elements

    ElementDescription
    <address> information on author
    <blockquote> long quotation

    <address>

    <blockquote>

    <button>

    <caption>

    <dd>

    <del>

    <div>

    <dl>

    <dt>

    <fieldset>

    <form>

    <h1>……<h6>

    <hr>

    <iframe>

    <ins>

    <legend>

    <li>

    <map>

    <noframes>

    <noscript>

    <object>

    <ol>

    <p>

    <pre>

    <table>

    <tbody>

    <td>

    <tfoot>

    <th>

    <thead>

    <tr>

    <ul>

                                   Examples of inline elements

    <a>

    <abbr>

    <acronym>

    <b>

    <bdo>

    <big>

    <br>

    <button>

    <cite>

    <code>

    <del>

    <dfn>

    <em>

    <i>

    <img>

    <input>

    <strong>

    <span>

    <label>

    <tt>

  • 相关阅读:
    矩阵快速幂模板C++
    异或空间与高斯消元
    POJ2947解题报告
    Manacher算法笔记 C++
    Python(80)_使用selenium实现第一个web自动化程序
    Python(78)_认识selenium自动化测试
    111
    Python(60)_闭包
    Python(55)_默认参数的陷阱
    Python(53)_实现一个加法计数器
  • 原文地址:https://www.cnblogs.com/iloveyoucc/p/2696670.html
Copyright © 2011-2022 走看看