当前位置：首页 > news >正文

不会前端也可以看得懂的3种DIV+CSS布局技术

news 2025/6/6 12:33:43

网页布局（layout）是CSS的一个重点应用。
很多想入门前端的小伙伴一直在反馈，要怎么入门 css 呢，其实 css 布局也就那么几种
我们需要有全局思维
我们可能无法一下子就很细致地还原页面的每一个细节
但是我们至少可以把最基本的布局搭建出来，然后再慢慢打磨~
接下来拿出我的 css 布局笔记，简单阐述下3种DIV+CSS布局技术
虽然说我现在开发基本都是用 flex 啦~
接下来开始动手实践~

前期准备

先搭建一个容器，我们可以把每一个div当作一个容器，存放我们需要的内容。

<div class="container"></div>

给容器设置宽高、边框方便看效果。

 .container{width: 800px;height: 500px;border: 2px solid red}

消除浏览器默认的边距。

因为不同浏览器处理策略不同，有的默认间距就设为0，而有的却有默认值。
如果我们没有消除浏览器默认的边距，会造成不同浏览器下显示的有差异。

body {margin: 0;
}

在这里插入图片描述
一整个的容器我们就构建好了，是不是很简单？接下来开始动手实践左右两列布局。

左右两列布局

在 container 容器里面添加 column2 ，column2里面写两个div去存放左右两列布局。

<div class="container"><div class="column2"><div class="column2-1"></div><div class="column2-2"></div><div class="clear"></div></div>
</div>

加一些高度、宽度和颜色查看效果。

.column2 {border: 2px solid #000
}
.column2 .column2-1 {width: 500px;height: 150px;background-color: antiquewhite;float: left;
}
.column2 .column2-2 {width: 280px;height: 150px;background-color: forestgreen;float: right;
}
// 清除浮动
.clear {clear:both
}

在这里插入图片描述

1行3列布局

在原本的代码基础上继续添加：

<div class="container"><div class="column2"><div class="column2-1"></div><div class="column2-2"></div><div class="clear"></div></div><!-- 设置三列 --><div class="column3 clearfix"><div class="column3-1"></div><div class="column3-2"></div><div class="column3-3"></div></div>
</div>

写对应的css，这里我们还是写一些高度，宽度和背景颜色去看效果，值得一提的是，我们利用伪元素清除浮动，注意它必须设置为块级元素。

CSS 伪元素用于设置元素指定部分的样式。
可用于：设置元素的首字母、首行的样式
也可用于：在元素的内容之前或之后插入内容

注意：::first-line 伪元素只能应用于块级元素。

.column3 {margin-top: 20px
}
.column3  .column3-1 {width: 200px;height: 150px;background-color: fuchsia;float: left;
}
.column3  .column3-2 {width: 300px;height: 150px;background-color: rosybrown;float: left;margin-left: 20px;
}
.column3  .column3-3 {width: 260px;height: 150px;background-color: aqua;float: left;margin-left: 20px;
}
/* 利用伪元素清除浮动 */
.clearfix::after {content: '';display: block;/* 必须设置为块级元素 */clear: both
}

在这里插入图片描述

1行多列或多行多列布局

设置一行多列，多行多列
使用 ui 无序列表来完成

 <div class="column-n clearfix"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>

css使用list-style: none;设置列表项目样式为不使用项目符号。

.column-n ul {background: darkgreen;
}
.column-n ul li {/* border: 1px solid firebrick; */width: 140px;margin: 10px;height: 70px;background: greenyellow;float: left;
}
body ul{margin: 0;padding: 0;
}
li {list-style: none;
}

在这里插入图片描述
接下来优化一下代码，把为了看效果的边框都去掉：

基本的布局就搭建好了，前端最常用的就这三种啦~

不过我最经常使用的还是 flex，下次有时间可以用 flex 实现一下。

附录

全部源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* 消除默认的边距 */body ul{margin: 0;padding: 0;}li {list-style: none;}.container{width: 800px;height: 500px;/* border: 2px solid red */}.column2 {/* border: 2px solid #000 */}.column2 .column2-1 {width: 500px;height: 150px;background-color: antiquewhite;float: left;}.column2 .column2-2 {width: 280px;height: 150px;background-color: forestgreen;float: right;}.clear {clear:both}.column3 {margin-top: 20px}.column3  .column3-1 {width: 200px;height: 150px;background-color: fuchsia;float: left;}.column3  .column3-2 {width: 300px;height: 150px;background-color: rosybrown;float: left;margin-left: 20px;}.column3  .column3-3 {width: 260px;height: 150px;background-color: aqua;float: left;margin-left: 20px;}/* 利用伪元素清除浮动 */.clearfix::after {content: '';display: block;/* 必须设置为块级元素 */clear: both}.column-n {/* border: 1px solid rebeccapurple; */}.column-n ul {background: darkgreen;}.column-n ul li {/* border: 1px solid firebrick; */width: 140px;margin: 10px;height: 70px;background: greenyellow;float: left;}</style>
</head>
<body><!-- 3种DIV+CSS布局技术（1）左右两列布局（2）1行3列（3）1行多列或多行多列布局 --><div class="container"><div class="column2"><div class="column2-1"></div><div class="column2-2"></div><div class="clear"></div></div><!-- 设置三列 --><div class="column3 clearfix"><div class="column3-1"></div><div class="column3-2"></div><div class="column3-3"></div></div><!-- 设置一行多列，多行多列 --><!-- 使用 ui 无序列表来完成 --><div class="column-n clearfix"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div></body>
</html>