欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS使用盒模型實(shí)例講解

  發(fā)布時(shí)間：2016-07-20 09:36:04   作者：佚名   我要評(píng)論
下面小編就為大家?guī)硪黄狢SS使用盒模型實(shí)例分析。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

盒子是CSS中的基礎(chǔ)概念，我們需要使用它來配置元素的外觀以及文檔的整體布局。

1. 為元素應(yīng)用內(nèi)邊距

應(yīng)用內(nèi)邊距會(huì)在元素內(nèi)容和邊距之間添加空白。我們可以為內(nèi)容盒的每個(gè)邊界單獨(dú)設(shè)置內(nèi)邊距，或者使用 padding 簡寫屬性在一條聲明中設(shè)置所有的值。

如果使用百分?jǐn)?shù)值指定內(nèi)邊距，百分?jǐn)?shù)總是根包含塊的寬度相關(guān)，高度不考慮在內(nèi)。下面代碼展示了如何為元素應(yīng)用內(nèi)邊距。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p {   
  8.             border:10px double black;   
  9.             background-color: lightgray;   
  10.             background-clip: content-box;   
  11.             width: 380px;   
  12.             padding-top: 0.5em;   
  13.             padding-bottom: 0.3em;   
  14.             padding-left: 0.8em;   
  15.             padding-right: 0.6em;   
  16.         }   
  17.     </style>  
  18. </head>  
  19. <body>  
  20. <div>  
  21.     <p>  
  22.         15歲的時(shí)候再得到那個(gè)5歲的時(shí)候熱愛的布娃娃，65歲的時(shí)候終于有錢買25歲的時(shí)候熱愛的那條裙子，又有什么意義。   
  23.         什么都可以從頭再來，只有青春不能。   
  24.         那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。   
  25.     </p>  
  26. </div>  
  27. </body>  
  28. </html>  

在代碼中，為盒子的每條邊應(yīng)用了不同的內(nèi)邊距，從下面的效果圖可以看出效果。此外，設(shè)置了 background-clip 屬性，因此內(nèi)邊距區(qū)域不會(huì)顯示背景顏色，這樣可以突出內(nèi)邊距的效果。

也可以使用 padding 簡寫屬性在一條聲明中為四條邊設(shè)置內(nèi)邊距?？梢詾檫@個(gè)屬性指定1~4 個(gè)值。 如果指定4個(gè)值，那么它們分別代表頂邊、右邊、底邊和左邊的內(nèi)邊距。如果省略一個(gè)值，則最佳搭配方案如下：省略左邊的值，默認(rèn)使用右邊的值；省略底邊的值，默認(rèn)使用頂邊的值。如果只給一個(gè)值，則四條邊的內(nèi)邊距都是這個(gè)值。

下面代碼清單展示了如何使用 padding 簡寫屬性。這個(gè)示例中還添加了圓角邊框，展示了如何使用paddding以確保邊框不會(huì)在元素內(nèi)容之上。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p {   
  8.             border:10px solid black;   
  9.             background: lightgray;   
  10.             width: 380px;   
  11.             border-radius:1em 4em 1em 4em;   
  12.             padding: 5px 25px 5px 40px;   
  13.         }   
  14.     </style>  
  15. </head>  
  16. <body>  
  17. <div>  
  18.     <p>  
  19.         15歲的時(shí)候再得到那個(gè)5歲的時(shí)候熱愛的布娃娃，65歲的時(shí)候終于有錢買25歲的時(shí)候熱愛的那條裙子，又有什么意義。   
  20.         什么都可以從頭再來，只有青春不能。   
  21.         那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。   
  22.     </p>  
  23. </div>  
  24. </body>  
  25. </html>  

效果如下圖所示，顯示了瀏覽器如何顯示代碼中指定的圓角邊框和內(nèi)邊距。

如果不設(shè)置內(nèi)邊距，邊框就會(huì)繪制在文本上。設(shè)置內(nèi)邊距就能確保內(nèi)容和邊框之間留出足夠的空間，不會(huì)出現(xiàn)這種情況。

 

