使用盒模型

時間 2019-11-12

標籤使用模型简体版

原文原文鏈接

1、盒模型

　　盒子是css中的基礎概念，可見元素會在頁面中佔據一個矩形區域，這個區域就是元素的盒子。咱們須要使用它來配置元素的外觀以及文檔的總體佈局。css

2、使用盒模型

一、爲元素應用內邊距

　　應用內邊距會在元素的內容和邊框之間添加空白。html

屬性	說明	屬性值
padding-top	設置元素的上內邊距	長度值或者百分比
padding-right	設置元素的左內邊距	長度值或者百分比
padding-bottom	設置元素的下內邊距	長度值或者百分比
padding-left	設置元素的左內邊距	長度值或者百分比
padding	一次聲明全部的內邊距	1~4長度值或者百分比

　　若是使用百分數值指定內邊距，百分數老是和包含塊（父元素的內容盒子成爲子元素的塊容器）的寬度有關，高度不考慮在內。此處的div元素的padding 與其父元素的content區域的寬度有關係。瀏覽器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7  div{
 8  border:red 2px solid;
 9  width:100px;
10  height: 200px;
11  background: yellow;
12  background-clip: content-box;
13  padding: 10%;
14         }
15     </style>
16 </head>
17 <body>
18     <div>
19       
22     </div>
23 </body>
24 </html>

　　 padding屬性指定四個值，分別是上、右、下、左的內邊距，若是省略左邊的值，默認使用右邊的，若是省略下邊的，默認使用上邊的，若是隻有一個值，那麼四個內邊距都是這個值。佈局

二、爲元素設置外邊距

　　外邊距是元素邊框和頁面上圍繞在它周圍的全部東西之間的空白區域。　　spa

屬性	說明	屬性值
margin-top	設置元素的上外邊距	長度值或者百分比
margin-right	設置元素的右外邊距	長度值或者百分比
margin-bottom	設置元素的下外邊距	長度值或者百分比
margin-left	設置元素的左外邊距	長度值或者百分比
margin	一次設置元素的全部外邊距	1~4個長度值或者百分比

　　設置百分數值時，百分數的值和包含塊的寬度有關。當一次設置多個外邊距時，和padding屬性相似。當爲display設置成inline的元素設置外邊距，頂邊和底邊的外邊距不會顯示。3d

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7  span{
 8  background: blue;
 9          /* margin: 10px;*/
10         }
11     </style>
12 </head>
13 <body>
14     <span>I  love China!</span>
15     <span>I  love China!</span>
16 </body>
17 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7  span{
 8  background: blue;
 9  margin: 10px;
10         }
11     </style>
12 </head>
13 <body>
14     <span>I  love China!</span>
15     <span>I  love China!</span>
16 </body>
17 </html>

三、控制元素的尺寸

　　瀏覽器會基於頁面上內容的流設置元素的尺寸，使用尺寸相關的屬性能夠覆蓋這些行爲。　code

屬性	說明	屬性值
width	設置元素的寬度	auto、長度值或者百分數
height	設置元素的高度	auto、長度值或者百分數
min-width	設置元素的最小可接受的寬度	auto、長度值或者百分數
min-height	設置元素最小可接受的高度	auto、長度值或者百分數
max-width	設置元素最大可接受的寬度	auto、長度值或者百分數
max-height	設置元素最大可接受的高度	auto、長度值或者百分數
box-sizing	設置尺寸應用的元素盒子的那一部分	content-box、border-boxhtm

　　屬性值爲auto時，瀏覽器會爲咱們設置好元素的寬度和高度。百分數值是根據包含塊的寬度來計算的（高度也是根據包含塊的高度來計算的）。　　blog

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">        
 7  img{    
 8  width: 100%;        
 9  min-width: 10px;            
10  max-width: 1000px;
11         }
12     </style>
13 </head>
14 <body>
15         <img src="1.png" alt="">
16 </body>
17 </html>

　　若是包含塊沒有指定確切的高度（非百分比），那麼不要使用百分比來設置元素的高度，由於包含塊的高度是由其所包含的元素的高度決定的。ip

