border，padding，margin盒模型理解
阿新 • • 發佈：2018-01-22
tom 讓我 head ie6 模型 基礎知識 html 就是 width
安靜的敲著鍵盤，已勢不可擋的姿勢逼近php，我想我是一個幸福的人，未來不可期，做好現在，偶爾寫著自己能看懂的API,慢慢悠悠的回味一下前端基礎知識。
本文盒模型理解。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border,padding,margin盒模型理解</title> <style> div{ /*width: 50px; height: 50px;*/ /*background-color: red;*/ /*正常的情況下，我們給一個元素指定寬度和高度的時候，我們只是設置了內容區域的寬度和高度，像這個50*50的盒子*/ /*border: 25px solid black; padding: 25px; margin: 25px;*/ /*如果加上邊框和內外邊距，這個div的總寬度就會變成 50+50（左右邊框）+50（內邊距）+50（外邊距）*/ /*當你在根據psd文件寫效果的時候，用ps量尺寸的情況下，你就要細心量 取內容區域了，要100%逼近效果圖*/ /*box-sizing: border-box;*/ /*width: 300px; height: 300px;*/ /*當然默認情況下一個盒子的box-sizing:content-box;,就是上述情況下盒子的總寬度是由寬度加上邊框和內外邊距。 還有一種情況就是怪異盒模型，在css中加上box-sizing:border-box; 這一種情況就是把盒子的大小固定，給到的width和height就是 包含邊框和內邊距（無外邊距），總寬度就要加上外面局*/ /*此時這個盒子的width是50（左右邊距）+50（內邊距）+200（內容區域），總寬度需要加上外邊距的100.*/ /*我們可以總結默認情況下，width就是內容的寬度 怪異合模型下，width包含border和padding加上內容寬度.*/ /*給定一個div，讓我們來對其邊框可以有以下操作：*/ /*border-style：none;*/ /*默認情況下，邊框樣式是無邊框 solid表示實線； dashed虛邊框； dotted點線邊框，ie6下存在兼容性問題；*/ /*border-width: 10px;*/ /*這是邊框寬度*/ /*border-color: red;*/ /*這是給定邊框顏色*/ /*對於單獨設置一邊或多邊便不過多解釋*/ /*border:5px solid red;*/ /*通常情況下我們簡寫邊框樣式*/ /*padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;*/ /*這是對內邊距的各個方向的設定（不多解釋），直接用padding 來書寫會有一下幾種格式*/ /*padding: 10px; padding: 5px 10px; padding: 5px 10px 15px; padding: 5px 10px 15px 20px;*/ /*margin同padding（寫法一致）*/ /*1,對於兄弟關系的相對margin值，會相對疊加，比如水平 排列的兩個div，a的margin-right為50px 和b的margin-left為100px;a和b的間距就是100px(取大值)。*/ /*2，對於父級來說，第一個子級的margin-top,會影響父級的布局， 可以給父級加邊框或者用padding-top代替；不建議用overflow:hidden; 提示：對於第一個子級來說，避免用margin-top.*/ } </style> </head> <body> <div></div> </body> </html>
border，padding，margin盒模型理解