2. 為元素應(yīng)用外邊距

外邊距是元素邊框和頁面上圍繞在它周圍的所有東西之間的空白區(qū)域。圍繞在它周圍的東西包括其他元素和它的父元素。

跟內(nèi)邊距屬性相似，即使是為頂邊和底邊應(yīng)用內(nèi)邊距，百分?jǐn)?shù)值是和包含塊的寬度相關(guān)的。下面代碼清單展示了如何為元素添加外邊距：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         img{   
  8.             border: 4px solid black;   
  9.             background: lightgray;   
  10.             width: 150px;   
  11.         }   
  12.         #second img { margin: 4px 20px;}   
  13.     </style>  
  14. </head>  
  15. <body>  
  16. <div>  
  17.     <div id="first">  
  18.         <img src="imgs/banana.png" alt="small banana">  
  19.         <img src="imgs/banana.png" alt="small banana">  
  20.     </div>  
  21.     <div id="second">  
  22.         <img src="imgs/banana.png" alt="small banana">  
  23.         <img src="imgs/banana.png" alt="small banana">  
  24.     </div>  
  25. </div>  
  26. </body>  
  27. </html>  

在代碼中，下面的兩個(gè)img元素，為其頂邊和底邊應(yīng)用了4像素的外邊距，為左邊和右邊應(yīng)用了20像素的外邊距?？梢詮南旅娴男Ч麍D中看到外邊距圍繞元素制造的空白區(qū)域，途中上面的兩個(gè)img元素和下面的兩個(gè)img元素分部顯示的是設(shè)置外邊距前后的img元素。

外邊距有時(shí)候不顯示，即使設(shè)置了某個(gè)外邊距屬性的值。例如，為 display 屬性的值設(shè)置為 inline 的元素應(yīng)用外邊距的時(shí)候，頂邊和底邊的外邊距就不會(huì)顯示。

 

3. 控制元素的尺寸

瀏覽器會(huì)基于頁面上內(nèi)容的流設(shè)置元素的尺寸。有幾條詳細(xì)規(guī)則是瀏覽器在分配尺寸的時(shí)候必須遵循的。使用尺寸相關(guān)的屬性可以覆蓋這些行為。

前三個(gè)屬性的默認(rèn)值都是 auto，意思是瀏覽器會(huì)為我們?cè)O(shè)置好元素的寬度和高度。也可以是用長度值和百分?jǐn)?shù)值顯式指定尺寸。百分?jǐn)?shù)值是根據(jù)包含塊的寬度來計(jì)算的（處理元素的高度也是根據(jù)這個(gè)寬度來）。下面的代碼清單展示了如何為元素設(shè)置尺寸。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         div { width:75%; height: 100px; border: thin solid lightseagreen;}   
  8.         img { background: lightgray; border: 4px solid blueviolet; margin: 2px; height: 50%;}   
  9.         #first { box-sizing: border-box; width: 50%;}   
  10.         #second { box-sizing: content-box;}   
  11.     </style>  
  12. </head>  
  13. <body>  
  14.     <div>  
  15.         <img id="first" src="imgs/banana.png" alt="small banana">  
  16.         <img id="second" src="imgs/banana.png" alt="small banana">  
  17.     </div>  
  18. </body>  
  19. </html>  

上述示例代碼中有三個(gè)關(guān)鍵元素，一個(gè)div元素包含了兩個(gè)img元素。顯示效果如下，展示了瀏覽器如何顯示這些元素。

div元素是body元素的子元素。當(dāng)將div元素的寬度表示為75%的時(shí)候，意思是告訴瀏覽器將div的寬度設(shè)置為包含塊（此處是body內(nèi)容盒）寬度的75%，而不論其具體值是多少。如果用戶調(diào)整了瀏覽器窗口，body元素也會(huì)相應(yīng)被調(diào)整，以確保div元素的寬度總是body內(nèi)容盒寬度的75%。

 

3.1 設(shè)置一定尺寸的盒子