　當包含塊只有一個元素的時候，咱們將元素的高度設置爲100%時，可是包含塊的高度默認是等於元素的高度因此沒有做用。　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7  div {
 8  width: 30%;
 9  height: 100%;
10  background: red;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="div1">div1</div>
16 </body>
17 </html>

　　可是包含塊包含多個塊元素時，咱們給元素的高度設置爲100%，而後包含塊的高度又是其所包含的全部的元素的高度，會形成無限循環去計算這個高度，因此這個高度計算不會生效。　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"> div { width: 30%; height: 100%; background: red;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

　　咱們能夠給html設置高度爲100%，這樣html的高度等於窗口的大小。

　　box-sizing屬性

　　　其中content-box是默認值。　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">    
 7  img{
 8  background: red;
 9  border: 2px solid yellow;
10          }
11  img.first{    
12  width: 100px;        
13  height: 100px;
14  box-sizing: border-box;
15          }
16  img.second{
17  width: 100px;        
18  height: 100px;
19  box-sizing: content-box;
20          }
21     </style>
22 </head>
23 <body>
24         <img src="1.png" alt="" class="first">
25         <img src="1.png" alt="" class="second">
26 </body>
27 </html>

四、處理瀏覽器溢出

　　若是設置了元素的尺寸，當內容太大，元素的內容盒沒法徹底顯示的時，默認處理方式是內容溢出。能夠經過overfolow-x,overflow-y,overflow屬性來設置溢出方式，overfolow-x,oberflow-y屬性分別設置水平和方向的溢出方式,overflow能夠一次設置兩個方向的溢出方式，屬性值以下：

　　其中當屬性值設置爲scroll時，一定會有滾動條。當設置爲auto時，只有內容溢出太會顯示滾動條。

五、設置元素的可見性　

　　visibility 屬性規定元素是否可見。

　　提示：即便不可見的元素也會佔據頁面上的空間。請使用 "display" 屬性應用none來建立不佔據頁面空間的不可見元素。此外，還可使用全局屬性hidden來建立不佔據頁面空間的不可見元素。

 1 <html>
 2     <head>
 3         <style type="text/css">
 4  .coll  5         {
 6  visibility:collapse  7         }
 8         </style>
 9     </head>
10     <body>
11         <table border="1">
12             <tr class="coll">
13                 <td>Adams</td>
14                 <td>John</td>
15             </tr>
16             <tr>
17                 <td class="coll">Bush</td>
18                 <td>George</td>
19             </tr>
20         </table>
21     </body>
22 </html>

六、設置元素的盒類型

　　display 屬性規定元素的盒類型。

　　當display設置成run-in值時，元素的盒類型取決於周圍的元素，稱做插入元素。主流瀏覽器對該屬性值並不友好。

　　1）當插入元素包含一個display屬性值爲block的元素，那麼插入元素就是塊級元素。

　　2）當插入元素周圍的相鄰兄弟元素是塊級元素，那麼插入元素就是兄弟元素中第一個行內元素。

　　3）其餘狀況下，插入元素均做爲塊級元素對待。

七、建立浮動盒　

　　float 屬性定義元素在哪一個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。

　　註釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間爲止。

　　　left 元素在所在行漂浮起來，移動元素，使元素左邊界挨着包含塊的左邊界或者另外一個元素的右邊界。該元素的位置能夠被其餘元素佔領，堆疊在其餘元素的上面。

　　 right 元素在所在行漂浮起來移動元素，使元素的右邊界挨着包含塊的右邊界或者另外一個元素的左邊界。該元素的位置能夠被其餘元素佔領，堆疊在其餘元素的上面。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <style type="text/css">
 7  div{
 8  width: 30%;
 9  height: 100px;
10  background: red;
11         }
12  .div1{
13  float: left;
14  background: rgba(0,0,0,0.2);
15 
16         }
17  .div2{        
18  background: yellow;
19         }
20  .div3{
21                 
22             }
23         </style>
24     </head>
25     <body>
26         <div class="div1"></div>
27         <div class="div2"></div>
28         <div class="div3"></div>
29     </body>
30 </html>

　　因爲給div1設置了浮動，div1漂浮移動到所在行的最左邊，div2會佔據原來div1的位置。將div1的顏色設置成透明的，因此看見的是div2的顏色。

八、阻止浮動堆疊

　　clear 屬性規定元素的哪一側不容許其餘浮動元素。若是聲明爲左邊或右邊清除，會使元素的上外邊框邊界恰好在該邊上浮動元素的下外邊距邊界之下。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <style type="text/css">
 7  div{
 8  width: 30%;
 9  height: 100px;
10  background: red;
11         }
12  .div1{
13  float: left;
14  background: rgba(0,0,0,0.2);
15 
16         }
17  .div2{    
18  clear: left;    
19  background: yellow;
20         }
21  .div3{
22                 
23             }
24         </style>
25     </head>
26     <body>
27         <div class="div1"></div>
28         <div class="div2"></div>
29         <div class="div3"></div>
30     </body>
31 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。