• block,inline和inlinke-block细节对比


    总体概念

    1. block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到 该行排满。
    2. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
      • 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
      • 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
    3. block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特 定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
    4. 一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。

    block,inline和inlinke-block细节对比

    • display:block
      1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
      2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
      3. block元素可以设置margin和padding属性。
    • display:inline
      1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
      2. inline元素设置width,height属性无效。
      3. inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
    • display:inline-block
      1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

    补充说明

    • 一般我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。
    • IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE 是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline- block属性的表象。

    display:block就是将元素显示为块级元素.

      block元素的特点是:
      总是在新行上开始;
      高度,行高以及顶和底边距都可控制;
      宽度缺省是它的容器的100%,除非设定一个宽度
      <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

      display:inline就是将元素显示为行内元素.

      inline元素的特点是: 
      和其他元素都在一行上;
      高,行高及顶和底边距不可改变;
      宽度就是它的文字或图片的宽度,不可改变。
      <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

      inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:

      让一个inline元素从新行开始;
      让块元素和其他元素保持在一行上;
      控制inline元素的宽度(对导航条特别有用);
      控制inline元素的高度;
      无须设定宽度即可为一个块元素设定与文字同宽的背景色。

      display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

      inline-block的元素特点:

      将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)

      并不是所有浏览器都支持此属性,目前支持的浏览器有:Opera、Safari在IE中对内联元素使用display:inline- block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了 display:inline-block属性的表症。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline- block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本就是行 布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。

      IE下块元素如何实现display:inline-block的效果?

      有两种方法:
      1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块 元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline- block,然后再将display设回inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):

      div {display:inline-block;...} 
      div {display:inline;}

      2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:

      div {display:inline; zoom:1;...}

      以下用个例子来说明三者的区别和用
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>display:inline、block、inline-block的区别</title>
    </head>
    <style>
    div,span{margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;}
    .b{display:block;}
    .i{display:inline;}
    div.ib{display:inline-block;}
    div.ib{display:inline;}
    a.ib{display:inline-block;}
    a.ib{display:block;}
    span.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%}
    </style>
    <body>
    <div>div display:block</div>
    <div class="i">div display:inline</div>
    <div class="ib">div display:inline-block</div>
    <span>span display:inline</span>
    <span class="b">span display:block</span>
    <span><a class="ib">a display:block</a></span><br />
    <div><span class="v"></span>vertical-align:middle</div>
    </body>
    </html>

  • 相关阅读:
    Centos7 ifconfig命令找不到
    request的各种方法
    linux开放端口
    easyui datagrid 部分参数
    设置tomcat内存
    tomcat做成系统服务
    Meta-analysis with complex research designs: dealing with dependence from multiple measures and multiple group comparisons
    多重校正
    DTI
    learning source archive
  • 原文地址:https://www.cnblogs.com/chaoyuehedy/p/8474684.html
Copyright © 2020-2023  润新知