前面示例中兩個(gè)img元素設(shè)置了相同的高度值（50%），但兩個(gè)圖片的高度在屏幕上看起來不一樣。這是因?yàn)槭褂胋ox-sizing屬性改變了其中一個(gè)元素應(yīng)用尺寸屬性的區(qū)域。

默認(rèn)情況下，寬度和高度是需要計(jì)算的，之后才能應(yīng)用到元素的內(nèi)容盒。這里說的是如果設(shè)置了元素的高度屬性是100px，那么屏幕上的真實(shí)高度就是100px，這也算上了頂邊和底邊的內(nèi)邊距、邊框和外邊距的值。box-sizing屬性允許指定尺寸樣式應(yīng)用到元素盒子的具體區(qū)域，也就是不需要自己計(jì)算某些值。

 

3.2 設(shè)置最小和最大尺寸

可以使用最小和最大相關(guān)屬性為瀏覽器調(diào)整元素尺寸設(shè)置一定的限制。這讓瀏覽器對(duì)于如何應(yīng)用尺寸調(diào)整屬性有了一定的自主權(quán)。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         img {   
  8.             background: lightgray;   
  9.             border: 4px solid blueviolet;   
  10.             margin: 2px;   
  11.             box-sizing: border-box;   
  12.             min-width: 100px;   
  13.             width: 50%;   
  14.             max-width: 200px;   
  15.         }   
  16.     </style>  
  17. </head>  
  18. <body>  
  19.     <div>  
  20.         <img id="first" src="imgs/banana.png" alt="small banana">  
  21.     </div>  
  22. </body>  
  23. </html>  

在代碼中，為一個(gè)img元素應(yīng)用了mix-width 和 max-width屬性，并將其出事寬度設(shè)置為包含塊的50%。這樣瀏覽器就有了一定靈活性來調(diào)整圖像尺寸，使其在代碼中定義的最大尺寸和最小尺寸范圍內(nèi)保持50%的關(guān)系。瀏覽器會(huì)利用這種靈活性保留圖像的高寬比，如下面的顯示效果所示：

 PS:瀏覽器對(duì)box-sizing屬性的支持情況各不相同。

 

4. 處理溢出內(nèi)容

如果嘗試改變?cè)氐某叽?，很快就?huì)到達(dá)某一個(gè)點(diǎn)：內(nèi)容太大，已經(jīng)無法完全顯示在元素的內(nèi)容盒中。這時(shí)的默認(rèn)處理方式是內(nèi)容溢出，并繼續(xù)顯示。下面的代碼清單創(chuàng)建了一個(gè)固定尺寸的元素，由于尺寸太小，無法顯示其中的內(nèi)容。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p {width: 200px;  height: 100px; border:medium double black;}   
  8.     </style>  
  9. </head>  
  10. <body>  
  11. <p>  
  12.     你的特別不是因?yàn)槟阍趧?chuàng)業(yè)，不是因?yàn)槟氵M(jìn)了牛企，不是因?yàn)槟愕呐ffer，而是因?yàn)槟憔褪悄?，?jiān)信自己的特別，堅(jiān)信自己的內(nèi)心，勇敢做自己。   
  13.     IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
  14. </p>  
  15. </body>  
  16. </html>  

代碼中為p元素的width 和 height 屬性指定了絕對(duì)值，最終顯示在瀏覽器中的顯示效果如下圖所示：

可以使用 overflow 屬性改變這種行為，下表列出了相關(guān)的 overflow 屬性。

 

overflow-x 和 overflow-y 屬性分部設(shè)置水平方向和垂直方向的溢出方式，overflow 簡寫屬性可在一條聲明中聲明兩個(gè)方向的溢出方式。下表展示了這三個(gè)屬性可能的取值。

 

