border，padding，margin盒模型理解
生活随笔
收集整理的這篇文章主要介紹了
border，padding，margin盒模型理解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
安靜的敲著鍵盤，已勢不可擋的姿勢逼近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盒模型理解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 常见文本样式及标签
- 下一篇： CSS 属性 - 伪类和伪元素的区别