[04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式...
?
?
?
?
?
實際占有的寬 = width + 2padding(內邊距) + 2border(邊框) + 2margin(外邊距) 實際占有的高 = height + 2padding + 2border + 2marginpadding 簡寫屬性在一個聲明中設置所有填充屬性。該屬性可以有1到4個值。?
設置一個P元素的填充：
p {
padding:10px 5px 15px 20px; /*上填充是 10px ,右填充是 5px ,下填充是 15px ,左填充是 20px*/
padding:10px 5px 15px; /*上填充是 10px ,右填充和左填充是 5px ,下填充是 15px */
padding:10px 5px; /* 上填充和下填充是 10px ,右填充和左填充是 5px */
padding:10px; /* 所有四個填充都是 10px */
}
?
border ,設置四個邊框樣式：
p?
{
border:5px solid red;
}
?
margin簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有1到4個值。
P{
margin:10px 5px 15px 20px;/*上邊距是 10px ,右邊距是 5px ,下邊距是 15px ,左邊距是 20px*/
margin:10px 5px 15px;/* 上邊距是 10px ,右邊距和左邊距是 5px ,下邊距是 15px */
margin:10px 5px; /* 上邊距和下邊距是 10px ,右邊距和左邊距是 5px */
margin:10px;/* 所有四個邊距都是 10px */
?}
?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="11.css"> </head> <body> <div id="d0">d0</div> <div id="d1">d1</div> <div id="d2">d2</div> <div id="d3">d3</div> <div id="d4">d4</div> <div id="d5">d5</div> <div id="d6">d6</div> </body> </html> div{ border: 1px solid red; width: 100px; height: 100px; } #d0{ float: none; } #d1{ float: right; padding: 20px; } #d2{ padding: 20px; /*四個邊設置相同的邊框*/ margin: 20px; } #d3{ padding: 10px 20px 30px 50xp;/*四個邊設置不同的邊距(上右下左)*/ margin: 10px 20px 30px 40px; } #d4{ padding-left: 20px;/*單個邊設置邊距（left/right/top/bottom）*/ margin-bottom: 40px; } #d5{ /*對邊設置相同的邊距,上下 、左右*/ padding: 20px; margin: 20px; } #d6{ /*對邊設置邊距的特例:在設置外邊時，若左右外邊距值為auto，則該元素水平居中*/ margin: 20px 40px;/* 左右20px，上下40px*/ }?
轉載于:https://www.cnblogs.com/cainiaobufei/p/10761065.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的[04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 魔兽世界怀旧服巨魔猎人性别怎么选择 怀旧
- 下一篇： mongoengine.NotUniqu