輕輕鬆鬆學CSS:盒子模型(Box Model)

時間 2020-09-12

標籤輕輕鬆鬆 css 盒子模型 box model 欄目 CSS 简体版

原文原文鏈接

全部HTML元素均可以當作盒子，在CSS中，"box model"這一術語是用來設計和佈局的。
盒子模型包括：
一、margin，外邊距
二、border，邊框
三、padding，內邊距
四、content，內容html

標準盒模型是大多數瀏覽器採用的W3C標準模型
   box-sizing:content-box;
   width僅僅包含內容區域的寬度，
   height僅僅包含內容區域的高度
    盒子(不考慮外邊距的可視尺寸)的寬度=width+padding(左右內邊距的寬度）+border(左右邊框的寬度)
    盒子(不考慮外邊距的可視尺寸)的高度=height+padding(左右內邊距的高度）+border(左右邊框的高度)
   就像洋蔥同樣層層扒皮，每層都要算瀏覽器

怪異盒模型是IE中採用Microsoft本身的標準
   box-sizing:border-box;
   width不只包含內容區域的寬度，還包括padding(左右)、border(左右)，說白了就是內盒的寬度
   height不只包含內容區域的高度，還包括padding(左右)、border(左右),說白了就是內盒的高度
   內盒(不考慮外邊距)的寬度=width
   內盒(不考慮外邊距)的高度=height
   它不像洋蔥那樣層層扒皮，而是content、padding、border做爲一個總體ide

標準模型和怪異模型能夠應用在網頁佈局中佈局

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>test</title> 
 6 <style>
 7     .wrap{
 8         width:1090px;
 9         margin:0 auto;
10     }
11     .div1{
12         width:1050px;
13         height:200px;
14         padding:30px 20px;
15         background-color:lightblue;
16         box-sizing:content-box;<!--標準盒模型 這是默認值-->
17     }
18     .div2{
19         box-sizing:border-box;<!--怪異盒模型，在特殊狀況下也有應用-->
20         width:1090px;
21         padding:30px 20px;
22         background-color:lightgreen;
23         border:5px solid red;
24     }
25 </style>
26 </head>
27 <body>
28     <div class="wrap">
29         <div class="div1">content寬度是1050px，padding-left=padding-right=20px，1050+20+20=1090px，正好和父元素的寬度相等，此時的box-sizing:content- box(大多數瀏覽器的默認值)</div>
30         <div class="div2">width=1090px,它包含border 5px*2，padding 20px*2，因此內容區域的寬度是1090-5X2-20X2=1040px</div>
31     </div>
32 </body>
33 </html>

View Code

相關標籤/搜索

每日一句

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