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.     }

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

  20.     .border {
  21.       border: 100px dashed #87cefa;
  22.     }

  24.     .padding {
  25.       background-color: #90ee90;
  26.       padding: 100px;
  27.     }

  29.     .margin {
  30.       background-color: #ff69b4;
  31.       margin: 100px;
  32.     }

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




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