[分享]css中div的各种用法

1.使用div来定义布局

<div class="container">
    <div class="header">头部</div>
    <div class="main">内容</div>
    <div class="footer">底部</div>
</div> 

2.使用div来设置样式

<div class="box">
    <p>This is a box.</p>
</div>

.box {
    width: 200px;
    height: 200px;
    background-color: #EEE;
    border: 1px solid #DDD;
    text-align: center;
    padding: 10px;
    margin: 10px;
} 

3.使用div来定义网格

<div class="grid">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
</div>

.grid {
    display: flex;
}

.col-4 {
    flex: 1;
    width: 33%;
    background-color: #EEE;
    border: 1px solid #DDD;
    padding: 10px;
    margin: 10px;
} 

4.使用div来定义响应式设计

<div class="responsive">
    <img src="image.jpg" alt="Image">
</div>

.responsive {
    max-width: 100%;
    height: auto;
} 

这是一些最常用的CSS