zoukankan      html  css  js  c++  java
  • 2017-08-20 block,inline和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;...}

      

    • 一般我们会用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属性的表象。

    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的同行特性。



  • 相关阅读:
    67家基金子公司背景脉络梳理
    港股奇葩术语知多少
    68家信托公司7大派系股东分食图谱
    港股术语
    流动性陷阱
    ORACLE归档模式和非归档模式的利与弊
    肥尾效应
    DVP
    金融衍生品如何定价
    绿鞋机制
  • 原文地址:https://www.cnblogs.com/lingshenghao/p/7401091.html
Copyright © 2011-2022 走看看