盒子模型
前言
盒子模型,英文即box model。不管是div、span、仍是a都是盒子。html
可是,圖片、表單元素一概看做是文本,它們並非盒子。這個很好理解,好比說,一張圖片裏並不能放東西,它本身就是本身的內容。前端
盒子中的區域
一個盒子中主要的屬性就5個:width、height、padding、border、margin。以下:git
- width和height:內容的寬度、高度(不是盒子的寬度、高度)。
- padding:內邊距。
- border:邊框。
- margin:外邊距。
盒子模型的示意圖:github
代碼演示:chrome
上面這個盒子,width:200px; height:200px; 可是真實佔有的寬高是302*302。 這是由於還要加上padding、border。瀏覽器
注意:寬度和真實佔有寬度,不是一個概念!來看下面這例子。微信
標準盒模型和IE盒模型
咱們目前所學習的知識中,以標準盒子模型爲準。markdown
標準盒子模型:post
IE盒子模型:
上圖顯示:
在 CSS 盒子模型 (Box Model) 規定了元素處理元素的幾種方式:
- width和height:內容的寬度、高度(不是盒子的寬度、高度)。
- padding:內邊距。
- border:邊框。
- margin:外邊距。
CSS盒模型和IE盒模型的區別:
在 標準盒子模型中,width 和 height 指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸,可是會增長元素框的總尺寸。
IE盒子模型中,width 和 height 指的是內容區域+border+padding的寬度和高度。
注:Android中也有margin和padding的概念,意思是差很少的,若是你會一點Android,應該比較好理解吧。區別在於,Android中沒有border這個東西,並且在Android中,margin並非控件的一部分,我以爲這樣作更合理一些,呵呵。
<body>
標籤也有margin
<body>
標籤有必要強調一下。不少人覺得<body>
標籤佔據的是整個頁面的所有區域,實際上是錯誤的,正確的理解是這樣的:整個網頁最大的盒子是<document>
,即瀏覽器。而<body>
是<document>
的兒子。瀏覽器給<body>
默認的margin大小是8個像素,此時<body>
佔據了整個頁面的一大部分區域,而不是所有區域。來看一段代碼。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css"> div{ width: 100px; height: 100px; border: 1px solid red; padding: 20px; margin: 30px; } </style>
</head>
<body>
<div>有生之年</div>
<div>狹路相逢</div>
</body>
</html>
上面的代碼中,咱們對div標籤設置了邊距等信息。打開google瀏覽器,按住F12,顯示效果以下:
認識width、height
必定要知道,在前端開發工程師眼中,世界中的一切都是不一樣的。
好比說,丈量稿紙,前端開發工程師只會丈量內容寬度:
下面這兩個盒子,真實佔有寬高,都是302*302:
盒子1:
.box1{
width: 100px;
height: 100px;
padding: 100px;
border: 1px solid red;
}
盒子2:
.box2{
width: 250px;
height: 250px;
padding: 25px;
border: 1px solid red;
}
真實佔有寬度 = 左border + 左padding + width + 右padding + 右border
上面這兩個盒子的盒模型圖以下:
若是想保持一個盒子的真實佔有寬度不變,那麼加width的時候就要減padding。加padding的時候就要減width。由於盒子變胖了是災難性的,這會把別的盒子擠下去。
認識padding
padding區域也有顏色
padding就是內邊距。padding的區域有背景顏色,css2.1前提下,而且背景顏色必定和內容區域的相同。也就是說,background-color將填充全部border之內的區域。
效果以下:
padding有四個方向
padding是4個方向的,因此咱們可以分別描述4個方向的padding。
方法有兩種,第一種寫小屬性;第二種寫綜合屬性,用空格隔開。
小屬性的寫法:
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
綜合屬性的寫法:(上、右、下、左)(順時針方向,用空格隔開。margin的道理也是同樣的)
padding:30px 20px 40px 100px;
若是寫了四個值,則順序爲:上、右、下、左。
若是隻寫了三個值,則順序爲:上、右、下。??和右同樣。
若是隻寫了兩個值,好比說:
padding: 30px 40px;
則順序等價於:30px 40px 30px 40px;
要懂得,用小屬性層疊大屬性。好比:
padding: 20px;
padding-left: 30px;
上面的padding對應盒子模型爲:
下面的寫法:
padding-left: 30px;
padding: 20px;
第一行的小屬性無效,由於被第二行的大屬性層疊掉了。
下面的題,會作了,說明你明白了。
一些題目
題目1:說出下面盒子真實佔有寬高,並畫出盒模型圖。
div{
width: 200px;
height: 200px;
padding: 10px 20px 30px;
padding-right: 40px;
border: 1px solid #000;
}
答案:
題目2:說出下面盒子真實佔有寬高,並畫出盒模型圖。
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}
答案:
padding-left:10px;
和padding-right:20px;
沒用,由於後面的padding大屬性,層疊掉了他們。
盒子模型以下:
題目3:如今給你一個盒子模型圖,請寫出代碼,試着用最最簡單的方法寫。
答案:
width:123px;
height:123px;
padding:20px 40px;
border:1px solid red;
題目4:如今給你一個盒子模型圖,請寫出代碼,試着用最最簡單的方法寫。
答案:
width:123px;
height:123px;
padding:20px;
padding-right:40px;
border:1px solid red;
一些元素,默認帶有padding
一些元素,默認帶有padding
,好比ul標籤。以下:
上圖顯示,不加任何樣式的ul,也是有40px的padding-left。
因此,咱們作站的時候,爲了便於控制,老是喜歡清除這個默認的padding。
可使用*
進行清除:
*{
margin: 0;
padding: 0;
}
可是,*
的效率不高,因此咱們使用並集選擇器,羅列全部的標籤(不用背,有專業的清除默認樣式的樣式表,從此學習):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}
認識border
border就是邊框。邊框有三個要素:像素(粗細)、線型、顏色。
顏色若是不寫,默認是黑色。另外兩個屬性不寫,要命了,顯示不出來邊框。
border-style
border的全部的線型以下:(咱們能夠經過查看CSS參考手冊
獲得)
好比border:10px ridge red;
這個屬性,在chrome和firefox、IE中有細微差異:(由於能夠顯示出效果,所以並非兼容性問題,只是有細微差異而已)
若是公司裏面的設計師是處女座的,追求極高的頁面還原度,那麼不能使用css來製做邊框。就要用到圖片,就要切圖了。
因此,比較穩定的border-style就幾個:solid、dashed、dotted。
border拆分
border是一個大綜合屬性。好比說:
border:1px solid red;
就是把4個邊框,都設置爲1px寬度、線型實線、red顏色。
PS:小技巧:在sublime text中,爲了快速輸入border:1px solid red;
這個屬性,能夠直接輸入bd
,而後選第二個後回車。
border屬性是可以被拆開的,有兩大種拆開的方式:
(1)按三要素拆開:border-width、border-style、border-color。(一個border屬性是由三個小屬性綜合而成的)
(2)按方向拆開:border-top、border-right、border-bottom、border-left。
如今咱們明白了:一個border屬性,是由三個小屬性綜合而成的。若是某一個小屬性後面是空格隔開的多個值,那麼就是上右下左的順序。舉例以下:
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;
效果以下:
(1)按三要素拆:
border-width:10px; //邊框寬度
border-style:solid; //線型
border-color:red; //顏色。
等價於:
border:10px solid red;
(2)按方向來拆:
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等價於:
border:10px solid red;
(3)按三要素和方向來拆:(就是把每一個方向的,每一個要素拆開。3*4 = 12)
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
等價於:
border:10px solid red;
工做中到底用什麼?很簡答:什麼簡單用什麼。但要懂得,用小屬性層疊大屬性。舉例以下:
爲了實現上方效果,寫法以下:
border:10px solid red;
border-right-color:blue;
爲了實現上方效果,寫法以下:
border:10px solid red;
border-style:solid dashed;
border能夠沒有:
border:none;
能夠某一條邊沒有:
border-left: none;
也能夠調整左邊邊框的寬度爲0:
border-left-width: 0;
舉例:利用border屬性畫一個三角形(小技巧)
步驟以下:
(1)當咱們設置盒子的width和height爲0時,此時效果以下:
(2)而後將border的底部取消:
(3)最後設置border的左邊和右邊爲白色:
這樣,一個三角形就畫好了。
個人公衆號
想學習代碼以外的軟技能?不妨關注個人微信公衆號:千古壹號(id:qianguyihao
)。
掃一掃,你將發現另外一個全新的世界,而這將是一場美麗的意外: