第一种(基础用法)
注释:前4种均为基础布局 有间隙的写法写在最后了,所有会发在最后参考代码中.
将块级元素转换为行内块
代码
结构(后续两种结构一致就不给参考了)
第二种(入门级写法)
利用浮动
代码
第三种(强烈推荐)
flex布局实现
代码
第四种(不推荐)
栅格系统实现
需借助css样式
结构
样式
标准写法(有缝隙)
代码
强烈推荐第三种做法
参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* 盒子内减 浏览器自动计算 */
box-sizing: border-box;
}
.box {
width: 1200px;
height: 200px;
margin: 100px auto;
background-color: rgb(226, 59, 190);
}
/* 第一种
将块级元素转换为行内块
*/
/* .box{
font-size: 0;
} */
/* .box div {
display: inline-block;
width: 300px;
height: 200px;
background-color: pink;
} */
/* 第二种
利用浮动
*/
/*
.box div {
float: left;
width: 300px;
height: 200px;
background-color: rgba(150, 59, 224, 0.877);
} */
/* 第三种
flex布局实现
*/
.box {
display: flex;
}
.box div {
width: 300px;
height: 200px;
background-color: rgba(53, 235, 174, 0.877);
/* 有缝隙 此时盒子会挤下去 */
margin-left: 10px;
}
/* 解决办法 */
.box div:first-child {
margin-left: 0;
}
/* 区别颜色方便看效果 */
.box div:nth-child(2n) {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
