display属性

	display:设置一个元素应该如何显示
			    none         不显示   不占空间
			    block           显示为块元素
			    inline   宽高设置无效  显示为行(内联)元素
			    inline-block    显示为行内块级元素
			    inhrite         继承父级
			visibility:可见性
			    hidden         不可见  占空间  相当于透明的
			    visible         可见的
			opacity:透明度   
			    值      介于0到1之间      
				 0完全透明    1完全不透明  
				  子元素继承
类似于颜色中的 rgba       
red #ffffff rgb() rgba(0-255,0-255,0-255,(0-1))	

块级元素(block)特性：
	 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
	 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
	1.和相邻的内联元素在同一行;
	2.宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , 
code , dfn , em , font , i , img , input , kbd , 
label , q , s , samp , select , small , span , 
strike , strong , sub , sup ,textarea , tt , u , 
var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
applet ,button ,del ,iframe , ins ,map ,object ,
 script
CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
			主要用的CSS样式有以下三个：
			    display:block  -- 显示为块级元素
			    display:inline  -- 显示为内联元素
			    display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
			    我们常将
      元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。 对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。 visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于： 1、display:none 元素不再占用空间。 2、visibility: hidden 使元素在网页上不可见，但仍占用空间。 然而，visibility 还可能取值为 collapse 。 当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。 在不同浏览器下，对 visibility: collapse 的处理方式不同： 1、visibility: collapse 的上述特性仅在 Firefox 下起作用。 2、在 IE 即使设置了 visibility: collapse，还是会显示元素。 3、在 Chrome 下，即使会将元素隐藏，但无论是否是与 table 相关的元素，visibility: collapse 与 visibility: hidden 没有什么区别，即仍会占用空间。

相关

标签