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%，除非设定一个宽度

　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

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

　　inline元素的特点是： 

　　和其他元素都在一行上；

　　高，行高及顶和底边距不可改变；

　　宽度就是它的文字或图片的宽度，不可改变。
　　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是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); 

/* 不占据空间，无法点击 */ 

}