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
    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

    原文地址:http://blog.csdn.net/freshlover/article/details/7076831

  • 相关阅读:
    Cannot change network to bridged: There are no un-bridged host network adapters解决方法
    The authenticity of host 192.168.0.xxx can't be established.
    Vm下 linux与windowsxp文件共享的方法
    vmware 下的linux的host only上网配置
    VMWare三种工作模式 :bridge、host-only、nat
    云技术入门指导:什么是云计算技术,云技术用什么语言开发
    什么是移动云计算
    云计算是什么
    架构之路
    这首诗看着是越看越顺眼,百赋乐其中
  • 原文地址:https://www.cnblogs.com/wangrongxiang/p/5382456.html
Copyright © 2011-2022 走看看