DIV＋CSS布局

最新推荐文章于 2024-04-28 17:27:49 发布

非早起选手

最新推荐文章于 2024-04-28 17:27:49 发布

阅读量1.3w

点赞数 14

分类专栏：前端基础文章标签： css html

本文链接：https://blog.csdn.net/zg0601/article/details/120808953

版权

前端基础专栏收录该内容

16 篇文章 5 订阅

订阅专栏

一、简介

DIV＋CSS的网页标准化设计是web标准中的一种新的布局方式。在这种布局中，div承载的是内容，而CSS承载的是样式。

DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。

CSS则提供对文档外观的更好更全面的控制，而且不干扰文档的内容。

二、div＋CSS布局优势

1、表现和内容分离，便于站点重构页面

DIV+CSS模式具有比表格更大的优势，他将网页结构与内容相分离，代码简洁，利于搜索，方便后期维护和修改。

2、结构清晰，对搜索引擎更加友好

DIV+CSS构架的页面具备搜索引擎SEO的先天条件，配合优秀的内容和一些SEO处理，可以获得更好的网站排名。

3、便于web项目开发分工协作

DIV+CSS构架的表现和内容分离的特性使得程序员和页面设计者只要通过一定页面元素的约定便可进行各自擅长的程序控制和页面展示部分的开发，减少相互的关联性，大大提高了开发效率。

三、常见页面布局方式

1、简单知识基础

①CSS浮动（float）

浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘。

浮动可以改变流布局，可以使多个div水平显示，有左浮动和右浮动。

当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果。

②clear属性

当属性设置float（浮动）时，它所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear来清除。如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性。

clear的作用：如果div采用了float之后它所在的物理位置已经脱离文档流了，在该div后面的元素会占据它的水平位置，如果想让后面的元素重新另起一行，不受浮动的影响，那么就需要在后面的元素中加上float:both;就可以换一行了。

注意：添加了clear属性的元素，通过自动增加空白边，达到留出垂直空间的效果,如下图，前者为加了clear属性的，后者未加。

③相对定位与绝对定位

相对定位是相对于元素在普通文本流中的初始位置，以它所在普通流中的位置为初始点，可以通过设置垂直或水平位置，让这个元素”相对于“它的初始点进行移动。（position:relative）

绝对定位使元素的位置与文档流无关，它的位置是相对于最近的父元素而言的。（position:absolute）

2、固定宽度布局

①一列水平居中布局

（盒子固定宽度高度）代码如下：

<style>

    #one-center-col{

        width: 500px;

        height: 300px;

        background-color: chocolate;

        margin: 0 auto;

    }

</style>

<body>

    <div id="one-center-col"></div>

</body>

浏览器效果如下：

②两列布局

两列布局可以使用float浮动的方式完成。

代码如下：

<style>

    #container{

        width: 800px;

        margin: 0 auto;

    }

    #left{

        width: 200px;

        height: 300px;

        background-color: dodgerblue;

        float: left;

    }

    #right{

        width: 500px;

        height: 300px;

        background-color: greenyellow;

        float: left;

    }

</style>

<body>

    <div id="container">

        <div id="left"></div>

        <div id="right"></div>

    </div>

</body>

浏览器效果如下：

③三列布局

代码如下：

<style>

    #container{

        width: 1000px;

        margin: 0 auto;

    }

    #left{

        width: 200px;

        height: 300px;

        background-color: dodgerblue;

        float: left;

    }

    #middle{

        width: 500px;

        height: 300px;

        background-color: hotpink;

        float: left;

    }

    #right{

        width: 300px;

        height: 300px;

        background-color: greenyellow;

        float: left;

    }

</style>

<body>

    <div id="container">

        <div id="left"></div>

        <div id="middle"></div>

        <div id="right"></div>

    </div>

</body>

浏览器效果如下：

3、自适应宽度布局

①两列布局

基本思路：

利用浮动进行自适应布局（也可使用定位进行布局），左边盒子宽度固定，右边盒子的左外边距值设置为左边盒子的宽度即可。

代码如下：

<style>

    #container{

        width: 1000px;

        margin: 0 auto;

    }

    #left{

        width: 200px;

        height: 300px;

        background-color: dodgerblue;

        float: left;

    }

    #right{

        height: 300px;

        margin-left: 200px;

        background-color: greenyellow;

    }

</style>

<body>

    <div id="container">

        <div id="left"></div>

        <div id="right"></div>

    </div>

</body>

浏览器效果如下：

②三列布局

基本思路：

与两列自适应宽度布局原理相同，利用浮动进行自适应布局，中间列自适应（也可使用定位进行布局）

代码如下：

<style>

    #container{

        width: 1200px;

        margin: 0 auto;

    }

    #left{

        width: 200px;

        height: 300px;

        background-color: dodgerblue;

        float: left;

    }

    #middle{

        margin: 0 300px 0 200px;

        height: 300px;

        background-color: hotpink;

    }

    #right{

        width: 300px;

        height: 300px;

        background-color: greenyellow;

        float: right;

        margin-top: -300px;

    }

</style>

<body>

    <div id="container">

        <div id="left"></div>

        <div id="middle"></div>

        <div id="right"></div>

    </div>

</body>

浏览器效果如下：