首页web盒子模型实例代码

web盒子模型实例代码

时间: 2023-09-12 10:03:23 浏览: 90

盒子模型代码

简单的html代码，盒子模型，只是大概的描述下盒子模型的例子

以下是一个简单的 HTML 页面的盒子模型实例代码： ```html <!DOCTYPE html> <html> <head> <title>盒子模型实例</title> <style> .outer-box { border: 2px solid black; padding: 20px; margin: 30px; } .inner-box { border: 1px solid red; padding: 10px; margin: 15px; background-color: lightgray; } </style> </head> <body> <div class="outer-box"> <p>这是外部盒子</p> <div class="inner-box"> <p>这是内部盒子</p> </div> </div> </body> </html> ``` 在这个例子中，我们创建了两个 div 元素，一个是外部盒子，另一个是内部盒子。外部盒子应用了 border、padding 和 margin 样式，而内部盒子应用了 border、padding、margin 和 background-color 样式。这些样式影响了盒子的大小和位置。

阅读全文