04盒子模型 · 学习笔记

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ /* 盒子模型 margin -->外边距改变元素的位置 border padding -->填充 */ /* end */ width:100px; height: 100px; background-color: red; /* margin外边距 */ margin-left:100px; margin-top: 100px; margin-bottom: 100px; /* border */ border-width: 10px; border-style: solid; border-color: black; /* padding 填充 */ padding-left:100px; } </style> </head> <body> <div class="box"></div> <p>hello world</p> </body> </html> ~~~