DIV CSS布局中主要CSS属性介绍：

Float:

Float属性是DIV CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。

Margin:

Margin属性用于设置两个元素之间的距离。

Padding:

Padding属性用于设置一个元素的边框与其内容的距离。

Clear:

使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。

　　简单操作实例：下面使用实例如果做一个简单又基本的布局，效果如下图：

代码：

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN"
""
>
<html xmlns=
""
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>DIV CSS布局教程</title>
<style type=
"text/css"
>
#Container{
    
width:1000px;
    
margin:
0
auto;
/*设置整个容器在浏览器中水平居中*/
    
background:#CF3;
}
#Header{
    
height:80px;
    
background:#093;
}
#logo{
    
padding-left:50px;
    
padding-top:20px;
    
padding-bottom:50px;
}
#Content{
    
height:600px;
    
/*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
    
margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/
    
background:#0FF;
    
}
#Content-Left{
    
height:400px;
    
width:200px;
    
margin:20px;/*设置元素跟其他元素的距离为20像素*/
    
float:left;/*设置浮动，实现多列效果，div Css布局中很重要的*/
    
background:#90C;
}
#Content-Main{
    
height:400px;
    
width:720px;
    
margin:20px;/*设置元素跟其他元素的距离为20像素*/
    
float:left;/*设置浮动，实现多列效果，div Css布局中很重要的*/
    
background:#90C;
}
/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
#Footer{
    
height:40px;
    
background:#90C;
    
margin-top:20px;
}
.Clear{
    
clear:both;
}
</style>
</head>
<body>
<div id=
"Container"
>
    
<div id=
"Header"
>
        
<div id=
"logo"
>这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div>
    
</div>
    
<div id=
"Content"
>
        
<div id=
"Content-Left"
>Content-Left</div>
        
<div id=
"Content-Main"
>Content-Main</div>
    
</div>
    
<div 
class
=
"Clear"
><!--如何你上面用到
float
,下面布局开始前最好清除一下。--></div>
    
<div id=
"Footer"
>Footer</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN"
""
>
<html xmlns=
""
>

<head>

<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>

<title>DIV CSS布局流程</title>

<style type=
"text/css"
>

#Container{

    
width:1000px;

    
margin:
0
auto;
/*设置整个容器在浏览器中水平居中*/

    
background:#CF3;

}

#Header{

    
height:80px;

    
background:#093;

}

#logo{

    
padding-left:50px;

    
padding-top:20px;

    
padding-bottom:50px;

}

#Content{

    
height:600px;

    
/*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/

    
margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/

    
background:#0FF;

    

}

#Content-Left{

    
height:400px;

    
width:200px;

    
margin:20px;/*设置元素跟其他元素的距离为20像素*/

    
float:left;/*设置浮动，实现多列效果，div Css布局中很重要的*/

    
background:#90C;

}

#Content-Main{

    
height:400px;

    
width:720px;

    
margin:20px;/*设置元素跟其他元素的距离为20像素*/

    
float:left;/*设置浮动，实现多列效果，div Css布局中很重要的*/

    
background:#90C;

}

/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/

#Footer{

    
height:40px;

    
background:#90C;

    
margin-top:20px;

}

.Clear{

    
clear:both;

}

</style>

</head>

<body>

<div id=
"Container"
>

    
<div id=
"Header"
>

        
<div id=
"logo"
>这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div>

    
</div>

    
<div id=
"Content"
>

        
<div id=
"Content-Left"
>Content-Left</div>

        
<div id=
"Content-Main"
>Content-Main</div>

    
</div>

    
<div 
class
=
"Clear"
><!--如何你上面用到
float
,下面布局开始前最好清除一下。--></div>

    
<div id=
"Footer"
>Footer</div>

</div>

</body>

</html>

注解：Container作为整个页面的容器，控制着整个页面在浏览器的位置，此处使用margin:0 auto;控制Container容器在浏览器中水平居中，一般固定宽度的布局都会用到这就代码。