下面代碼展示了溢出屬性的用法：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p {width: 200px;  height: 100px; border:medium double black;}   
  8.         p:first-child { overflow: hidden;}   
  9.         p:last-child { overflow: scroll;}   
  10.     </style>  
  11. </head>  
  12. <body>  
  13. <p>  
  14.     你的特別不是因?yàn)槟阍趧?chuàng)業(yè)，不是因?yàn)槟氵M(jìn)了牛企，不是因?yàn)槟愕呐ffer，而是因?yàn)槟憔褪悄悖瑘?jiān)信自己的特別，堅(jiān)信自己的內(nèi)心，勇敢做自己。   
  15.     IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
  16. </p>  
  17. <p>  
  18.     你的特別不是因?yàn)槟阍趧?chuàng)業(yè)，不是因?yàn)槟氵M(jìn)了牛企，不是因?yàn)槟愕呐ffer，而是因?yàn)槟憔褪悄悖瑘?jiān)信自己的特別，堅(jiān)信自己的內(nèi)心，勇敢做自己。   
  19.     IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
  20. </p>  
  21. </body>  
  22. </html>  

 

5. 控制元素的可見性

可以使用 visibility 屬性控制元素的可見性。這個(gè)屬性跟Javascript一起使用能創(chuàng)建一些比較復(fù)雜的效果。其取值如下：

下面的代碼展示了如何使用JavaScript和幾個(gè)按鈕元素改變?cè)氐目梢娦浴?/p>

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         tr > th { text-align: left; background: gray; color: white;}   
  8.         tr > th:only-of-type { text-align: right; background: lightgray; color: gray;}   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <table>  
  13.     <tr>  
  14.         <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>  
  15.     </tr>  
  16.     <tr id="firstchoice">  
  17.         <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>  
  18.     </tr>  
  19.     <tr>  
  20.         <th>2nd Favorite</th><td>Oranges</td><td>Orange</td><td>Large</td>  
  21.     </tr>  
  22. </table>  
  23. <p>  
  24.     <button>Visible</button>  
  25.     <button>Collapse</button>  
  26.     <button>Hidden</button>  
  27. </p>  
  28. <script>  
  29.     var buttons = document.getElementsByTagName("button");   
  30.     for(var i = 0;i < buttons.length; i++){   
  31.         buttons[i].onclick = function(e){   
  32.             document.getElementById("firstchoice").style.visibility = e.target.innerHTML;   
  33.         }   
  34.     }   
  35. </script>  
  36. </body>  
  37. </html>  

collapse 值只能應(yīng)用到表相關(guān)元素，如tr 和 td。

 

6. 設(shè)置元素的盒類型

display 屬性提供了一種改變?cè)睾蓄愋偷姆绞?，這想要會(huì)改變?cè)卦陧撁嫔系牟季址绞?。下表列出了display 屬性允許的取值。

 

6.1 認(rèn)識(shí)塊級(jí)元素

將 display屬性設(shè)置為block值會(huì)創(chuàng)建一個(gè)塊級(jí)元素。塊級(jí)元素會(huì)在垂直方向跟周圍元素有所區(qū)別。通常在元素前后放置換行符也能達(dá)到這種效果，在元素和周圍元素之間制造分割的感受，就像文本中的段落。p元素表示段落，其默認(rèn)樣式約定中就包括 display 屬性取 block 值。不過block 值可應(yīng)用到所有元素，其用法如下面代碼所示：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p { border: medium solid black;}   
  8.         span { display: block; border: medium double black; margin: 2px;}   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <p>  
  13. 你的特別不是因?yàn)槟阍趧?chuàng)業(yè)，不是因?yàn)槟氵M(jìn)了牛企，不是因?yàn)槟愕呐ffer，而是因?yàn)槟憔褪悄?，?jiān)信自己的特別，堅(jiān)信自己的內(nèi)心，勇敢做自己。   
  14. <span>IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.</span>  
  15. </p>  
  16. </body>  
  17. </html>  

可以從下圖看到span 元素的 display屬性 是否設(shè)置為 block 值的差別。

 

6.2 認(rèn)識(shí)行內(nèi)元素

