首页写个html盒子布局

写个html盒子布局

时间: 2024-10-24 20:17:00 浏览: 28

HTML中的盒子模型是一种理解元素如何占据空间并定位的基本概念。它由四个部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。下面是一个简单的HTML和CSS代码示例，用于创建一个基本的盒子布局： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: flex; /* 使用 Flexbox 布局 */ width: 400px; border: 1px solid #ccc; padding: 10px; margin: 20px auto; /* 设置左右外边距使居中 */ } .box { flex: 1; /* 同等分配宽度 */ background-color: lightblue; padding: 15px; box-sizing: border-box; /* 包含边框和内边距到盒模型 */ } </style> </head> <body> <div class="container"> <div class="box">这是一个盒子</div>  </div> </body> </html> ``` 在这个例子中，`.container` 容器使用了 Flexbox 布局，`.box` 子元素会自动调整大小以填满容器，并且每个 `.box` 都有相同的内边距和背景颜色。通过设置 `box-sizing: border-box;`，所有的内容、内边距和边框都被包含在了盒模型内部，使得计算尺寸更直观。

阅读全文