div盒子模型
阿新 • • 發佈：2017-07-12
mar html head margin ie8 gin doctype adding 兼容
/*標準盒子模型：內容的寬度就是設置的寬度*/
/*IE8以下盒子模型：內容的寬度是設置的內容+padding+border*/
/*設置padding的時候一定要考慮原有的寬度，改變它的大小會改變原有盒子的大小，否則會把盒子撐大（給多少是padding，就把寬度減多少）*/
/*padding的寫法同margin一樣，如下*/
margin:40px;
/*margin是專門改變塊級元素的位置，即改變外邊距*/
/*margin-top:40px;盒子與盒子的頂部距離*/
/*margin-left:40px;盒子與盒子的左邊的距離*/
/*margin-right:40px;盒子與盒子的右邊的距離*/
/*margin-bottom:40px;盒子與盒子的底部的距離*/
/*margin:40px;盒子與盒子的上下左右的距離*/
/*margin:10px 20px;代表上下距離10px,左右距離20px*/
/*margin:10px 20px 30px;代表上距離10px,左右距離20px，下距離30px*/
/*margin:10px 20px 30px 40px;代表上距離10px,右距離20px，下距離30px,左距離40px*/
}
</style>
</head>
<body>
<div>內容
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div盒子模型</title>
<style>
*{
margin:0px;
padding:0px;
}
/*為了能兼容其它的設備，前端人員會把見到的所有元素寫上html,head,body,h1,h2...(群組選擇器）*/
div{
width:160px;
height:160px;
border:20px solid #000000;
padding:40px;
/*padding代表的是內邊距，內容和border（邊框）的距離*/
/*標準盒子模型：內容的寬度就是設置的寬度*/
/*IE8以下盒子模型：內容的寬度是設置的內容+padding+border*/
/*設置padding的時候一定要考慮原有的寬度，改變它的大小會改變原有盒子的大小，否則會把盒子撐大（給多少是padding，就把寬度減多少）*/
/*padding的寫法同margin一樣，如下*/
margin:40px;
/*margin是專門改變塊級元素的位置，即改變外邊距*/
/*margin-top:40px;盒子與盒子的頂部距離*/
/*margin-left:40px;盒子與盒子的左邊的距離*/
/*margin-right:40px;盒子與盒子的右邊的距離*/
/*margin-bottom:40px;盒子與盒子的底部的距離*/
/*margin:40px;盒子與盒子的上下左右的距離*/
/*margin:10px 20px;代表上下距離10px,左右距離20px*/
/*margin:10px 20px 30px;代表上距離10px,左右距離20px，下距離30px*/
/*margin:10px 20px 30px 40px;代表上距離10px,右距離20px，下距離30px,左距離40px*/
}
</style>
</head>
<body>
<div>內容
</div>
</body>
</html>
div盒子模型