Float:

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

Margin:

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

Padding:

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

Clear:

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

ex:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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布局中主要CSS属性介绍的更多相关文章

  1. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  2. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  3. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  4. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  5. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  6. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  7. CSS布局中最小高度的妙用

    CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...

  8. css布局中的垂直水平居中对齐

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

  9. CSS布局中——导航是非常常见的

    导航绝对是页面布局中最常见的,为了不用每次去写,稍微贴个简单的导航模版出来,方便以后使用. <title>CSS菜单</title> <style type=" ...

随机推荐

  1. IE浏览器下常见的CSS兼容问题

    目录 [1]宽高bug [2]边框bug [3]盒模型bug[4]列表项bug [5]浮动bug [6]定位bug [7]表单bug 宽高bug [1]IE6-浏览器下子元素能撑开父级设置好的宽高 & ...

  2. bootstrap插件学习-bootstrap.alert.js

    我们先看bootstrap.alert.js的结构 var dismiss = '[data-dismiss="alert"]' //自定义属性 Alert = function ...

  3. Apache Shiro 简介

    使用 Apache Shiro 为 web 应用程序进行用户身份验证 Shiro 是一个 Apache Incubator 项目,旨在简化身份验证和授权.在本文中,了解 Apache Shiro 并通 ...

  4. NeHe OpenGL教程 第二十八课:贝塞尔曲面

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  5. dictionary (key-value) (map容器)

    #dictionary可以保存不同类型的值 menu = {'fish0':14.50} list = [] menu['fish1'] = 10.1 # Adding new key-value p ...

  6. Maven项目搭建(三):Maven直接部署项目

    上一章给大家讲解了如何使用Maven搭建SSM框架项目.   这次给大家介绍一下怎么使用Maven直接部署项目.   Maven直接部署项目  1.新建系统变量CATALINA_HOME,值为:Tom ...

  7. JavaScript js 引入CDN 不生效 注意事项

    [博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708]https ...

  8. K2助力大鹏绿色环保之路

    K2和大鹏结缘可以追溯到2006年,两家践行绿色环保理念的公司一拍即合,开始了十余年的合作之路,在“绿色环保”的路上留下了坚实的脚印. 绿色能源:LNG   广东大鹏液化天然气有限公司成立于2004年 ...

  9. caffe实际运行中遇到的问题

    https://blog.csdn.net/u010417185/article/details/52649178 1.均值计算是否需要统一图像的尺寸? 在图像计算均值时,应该先统一图像的尺寸,否则会 ...

  10. block(五)用法

    最近又从网上找了点block用法的博客,供大家参考. Block简介: Block的实际行为和Function很像,最大的差别是在可以存取同一个Scope的变量值.Block实体形式如下: ^(传入参 ...