9、盒子模型
阿新 • • 發佈：2020-12-25
技術標籤：第三冊：HTML+CSScsshtmlhtml5css3
2.11 盒子模型
Div+CSS排版優點：執行效率高1、 縮減頁面程式碼，提高頁面執行效率
2、 頻寬要求降低（程式碼更簡潔）
3、 更容易被搜尋引擎搜尋到
學完div+css後思考為什麼div+css執行效率高？
什麼是盒子？只要是存放內容的標籤就是盒子，最大的盒子是HTML。
邊界（margin）：盒子的外面叫邊界，邊界有四個，上下左右
填充（padding）：盒子的裡面叫填充，填充有四個，上下左右
邊框（border）：盒子的本身有邊框，邊框有四個，上下左右
a盒子的上填充，b盒子的上邊界。
例1：Ctrl+h調出提示 Solid：實線 transparent：透明
<style type="text/css">
body{
background-color: #99FFFF;
}
#a{
border-left:none;
border-right:none;
border-top:none;
border-bottom:solid 1px #000000;
background-color:transparent;/*transparent 透明的*/
/*margin-right:20px;*/
}
#b{
border:none; Auto：自動
<style type="text/css">
table,th,td{
border:#0066FF solid 1px;
border-collapse:collapse;/*collapse：塌陷*/
}
table{
width:500px;
margin-left:auto;
margin-right:auto;/*對塊顯示標記，邊界的左右自動，就是居中*/
}
tr{
height:40px;
}
td{
text-align:center;/*td裡面的內容居中*/
}
</style>
</head>
<body>
<table>
<tr>
<th>學號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>1</td>
<td>令狐沖</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>任盈盈</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>任我行</td>
<td>男</td>
<td>55</td>
</tr>
</table>
</body>
<style type="text/css">
#content{
font-size:18px;
background-image:url(./img/bg8.gif);
background-repeat:repeat-y;/*背景沿著y軸平鋪*/
padding-left:110px;/*左填充是110px*/
}
body{
background-image:url(./img/bg7.jpg);/*背景圖片*/
background-repeat:no-repeat;/*背景不平鋪*/
}
</style>