實例解析CSS中display屬性使用
作者：admin
這里向大家描述一下CSS中display屬性的用法，display是CSS重要的一個屬性,主要設置元素的浮動和顯示的特征，主要有block、inline和none等三個參數。
你對CSS中display屬性的用法是否了解，這里和大家分享一下CSS中display屬性的使用，display是CSS重要的一個屬性，主要設置元素的浮動和顯示的特征，相信本文介紹一定會讓你有所收獲。
實例解析CSS中display屬性使用
display屬性:
display是CSS重要的一個屬性,主要設置元素的浮動和顯示的特征，有以下幾個參數：
◆block:
當display被設置為block(塊)時，容器中所有的元素將會被當作一個單獨的塊，就像<div>元素一樣，它會在那個點被放入到頁面中。(實際上你可以設置<span>的display:block，使其可以像<div>一樣工作。
◆inline:
將display設置為inline，將使其行為和元素inline一樣---即使它是普通的塊元素如<div>，它也將會被組合成像<span>那樣的輸出流。
◆none:
***是display被設置：none,這時元素實際上就從頁面中被移走，它下面所在的元素就會被自動跟上填充。
您可以測試一下代碼查看display的效果：
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <!--www.Csscss.orgCSS在線-->
- <head>
- <scriptlanguagescriptlanguage="javascript">
- functiontoggleDisplay(me){
- if(me.style.display=="block"){
- me.style.display="inline";
- alert("文本現在是：'inline'.");
- }
- else{
- if(me.style.display=="inline"){
- me.style.display="none";
- alert("文本現在是:'none'.3秒鐘后自動重新顯示。");
- window.setTimeout("blueText.style.display='block';",3000,"javascript");
- }
- else{
- me.style.display="block";
- alert("文本現在是:'block'.");
- }
- }
- }
- </script>
- </head>
- <body>
- <div>在<spanidspanid="blueText"
- onclick_fckprotectedatt="%20onclick%3D%22toggleDisplay(this)%22"
- style="color:blue;position:relative;cursor:hand;">
- 藍色</span>文字上點擊來查看效果.</div>
- <br/><br/>
- <ahrefahref=http://www.CssCss.org
- _fcksavedurl="http://www.CssCss.org"
- _fcksavedurl="http://www.CssCss.org"
- _fcksavedurl="http://www.CssCss.org"target="_blank">Css在線</a>
- </body>
- </html>
本文來自CSS在線：http://www.csscss.org/cssarticle/20095921.shtml
【編輯推薦】
責任編輯：佚名
來源：
csscss.org
