之前讲过块级元素使用display:block

行内元素使用display:inline

那么今天我们就来区分一下display:inline,display:inline-block和display:block的区别

首先先说一个名词 :inline element:行内元素也叫作内联元素,内嵌元素,直进式元素

block element:块级元素

1.display:inline 转化成内联元素,不换行;

内联元素的前面和后面都不会有换行符,你不可以给内联元素定宽和高,也就是说你如果同时给一个元素写

  1. {
  2. display:inline;
  3.  
  4. width:值;
  5.  
  6. height:值;
  7.  
  8. }

那么width和height属性就会失效;
2.display:block转换成块元素,换行;

将元素转化为块级元素,有宽和高的属性,元素前后都有一个换行符

3.display:inline-block内联块元素,既不换行又可以使用块元素所拥有的属性,类似于块元素加了浮动效果,但低版本浏览器对这个不支持。

表示元素 对内具有块级元素的宽和高的属性,即你可以对它设定宽和高,对外却具有内联元素的无换行符特性,这个属性IE8以上才支持,对于IE6和IE7不支持这个值,但是只要他们的元素触发了haslayout属性,他们的内联元素便具有display:inline的特性了

haslayout属性:hasLayout是IE浏览器专有的一个属性,用于CSS的解析引擎。有时候在IE下一些复杂的CSS设置解析起来会出现bug,其原因可能与hasLayout没有被自动触发有关,我们通过一些技巧,手动触发hasLayout属性就可以解决Bug了。这也算是针对IE下疑难杂症的特殊偏方了,很多时候,触发了hasLayout就可以药到病除了。

hasLayout的触发方法有很多种,例如设置width,height值,设置position为relative等。但如果设置了width,height,或position都会在触发hasLayout的同时带来一些副作用的。早期的一些工程师推荐使用“height:1%”来触发hasLayout,那时还没有出现IE7,而height属性在IE6下其实是按照"min-height"来解析的,所以只要对IE6进行hack,"* html{height:1%}"就可以触发hasLayout,同时又不带来副作用了。后来出现的IE7仍然存在很多hasLayout的问题,但IE7已经能够正确识别height属性了,“height:1%”的方法已经不再适用了。

于是,一个更好的解决方法开始流行,它使用了一个生僻的CSS属性zoom来触发hasLayout——"zoom:1"。使用"zoom:1"可以触发hasLayout,并且不会像height等属性一样引入副作用,更妙的是,我们可以不用CSS hack了。但"zoom:1"并不是一定可以触发hasLayout的。在极少数特殊的情况下,例如非常复杂的CSS设置,特别是使用DHTML的时候,使用"zoom:1"有时候也会无效,这时,我们可能需要借助更强大的"position:relative"来帮助触发hasLayout。总之,”zoom“是最常用,最安全,成本最少的触发hasLayout的方式,一般情况下,使用它就完全可以触发hasLayout了。如果遇到特殊情况,"zoom:1"无效的情况下,我们可以通过设置"position:relative"来触发hasLayout,尽管它会带来一点副作用

zoom是将原来的元素放大为当前你的多少倍

display:inline 和display:inline-block和display:block的区别的更多相关文章

  1. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  2. 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  3. display:block 和display:inline-block的区别和用法

    1).块状元素:(div,p,form,ul,ol,li) ,独占一行,默认情况width为100% 2).行内块状元素:(span,img,a),不会独占一行,相邻的元素一直排在同一行,排满了才会换 ...

  4. CSS中display对布局的影响以及元素display的默认值

    比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level):而span元素的默认display属性值为“inline”,称为“行内”元素.

  5. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  6. OC:Block语法、Block使用、Block实现数组排序

    Block //定义一个求两个数最大值函数 int maxValue (int ,int); //函数的实现 int maxValue (int a, int b){ return  a > b ...

  7. Lucene4.2源码解析之fdt和fdx文件的读写(续)——fdx文件存储一个个的Block,每个Block管理着一批Chunk,通过docID读取到document需要完成Segment、Block、Chunk、document四级查询,引入了LZ4算法对fdt的chunk docs进行了实时压缩/解压

    2       索引读取阶段 当希望通过一个DocId得到Doc的全部内容,那么就需要对fdx/fdt文件进行读操作了.具体的代码在CompressingStoredFieldsReader类里面.与 ...

  8. Lucene4.2源码解析之fdt和fdx文件的读写——fdx文件存储一个个的Block,每个Block管理着一批Chunk,通过docID读取到document需要完成Segment、Block、Chunk、document四级查询,引入了LZ4算法对fdt的chunk docs进行了实时压缩/解压

    前言 通常在搜索打分完毕后,IndexSearcher会返回一个docID序列,但是仅仅有docID我们是无法看到存储在索引中的document,这时候就需要通过docID来得到完整Document信 ...

  9. javascript学习内容--object.style.display="value" value值为“”none“隐藏”或 "block"显示

    <head> var mychar=document.getElementById("con"); function hidden(){ mychar.style.di ...

  10. CSS之display:block与display:inline-block

    1.<span style="display:block; border:red solid 1px; width:100px"></span> 行级元素是 ...

随机推荐

  1. YL-64 颜色传感器

    TCS3200颜色传感器是一款全彩的颜色检测器,包括了一块TAOS TCS3200RGB感应芯片和4个白光LED灯,TCS3200能在一定的范围内检测和测量几乎所有的可见光.它适合于色度计测量应用领域 ...

  2. laravel----------------自动生成模型,控制器,视图的操作步骤。

    首先要阅读这篇文章,你一定已经掌握了composer 和 artisan . 第一步,打开https://packagist.org/这个网址,在搜索框内输入way/generators 如图 第二步 ...

  3. [转]装完CentOS后,重新开机启动后显示: Initial setup of CentOS Linux 7 (core)

    转:装完Centos7提示Initial setup of CentOS Linux 7 (core)   在用U盘装完CentOS后,重新开机启动后显示: Initial setup of Cent ...

  4. [转]tomcat中的session管理

    转载地址:http://blog.csdn.net/iloveqing/article/details/1544958 当一个sesson开始时,Servlet容器会创建一个HttpSession对象 ...

  5. 【转】Struts1.x系列教程(7):Logic标签库

    转载地址:http://www.blogjava.net/nokiaguy/archive/2009/01/archive/2009/01/archive/2009/01/archive/2009/0 ...

  6. 解读HTML 5新语法 提高语义价值

    HTML 5的新标记 设计者们需要完成的任务是要给HTML 5开发一个更丰富的和更有含义的语义,当然可以想象这种新方案将会是很灵活和很高效的,同时与所有的现代互联网标准相适应.下面就是一些将要在HTM ...

  7. 复选框(checkbox)、单选框(radiobox)的使用

    复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...

  8. oracle分析函数

    在工作中使用到的分析函数主要有两种,一个是sum () over (partition by ……order by ……)另外一个就是 lead(lag)over (|partition by|ord ...

  9. 深入理解CSS网页布局-理论篇

    在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...

  10. Beaglebone Black–I2C 接 BMP280 获取当前温度

    我有两个含温度传感的模块,一个是AOSONG 奥松电子的 AM2320 温度湿度,另一个是九轴里面的 Bosch BMP280.由于 AM2320 用 I2C MODBUS,直接用 I2C Tools ...