將 display 屬性設(shè)置為 inline 值會(huì)創(chuàng)建一個(gè)行內(nèi)元素，它在視覺上跟周圍內(nèi)容的顯示沒有區(qū)別。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p { display: inline;}   
  8.         span { display: inline; border: medium double black; margin: 2em; width: 10em; height: 2em;}   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <p>  
  13. 你的特別不是因?yàn)槟阍趧?chuàng)業(yè)，不是因?yàn)槟氵M(jìn)了牛企，不是因?yàn)槟愕呐ffer，而是因?yàn)槟憔褪悄?，?jiān)信自己的特別，堅(jiān)信自己的內(nèi)心，勇敢做自己。   
  14. <span>IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.</span>  
  15. </p>  
  16. </body>  
  17. </html>  

在上述代碼中，為p元素和span元素同時(shí)使用了inline值，從下面的效果圖可以看出應(yīng)用樣式后的效果：p元素和 span元素中的文本跟剩余文本沒有分開，都顯示在一起。

使用 inline 值的時(shí)候，瀏覽器會(huì)忽略某些值，如 width、height 和margin 。上面的示例代碼中，為span 元素定義的這三個(gè)屬性的值都沒有應(yīng)用到頁面布局中。

 

6.3 認(rèn)識(shí)行內(nèi)-塊級(jí)元素

將display 屬性設(shè)置為 inline-block 值會(huì)創(chuàng)建一個(gè)其盒子混合了塊和行內(nèi)特性的元素。盒子整體上作為行內(nèi)元素顯示，這意味著垂直方向上該元素和周圍的內(nèi)容并排顯示，沒有區(qū)別。但盒子內(nèi)部作為塊級(jí)元素顯示，這樣，width、height 和 margin 屬性都能應(yīng)用到盒子上。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p { display: inline;}   
  8.         span { display: inline-block; border: medium double black; margin: 2em; width: 10em; height: 2em;}   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <p>  
  13.     15歲的時(shí)候再得到那個(gè)5歲的時(shí)候熱愛的布娃娃，65歲的時(shí)候終于有錢買25歲的時(shí)候熱愛的那條裙子，又有什么意義。   
  14.     什么都可以從頭再來，<span>只有青春不能。</span>那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。   
  15. </p>  
  16. </body>  
  17. </html>  

 

6.4 認(rèn)識(shí)插入元素

display 屬性設(shè)置為run-in 值會(huì)創(chuàng)建一個(gè)這樣的元素：其盒子類型取決于周圍元素。

下面代碼展示了一個(gè)相鄰兄弟元素為塊級(jí)元素的插入元素：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p { display: block;}   
  8.         span { display:run-in; border: medium double black;}   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <p>  
  13.     By the time we add the countless types of apples, oranges, and other well-know fruit, we are faced with thousands of choices.   
  14. </p>  
  15. <span>  
  16.     There are lots of different kinds of fruit - there are over 500 varieties of banana alone.   
  17. </span>  
  18. <div>Hello </div>  
  19. </body>  
  20. </html>  

下面代碼展示了一個(gè)相鄰兄弟元素為行內(nèi)元素的插入元素，修改上面p的CSS代碼：

 p { display: inline;}

 

6.5 隱藏元素

將display屬性設(shè)置為none值就是告訴瀏覽器不要為元素創(chuàng)建任何類型的盒子，也就是說元素沒有后代元素。這時(shí)元素在頁面布局中不占據(jù)任何空間。

 

7. 創(chuàng)建浮動(dòng)盒

