css属性-display:inline、block、inline-block的区别

css原理小记
2016.7.11
-----------------------------------------------------------------------
Layout：
“Layout”是一个 IE/Win 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等。
  微软的开发者们认为元素都应该可以拥有一个“属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了  true 之时。
  给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性，没有办法设置 hasLayout = false ， 除非把一开始那些触发 hasLayout = true 的 
  CSS 属性去除。
  种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有“layout”。 
------------------------------------------------------------------------

display:inline、block、inline-block的区别

display:block就是将元素显示为块级元素.
block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度
　　

,

,

,

,

和
• 是块元素的例子。
  
  
  display:inline就是将元素显示为行内元素.
  　　inline元素的特点是： 
  　　和其他元素都在一行上；
  　　高，行高及顶和底边距不可改变；
  　　宽度就是它的文字或图片的宽度，不可改变。
  

  　　, , , , , 和是inline元素的例子。

  
  

  display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
  
  
  　　inline-block的元素特点
  　　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但 可以设置宽度和高度地块元素的属性)
  
  　　并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的。
  
         但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。
  
  
  -------------------------------------------------------------------------------
  
  
  css回流和渲染等知识：
  关于回流：说到页面结构发生变化的时候，包括宽高、位置、字体大小，浏览器就会回过头来重新渲染。
  大量的透明，阴影，动画样式，对网页影响还是很大的。
  样式表一堆的网站普遍要卡一点。比如贴吧。所以我一般都是用abp一点点屏蔽。屏蔽到不影响大部分功能，界面简单点也要打开快
  规定作用域，作用的范围
  
  不同：
  
  display:none和visibility:hidden 
  目前，我所知道的不同有三点（欢迎补充）： 
  1.空间占据 
  2.回流与渲染 
  3.株连性
  
  对比总结： 
  display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。 
  visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）
  
  
  各种方法论：
  
  { display: none; /* 不占据空间，无法点击 */ } 
  /********************************************************************************/ 
  { visibility: hidden; /* 占据空间，无法点击 */ } 
  /********************************************************************************/ 
  { position: absolute; top: -999em; /* 不占据空间，无法点击 */ } 
  /********************************************************************************/ 
  { position: relative; top: -999em; /* 占据空间，无法点击 */ } 
  /********************************************************************************/ 
  { position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ } 
  /********************************************************************************/ 
  { height: 0; overflow: hidden; /* 不占据空间，无法点击 */ } 
  /********************************************************************************/ 
  { opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ } 
  /********************************************************************************/ 
  { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ } 
  
  /********************************************************************************/ 
  { 
  zoom: 0.001; 
  -moz-transform: scale(0); 
  -webkit-transform: scale(0); 
  -o-transform: scale(0); 
  transform: scale(0); 
  /* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ 
  } 
  /********************************************************************************/ 
  { 
  position: absolute; 
  zoom: 0.001; 
  -moz-transform: scale(0); 
  -webkit-transform: scale(0); 
  -o-transform: scale(0); 
  transform: scale(0); 
  /* 不占据空间，无法点击 */ 
  }