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

mingjiu 2022-10-22 发布于陕西

展开全文

网页布局（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>