CSS+DIV布局初练—DIV元素必须成对出现?

一直做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)