CSS盒子模型概述
margin border padding content
內邊距
| 屬性 | 描述 |
|---|---|
| padding | 所有邊距 |
| padding-bottom | 底邊距 |
| panding-left | 左邊距 |
| panding-right | 右邊距 |
| panding-top | 上邊距 |
邊框
邊框樣式
10種非繼承樣式,包括none
邊框的單邊樣式
- border-top-style
- border-left-style
- border-right-style
- border-bottom-style
邊框的寬度 border-width
邊框單邊的寬度
- border-top-width
- border-left-width
- border-right-width
- border-bottom-width
邊框顏色 border-color
邊框單邊的顏色
- border-top-color
- border-left-color
- border-right-color
- border-bottom-color
CSS3邊框
- border-radius 圓角表框
- border-shadow 邊框陰影
- border-image 邊框圖片
外邊距
基本和內邊距相似
外邊距合併
相鄰的2個盒子將2個邊距合併成一個邊距 如果邊距不同，則遵循邊距大的
盒子模型應用
下面是一個簡單的頁面盒子應用DEMO
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒子模型的應用</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="top">
<div class="top_content">
</div>
</div>
<div class="body">
<div class="body_img"></div>
<div class="content">
<div class="notifi"></div>
</div>
</div>
<div class="foot">
<div class="foot_content"></div>
<div class="foot_nav"></div>
</div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.top{
width: 100%;
height: 50px;
background-color: black;
}
.top_content{
width: 75%;
height: 50px;
margin: 0px auto;
background: darkgrey;
}
.body{
width: 75%;
height: 1500px;
margin: 20px auto;
background: darkgray;
}
.body_img{
width: 100%;
height: 400px;
background-color: darkorange;
}
.content{
width: 100%;
height: 1100px;
background-color: blueviolet;
}
.notifi{
width: 100%;
height: 100px;
background-color: darkgray;
}
.foot{
width: 75%;
height: 400px;
background-color: indigo;
margin: 0px auto;
}
.foot_content{
width: 100%;
height: 350px;
background-color: darkseagreen;
}
.foot_nav {
width: 100%;
height: 50px;
background-color: slategray;
}
Github下載地址:https://github.com/surrenderios/CSSBoxApply