html 父子外邊距 兄弟內邊距 趣味邊框
阿新 • • 發佈:2019-02-09
理解父子之間用padding,兄弟之間用margin。
例項
圖中外部div(A)裡面包含兩個div(B和C)。
①②③⑤均為父子元素之間的間距 ④為兄弟之間的元素
第一種方案
使用“父子內邊距,兄弟外邊距”。
①②③⑤,父子元素之間的空隙,均使用padding值撐開。
④兄弟之間使用margin值撐開。
A元素
witdth:200px;
padding:73px 55px;
border:3px solid #555;
B元素
height:194px;
margin-bottom:42px;
border:3px solid #555;
C元素
height:194px;
border:3px solid #555;
第二種方案
採用的都是外邊距
①~⑤,均使用margin值撐開。
A元素
witdth:310px;
border:3px solid #555;
B元素
width:194px;
height:194px;
margin:73px 55px 42px;
border:3px solid #555;
C元素
width:194px;
height:194px;
margin:0px 55px 73px;
border:3px solid #555;
使用第一套方案比較精簡。另外在IE6等瀏覽器不會出現什麼問題(第二套方案會觸發ie6的雙倍邊距bug)。
外邊距在佈局中比較容易觸發一些佈局問題。
記住 margin padding 有一個值是上下左右
兩個值是 上下 左右
三個值是 上 左右 下。
趣味邊框
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border-width: 50px;
border-style: solid;
border-color: red black green yellow ;
}
.boxa{
width: 0px;
height: 0px;
border-width: 50px;
border-style: solid;
border-color: red black green yellow;
}
</style>
</head>
<body>
<div class="box"></div>
<br>
<div class="boxa"></div>
</body>
</html>
<!-- 從box和boxa可以看出來 邊框是從兩個角45°延伸出來的 最後會交叉於一點 -->
圖片:
從box和boxa可以看出來 邊框是從兩個角45°延伸出來的 最後會交叉於一點
參考書籍《html5佈局之路》