一直做C/S开发的工作，但是很少做和布局相关的工作，往往都是同事将界面设计好，自己填写代码而已，对于B/S的工作，做过，但是很少没有像C/S这么多，界面布局的话，更无从谈起。

日子就这么过，一天一个样字，时间多了自己写博客，写心得，时间紧张了，要么转载别人的，要么干脆就不写了，这种心情不知道大家能理解不？今天心血来潮，决定自己尝试一下这个传说中的CSS，其实做布局首先是要分块，将界面分为自己想要的几个部分，在Winform中，一般都是通过panel+doc属性搞定，如果仔细想想，其实这个panel实际上是起到了划分占位的作用，那么在CSS中布局，划分就应该是用div来完成，本人不才，习惯了Winform的开发，所以第一个布局还是按照Winform的风格来练习的。

在CSS中DIV 属于块级别元素，块元素（例如div）在没有任何布局属性作用时，默认排列方式是换行排列，也就是说宽度是100%，即便它的高度是1px，它也会占居整行。但是在今天使用div的时候，发现一个问题，这个问题让我找了半天，我的效果本应该是下面的：

效果的代码如下，大家不要嘲笑，这个布局在做C/S开发的时候很常见，也很容易，但是在CSS这，我搞了半天。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="_10_1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

        #t1

        {

            float:left;

        }

        body

        {

            width : 100%;

            height:100%;

             margin:0,0,0,0

        }

        #top

        {

            width : 100%;

            height:50px;

            background-color:Silver

        }

          .mapstyle1

        {

            height : 100%;

            width:40px;

            background-color:Purple

        }

        #t2

        {

            height: 60px;

            width :100%;

        }

        #main

        {

         width:100%;

         height:300px;

        }

        #main #t2 #t3

        {

            width:56px;

            height:100%;

            float:right;

            background-color:Red;

        }

        #main #t2 #map

        {

             height: 60px;

             width:95%;

             background-color:Orange;

             float:left

        }

        #main .bottom

        {

            height:10px;

            background-color:  Green

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

//            var btn1 = document.getElementById("map");

//            btn1.className = "mapstyle1"

//            btn1.onclick = function () {

//                alert("hello");

//            }

        }

    </script>

</head>

<body>

<div id="main">

   <div  id ="top"></div>

  <div id="t2" >

        <div  id="t1" class="mapstyle1" >

        </div>

        <div id="map"></div>

       <div id="t3">

       </div>

   </div>

    <div  id ="bt" class="bottom"></div>

 </div>

</body>

</html>

在开始的时候，我将id为top的div 写成

<div  id ="top"/>

结果效果成了下面的样子：

这个结果是id为top的div没有出现，在google浏览器中调试发现高度为0，当将

<div  id ="top"/>

改成

<div  id ="top"></div>

效果就出来了，看来div必须成对出现呀！

在这里还学习了float的用法。

上面说过，如果给div不做任何布局，那么这个div会占据正行，该div下面的一个新的div会另起一行，如何让这两个div元素并排显示呢？float就可以解决这个问题。

CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式，HTML标签设置了float属性之后，它将不再独自占据一行，使用了float标记的元素将脱离标准流, 标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则，块状元素从上往下，内联元素从左向右的排列，当使用了relative，float等设置后，排列就不是按照标准流了。

浮动(float)细节：
      1.左(右)浮动元素，尽量靠近父元素左(右)内边沿。
      2.浮动元素尽量不去重叠交叉。
      3.浮动元素尽可能高，当不会高于父元素顶内边沿。

CSS+DIV布局初练—DIV元素必须成对出现？的更多相关文章

  1. DIV布局-高度不同DIV，自动换行并对齐

    最近弄了一个动态添加div框,每个div框内容有多有少,要支持div高度自适应,还要添加的div自动追加,并且换行还要保持每行对齐. 刚开始的效果: 要改啊,搞不定,问了UI高手,终于给出了完美解决方 ...

  2. css常用属性初总结:伪元素和伪元素

    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...

  3. [转]CSS网页布局：div水平居中的各种方法

    http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...

  4. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  5. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  6. DIV+CSS 网页布局之：一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  7. DIV+CSS 自适应布局

    两栏布局,左边定宽200px,右边自适应.如何实现?我的第一个反应就是:用flex伸缩盒呀,然后balabala...说完之后,面试官说,还有没有别的方法?flex有些浏览器不支持嗯...我愣了一下, ...

  8. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  9. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

随机推荐

  1. Qt实现桌面动态背景雪花飘落程序

            曾经收到过一份礼物,一个雪花飘落的程序,觉得效果很炫,通过前几篇的学习,我们已经掌握了贴图的一些技巧了,那么现在就可以自己实现了(当然你必须先拥有qt信号与槽的基础知识),这里先看效果 ...

  2. Traveller项目介绍

    Traveller,翻译为旅行家,是我用来实践最佳web技术的项目,主题是一个给旅行爱好者提供旅行信息的网站. 目标是组合现最流行的web技术,实现符合中国用户使用习惯的网站. 相关网址 Git:ht ...

  3. 把div固定在网页顶部

    很多网站都有把某一块固定在顶部的功能,今天上网搜搜然后自己又写了一遍,贴出来给大家看看,哪天用到的时候自己也可以随时看看 <!DOCTYPE html PUBLIC "-//W3C// ...

  4. STM32F10XXX 启动设置

    在STMF103XXX 里,可以通过Boot[1:0]引脚选择3种不同的启动模式:       启动模式选择引脚      启动模式                 说明   BOOT1   BOOT ...

  5. Winform DataGridView添加列头checkbox

    using System; using System.Data; using System.Drawing; using System.Windows.Forms; using Yanwen.Logi ...

  6. HttpClient SSL示例(转)

    原文地址: http://www.cnblogs.com/jerry19890622/p/4291053.html package com.jerry.httpclient; import java. ...

  7. sqlsever2008及以上各个安装包的说明

    LocalDB (SqlLocalDB)LocalDB 是 Express 的一种轻型版本,该版本具备所有可编程性功能,但在用户模式下运行,并且具有快速的零配置安装和必备组件要求较少的特点.如果您需要 ...

  8. json 语义分析

    json 中:元素与值用冒号 ":" 隔开元素与元素用逗号 "," 隔开{} 之间是一个对象, 对象可以层层嵌套[] 表示数组, 数组元素用逗号 ", ...

  9. （转）Mac OS X内核编程,MAC驱动开发资源汇总

    一.Mac  OS  X内核编程开发官方文档: I/O Kit Fundamentals: I/O Kit基础 - Mac OS X系统内核编程 https://developer.apple.com ...

  10. Insist

    1.怎么自动截断文本? 如题,当数据库中的数据内容超出了要显示的长度时,如果不采取措施,会破坏页面的布局美观,所以可以采用自动截断文本,需要查看的时候再把其他的内容显示出来. 没截断的时候如下图: 再 ...