1.CSS盒子模型
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>09盒子模型示例</title> <style> .c1 { height: 200px; /*內容區域*/ width: 300px; padding: 10px; /* 內填充區域,內容區和邊框之間的距離,也叫內邊距/內填充。 */ border: 5px solid green; /*邊框區域*/ /*margin: 10px 10px 10px 10px; !* 外邊距區域,一般用於調整兩個標簽之間的距離. 順序是上右下左*!*/ /*margin: 20px 30px; !* 上下是20像素外邊距, 左右是30像素 *!*/ margin: 0 auto; /* 上下是0, 左右是自動調節,效果是劇中 */ } </style> </head> <body> <div class="c1"></div> </body> </html>