Margin:

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

Padding:

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

Clear:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></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>

div布局的更多相关文章

  1. 小div布局之卡片堆叠（card-stacking）

    前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...

  2. [MVC] DIV 布局

    [MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...

  3. div 布局

    转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...

  4. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

  5. DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

  6. DIV布局之道二：DIV块的嵌套，DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  7. DIV布局之道一：DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...

  8. 关于css+div布局的疑问 2017-03-19

    第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...

  9. 回答： 2017-03-19的关于css+div布局的疑问 2017-04-05

    原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...

  10. (转)盒子概念和DiV布局

    CSS盒子和DIV布局 (2013-11-24 16:17:29) 转载▼ 一.认识div层 1.<DIV>标记是一个区块容器标记,在标记之间可以放置其他一些HTML元素,例如p,h1,t ...

随机推荐

  1. VC++ 禁止WebBrowser网页跳转时发出的声音和禁止网页上的文字被选择

    转载:http://blog.csdn.net/cometnet/article/details/51082091 #include <urlmon.h> #ifndef FEATURE_ ...

  2. Spring 框架 详解 （二）

    Spring的入门的程序: 1.1.1 下载Spring的开发包: spring-framework-3.2.0.RELEASE-dist.zip ---Spring开发包 * docs :sprin ...

  3. node-webkit中使用sqlite3（MAC平台）

    前言 最近使用node-webkit开发一款博客发布软件,来替换难用的Windows Live Writer(主要是对Markdown标签的支持很差劲).为了解决博文信息临时保存的问题,想到了使用sq ...

  4. ubuntu su 密码

    Ubuntu的默认root密码是随机的,即每次开机都有一个新的root密码. Ubuntu刚安装后,不能在terminal中运行su命令,因为root没有默认密码,需要手动设定.以安装ubuntu时输 ...

  5. poj 1410 线段相交判断

    http://poj.org/problem?id=1410 Intersection Time Limit: 1000MS   Memory Limit: 10000K Total Submissi ...

  6. iOS问题处理：如何在Mac下显示Finder中的所有文件

    摘自:http://www.cnblogs.com/elfsundae/archive/2010/11/30/1892544.html 在Unix下工作,你可能需要处理一些“特殊“文件或文件夹,例如/ ...

  7. XPah学习

    资料1: 来源:http://www.cnblogs.com/ChengDong/archive/2012/06/28/2567744.html 示例Xml: <?xml version=&qu ...

  8. 关于line box，inline box，line-height，vertical-align之间的关系

    1.content area 围绕着文字的一种box,高度由font-size和font-family决定.在chrome控制器里,你用鼠标志向某个内敛元素,显示的高度值. 2.inline box的 ...

  9. ubuntu下安装gradle

    1.下载gradle 下载地址:当前版本gradle-2.10-all.zip http://gradle.org/gradle-download/ 2.解压安装gradle unzip gradle ...

  10. Scrum Meeting---Five(2015-10-29)

    今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 Java Web工程创建,hibernate框架安装,关系映射文件生成 4h 用户注册登录 4h 胡 ...