DIV CSS布局-固定页面开度布局相关推荐

  1. div+css实现有序新闻文章列表布局

    div css布局中常常遇到文章标题列表前有序号(1-10)排版布局,如何简单实现这类新闻文章标题列表排版布局呢?如看到列表布局前有1 2 3 4 5 6 7等数字顺序. 最终效果图:  一.布局思维 ...

  2. div css左边固定右边自适应布局

    web前端开发之布局:先看效果图,最简单的左右布局.有可能还会被面试问道哈哈哈.一看也没什么特别之处,就是左边固定,右边自适应,就这么简单. 原理:通过设置一个margin-left;或者margin ...

  3. CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例

    我们碰到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...

  4. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  5. html图片右侧布局,DIVCSS5模块 上标题下(左图片 右简介)DIV CSS布局

    DIVCSS5模块 上标题下(图片 简介)DIV CSS布局完整HTML+CSS代码,实例模块布局教程,图文在线演示,完整案例压缩包下载. 上下结构上标题下(左图右简介)DIV CSS模块效果截图 这 ...

  6. 金典 DIV+CSS 3行2列 布局详解--企业网站通用的基本布局详解

    我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...

  7. Divbrush 网页Div css画板定位布局系统 v1.8

    Divbrush 网页Div css画板定位布局系统软件是一款专业制作DIV+CSS的切图与样式布局的网页前期设计软件. Divbrushv1.0基本上实现了可视化DIV容器布局的画板辅助功能,通过图 ...

  8. DIV+CSS技术的研究

    第一章 DIV+CSS技术的基础知识 第一节DIV+CSS的基本概念 DIV+CSS是网站标准(或称"WEB标准")中常用术语之一,通常为了说明与HTML网页设计语言中的表格(ta ...

  9. div+css+jquery仿写HTML京东首页的练习及一些关于oo css的总结

    整个工程: https://download.csdn.net/download/weixin_43388844/10864383 前言 前几天看b站上极客学院的web前端开发第二部分时了解到OO C ...

最新文章

  1. 只因接了一个电话，程序员被骗 30 万！
  2. 忽略并存在数据损坏风险_内部审计快速启动数据分析的6个关键点
  3. Head First FILE Stream Pointer Overflow
  4. UVA 10273 Eat or not to Eat?
  5. mybatis之trim prefix= suffix= suffixOverrides= prefixOverrides=/trim
  6. Cocos2d-x之绘制填充矩形
  7. x264_param_t参数注解
  8. angularJS中，怎么阻止事件冒泡
  9. VC多线程编程之线程创建与示例
  10. 矩阵的Cholesky分解
  11. 使用gdb和core dump迅速定位段错误
  12. Machine Learning——Homework 6
  13. delphi调用chrome内核进行浏览
  14. 计算机课软件有哪些,电脑录课有哪些软件？
  15. Java程序：迷宫地图生成器
  16. 最大似然估计和最小二乘法 含代码
  17. CSS CSS3 pdf 电子书大全 百度云
  18. 虚幻竞技场3中的配置文件
  19. G.726音频编解码原理介绍
  20. 代理模式Proxy——在线代理

热门文章

  1. 【强化学习】可视化学习tensorboard
  2. css实现简单的告警提示动画效果
  3. python函数的 全局变量与局部变量
  4. 【转】从 ArcGIS for Desktop 发布地图服务
  5. CentOS下mysql数据库常用命令总结
  6. [ExtJS5学习笔记]第三十五条 sencha extjs 5 组件查询方法
  7. define 汉字 error C2001: newline in constant
  8. 基于Verilog语言的伪随机码的编写
  9. VIsual Studio编译OpenCV：无法打开python27_d.lib（python36_d.lib）的问题
  10. 原理图中如何连线_Altium Designer10绘制原理图