web盒子模型浮动非浮动代码
时间: 2023-10-14 21:04:55 浏览: 49
以下是一个使用盒子模型的浮动和非浮动示例代码:
非浮动盒子模型代码:
```html
<div class="container">
<div class="box">
<h2>标题</h2>
<p>这是文本内容</p>
</div>
</div>
<style>
.container {
width: 600px; /* 指定容器的宽度 */
margin: 0 auto; /* 居中显示 */
border: 1px solid black; /* 容器边框 */
padding: 20px; /* 容器内边距 */
}
.box {
background-color: #eee; /* 盒子背景色 */
border: 1px solid gray; /* 盒子边框 */
padding: 10px; /* 盒子内边距 */
}
</style>
```
浮动盒子模型代码:
```html
<div class="container">
<div class="box box-left">
<h2>标题1</h2>
<p>这是文本内容1</p>
</div>
<div class="box box-right">
<h2>标题2</h2>
<p>这是文本内容2</p>
</div>
</div>
<style>
.container {
width: 600px; /* 指定容器的宽度 */
margin: 0 auto; /* 居中显示 */
border: 1px solid black; /* 容器边框 */
overflow: hidden; /* 清除浮动 */
}
.box {
background-color: #eee; /* 盒子背景色 */
border: 1px solid gray; /* 盒子边框 */
padding: 10px; /* 盒子内边距 */
}
.box-left {
float: left; /* 左浮动 */
width: 30%; /* 左盒子宽度 */
}
.box-right {
float: right; /* 右浮动 */
width: 70%; /* 右盒子宽度 */
}
</style>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)