DIV+CSS页面基本布局总结

前言

DIV+CSS布局是前端最为基础的知识,而现在网络上最为普遍的有一列,两列,三列,窗格式布局以及自适应布局等等。
在我们熟悉了html布局之后,经常会选用能够满足当前自己需求的排版布局或习惯性选用自己常用的布局方式,有时候我发现能满足我某个时刻需求的网页布局往往是我习惯常用的,但不一定是更好更适合的布局,所以我就想回到最初,把最基础的页面布局总结一下,可以供入门的新手了解一下,我认为多对一些基础知识点多总结多了解没有坏处。

1.固定宽度布局

  • 一列水平居中布局
    一列的宽度固定为已知值,使用margin设置来达到水平居中效果。

html代码:

<!DOCTYPE html>
<html>
<head>
    <title>一列水平居中布局</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="one-center-col">一列布局</div>
</body>
</html>

css代码:

<style>
    .one-center-col {
          width: 1000px;
          height: 700px;
          background-color: grey;
          margin: 0 auto;
    }
</style>

效果截图:

一列布局.png

其中对于宽度固定的元素,只需要设置该元素的css样式(margin:0 auto;)就可以实现让该元素在其父元素的宽度下水平居中对齐显示。

  • 两列布局(浮动)
    网页布局常见左右两列布局,如果已知左右两列的宽度是固定值,则可以使用float浮动方式完成基本布局排版。

html代码:

<div class="container">
      <div class="leftbox">左侧列</div>
      <div class="rightbox">右侧列</div>
</div>

左右列的css代码:

.leftbox {
  width: 300px;
  height: 100%;
  background-color: #aadddd;
  float: left;
}     
.rightbox {
  width: 700px;
  height: 100%;
  background-color: #f08844;
  float: right;
}

效果截图

两列布局(浮动).png

两列布局,当已知列的宽度时,可以使用浮动属性来达到左右布局的效果,仅需设置float:leftfloat:right就可以轻松达到页面布局效果。

  • 三列布局
    三列水平布局,如果列的宽度都是固定的,实现方式与上面两列布局相似,使用浮动即可达到效果。

html代码:

<div class="container">
  <div class="leftbox">左侧列</div>
  <div class="midbox">中间列</div>
  <div class="rightbox">右侧列</div>
</div>

css部分代码:

.leftbox {
  width: 300px;
  float: left;
}
.midbox {
  width: 400px;      
  float: left;
}
.rightbox {
  width: 300px;
  float: right;
}

效果示意图

三列布局(浮动).png

leftbox和midbox设置左浮动,rightbox设置右浮动。但关键的是,三个子元素的总宽度不能大于或者等于父元素的宽度

2. 自适应宽度布局

  • 两列布局(实现效果:两列自适应宽度)
    思路:实现自适应两列布局,可以继续使用浮动方式来布局,但在设置浮动元素的宽度时,不再使用固定值,而要使用百分比,从而实现宽度的自适应。

  • 两列布局(实现效果:左侧为固定宽度,右侧自适应)

    1)使用浮动来进行自适应布局:

.leftbox {
    width: 300px;
    height: 100%;
    background-color: #aadddd;
    float: left;
}
.rightbox {
    height: 100%;
    margin-left: 300px;
    background-color: #f08844;
}

基本思路分析:

  1. 左侧设置固定宽度并设置浮动float:left;
  2. 右侧不设置宽度,只设置左侧边距为左侧栏的宽度加上左侧与右侧的间距margin-left

2)使用定位来进行布局:

.container {
  width: 1000px;
  height: 700px;
  margin: 0 auto;
  position: relative;
}
.leftbox {
  width: 300px;  /*左侧固定宽度值*/
  height: 100%;
  position: absolute;
}
.rightbox {
  height: 100%;
  margin-left: 300px; /*边距值=左侧固定宽度值*/
  position: relative;
}

基本思路分析:

  1. 父元素设置为position:relative;
  2. leftbox设置固定宽度,设定为绝对定位position:absolute
  3. rightbox设置为相对定位position:relative。(使其遮盖左侧栏)
  4. rightbox设置左边距,边距值margin-left刚好为左侧栏的宽度

截图展示:

定位实现自适应布局.png
  • 三列布局:中间自适应(实现效果:原理类似于两列布局)
    1)使用浮动来布局
    核心思想:中间列自适应。
.leftbox {
    width: 300px;
    height: 100%;
    background-color: #aadddd;
    float: left;
}      
.midbox {
    margin: 0 300px;
    height: 100%;
    background-color: #aa11dd;
}
.rightbox {
    width: 300px;
    height: 100%;
    background-color: #f08844;
    float: right;
}

基本思路分析:
1.左侧以及右侧设置固定宽度,并且分别设置左右浮动。
2.中间栏设置左右边距,边距值刚好分别等于左右侧栏的宽度。

2)使用定位来布局

.container {
    width: 1000px;
    height: 700px;
    margin: 0 auto;
    position: relative;
}
.leftbox {
    width: 300px;
    height: 100%;
    position: absolute;
    left: 0;
}
.midbox {
    margin: 0 300px;
    height: 100%;
    position: relative;
}
.rightbox {
    width: 300px;
    height: 100%;
    position: absolute;
    right: 0;
}

思路分析:
1.父元素设置position:relative;
2.leftbox和rightbox设置position:absolute;并且设置左右侧栏的宽度值。
3.midbox设置position:relative;
4.midbox设置左右margin值,正好对应左右侧栏的宽度值(margin=leftboxWidth/rightboxWidth)

截图展示:


定位实现三列自适应布局.png

以上为我自己简单总结归纳的一些最基础的div+css布局的考虑实现方式,希望能够对某些刚接触前端的新手在基础布局的实现上提供一点点帮助。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,691评论 1 83
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 564评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 592评论 0 9
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 1,398评论 0 60
  • 打开电脑,不知怎么的,感触颇多。刚刚看完电影摆渡人,电影中梁朝伟饰演的摆渡人帮助别人,我在想我如何才能渡我...
    lily糖阅读 29评论 0 0