Board logo

標題: Box Model介紹 [打印本頁]

作者: 陳育霖    時間: 2023-8-12 11:55     標題: Box Model介紹

本帖最後由 陳育霖 於 2023-8-29 01:07 編輯

margin 外邊距、border 邊框、padding 內邊距、content box 內容盒子
content box可以為圖片、標題(h1-h6)、段落(p)、區塊(div)等
[attach]16211[/attach]
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Box Model 範例</title>
  6.   <style>
  7.     /* 樣式設定 */
  8.     .box {
  9.       width: 200px;
  10.       height: 100px;
  11.       border: 5px solid #333;
  12.       background-color: #f4f4f4;
  13.       display: inline-block;
  14.     }

  15.     .content {
  16.       background-color: #ffd700;
  17.     }

  18.     .border {
  19.       border: 100px dashed #87cefa;
  20.     }

  21.     .padding {
  22.       background-color: #90ee90;
  23.       padding: 100px;
  24.     }

  25.     .margin {
  26.       background-color: #ff69b4;
  27.       margin: 100px;
  28.     }

  29.     .box-container {
  30.       text-align: center;
  31.     }
  32.   </style>
  33. </head>
  34. <body>
  35.   <div class="box-container">
  36.     <div class="box content">內容區塊</div>
  37.     <div class="box border">邊框區塊</div>
  38.     <div class="box padding">內邊距區塊</div>
  39.     <div class="box margin">外邊距區塊</div>
  40.   </div>
  41. </body>
  42. </html>
複製代碼





歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/) Powered by Discuz! 7.2