可以使用 float 屬性創(chuàng)建浮動(dòng)盒，浮動(dòng)盒會(huì)將元素的左邊界或者右邊界移動(dòng)到包含塊或另一個(gè)浮動(dòng)盒的邊界。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p.toggle {   
  8.             float: left;   
  9.             border: medium double green;   
  10.             width: 40%;   
  11.             margin: 2px;   
  12.             padding: 2px;   
  13.         }   
  14.     </style>  
  15. </head>  
  16. <body>  
  17. <p class="toggle">  
  18.     15歲的時(shí)候再得到那個(gè)5歲的時(shí)候熱愛的布娃娃，65歲的時(shí)候終于有錢買25歲的時(shí)候熱愛的那條裙子，又有什么意義。   
  19.     什么都可以從頭再來，只有青春不能。那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。   
  20. </p>  
  21. <p>  
  22.     你的特別不是因?yàn)槟阍趧?chuàng)業(yè)，不是因?yàn)槟氵M(jìn)了牛企，不是因?yàn)槟愕呐ffer，而是因?yàn)槟憔褪悄?，?jiān)信自己的特別，堅(jiān)信自己的內(nèi)心，勇敢做自己。   
  23.     IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
  24. </p>  
  25. <button>Left</button>  
  26. <button>Right</button>  
  27. <button>None</button>  
  28. <script>  
  29.     var buttons = document.getElementsByTagName("button");   
  30.     for (var i = 0; i <buttons.length; i++){   
  31.         buttons[i].onclick = function(e){   
  32.             var elements = document.getElementsByClassName("toggle");   
  33.             for(var j = 0; j < elements.length; j++){   
  34.                 elements[j].style.cssFloat = e.target.innerHTML;   
  35.             }   
  36.         }   
  37.     }   
  38. </script>  
  39. </body>  
  40. </html>  

 

阻止浮動(dòng)元素堆疊

如果設(shè)置了多個(gè)浮動(dòng)元素，默認(rèn)情況下，它們會(huì)一個(gè)挨著一個(gè)的堆疊在一起。使用clear屬性可以阻止出現(xiàn)這種情況。clear屬性可以指定浮動(dòng)元素的一個(gè)編輯或者兩個(gè)編輯不能挨著另一個(gè)浮動(dòng)元素。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Example</title>  
  6.     <style type="text/css">  
  7.         p.toggle {   
  8.             float: left;   
  9.             border: medium double green;   
  10.             width: 40%;   
  11.             margin: 2px;   
  12.             padding: 2px;   
  13.         }   
  14.         p.clear {clear: left;}   
  15.     </style>  
  16. </head>  
  17. <body>  
  18. <p class="toggle">  
  19.     15歲的時(shí)候再得到那個(gè)5歲的時(shí)候熱愛的布娃娃，65歲的時(shí)候終于有錢買25歲的時(shí)候熱愛的那條裙子，又有什么意義。   
  20. </p>  
  21. <p class="toggle clear">  
  22.     什么都可以從頭再來，只有青春不能。那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。   
  23. </p>  
  24.   
  25. <p>  
  26.     你的特別不是因?yàn)槟阍趧?chuàng)業(yè)，不是因?yàn)槟氵M(jìn)了牛企，不是因?yàn)槟愕呐ffer，而是因?yàn)槟憔褪悄?，?jiān)信自己的特別，堅(jiān)信自己的內(nèi)心，勇敢做自己。   
  27.     IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.   
  28. </p>  
  29. <button>Left</button>  
  30. <button>Right</button>  
  31. <button>None</button>  
  32. <script>  
  33.     var buttons = document.getElementsByTagName("button");   
  34.     for (var i = 0; i <buttons.length; i++){   
  35.         buttons[i].onclick = function(e){   
  36.             var elements = document.getElementsByClassName("toggle");   
  37.             for(var j = 0; j < elements.length; j++){   
  38.                 elements[j].style.cssFloat = e.target.innerHTML;   
  39.             }   
  40.         }   
  41.     }   
  42. </script>  
  43. </body>  
  44. </html>  

這里的代碼示例是對(duì)前一個(gè)例子的簡單擴(kuò)展，只是添加了一個(gè)新的樣式，為第二個(gè)p元素清除了左邊界的浮動(dòng)元素。從下面的效果圖可以看出這個(gè)設(shè)置引起了頁面布局的改變。（現(xiàn)在兩個(gè)元素都浮動(dòng)在包含塊的左邊界）

 第二個(gè)p元素的左邊界不允許挨著另一個(gè)浮動(dòng)元素，因此瀏覽器將這個(gè)元素已到了頁面下方。元素的右邊界沒有清楚，也就是說如果將兩個(gè)p元素的float屬性設(shè)置為right，它們?cè)陧撁嫔线€是會(huì)挨著。

以上這篇CSS使用盒模型實(shí)例分析就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/luka/archive/2016/07/19/5685363.html

相關(guān)文章

最新評(píng)論