使用div/css布局

—————————————————————————使用div/css布局—————————————————————————

1.如何实现固定宽度且居中的版式？
    #container{
        width:600px;/*固定宽度*/
        margin:50px auto;/*设置这个层的左右边距为auto,这样可以实现居中*/
    }
   
    这样设置后在页面的body中顶层放置一个container层就能实现固定宽带且居中的版式，页面所有的内容都在这个层中。
    注意，这个container是最顶层，其他的所用层都要嵌套在这个层中。一般来说，将这个最顶层设置为绝对宽度，其内的层设置为相对宽度，
    即百分比，这样有助于整体的调节，提高可移植性。
   
2.平行层之间的关系：
    所谓平行层就是指嵌套在同一个父层中的子层。可以将平行层的关系分成两种：垂直排列层和水平排列层。
   
    >>垂直排列层
        层块(div)默认的显示方式就是垂直显示，也就是说每个div块占用一行，是行级元素。
        这里假定父层的宽度和高度都是给定的(实际情况也正是这样)。
        我们自己定义的层必然要有其属性才行，一般的属性这样设置：
            #mydiv{
                width:100px or 90%;//设置层的宽度(绝对宽度或者相对宽度)
                height:200px;//设置层的高度也可以设置层的最小高度min-height
                margin:10px auto;//设置层相对于其它层的距离。这样设可以使得层相对于外层居中，因为左右宽度设置为了auto
                                                 //这里的10px为设置上下两个同级层的边界距离，也可以单独设置层的四个边界距离：如下
                                                 //margin-top:10px;margin-right:200px;margin-bottom:5px;margin-left:10px;
                text-align:center;//设置层内文本的对齐方式
                border:1px solid #000000;//设置层的边框(宽度、样式、颜色)
                overflow:visible/hidden/auto/scroll;//设置当层中的内容超过层大小时的显示方式具体如下：
                                //visible:将所有内容都显示出来(如果设置的是绝对高度会显示在层外，如果设置的最小高度那么层就会自动增高(这种情况仅限于，内层无浮动))
                                //hidden:不显示层中的超出部分
                                //auto:当层设置了绝对宽度时如果层中的内容过多就会自动增加滚动条，当层中设置了最小宽度时如果层中内容过多层就会自动增高
                                //scroll:无论层中内容是否过多都会增加滚动条
            }
           
    >>水平排列层
        通过上面的分析知道默认情况下的div是行级元素，但是如果希望在同一个父层下同级div同行显示，也是有办法的。
        (1). 在div中设置这样一个属性会使得div变为非行级元素，即能够在一行显示(从左向右依次排列)。
                    display:inline-block;    //注意，不能写成display:inline;
        (2). 上面的方法可以使得div在一行内从左向右依次显示，但是往往有这种需求：在一个层中最左面有一个层，最右面有一个层。
                这时可以指定div的浮动方向:float:left或者float:right
        (3). 关于水平同行层换行的说明：将层设置为同行显示之后，层就会由左向右依次排列，但是假若一行之中的层有很多，一行排列不完，
             那么就要换行显示了。这里的换行是自动的，页面会自动地找到换行点。
             
3.嵌套层之间的关系：
        所谓嵌套层，就是父层中的子层，整个页面就是由不同的层嵌套形成的。前面说到，页面中所有的内容就是放在一个叫做container的层之中，也就是说，
        其它层都是这个层的子层或者嵌套子层。这里重点研究父层与其直接子层之间的关系。
        这里假定给出的父层属性参数确定：
                    #outer{
                        margin:50px auto;//将层居中
                        width:300px;//设置宽度
                        min-height:400px;    //设置最小高度
                        border:1px solid #000000;//设置边框
                        padding:10px;//设置内边距
                    }
                首先对父层的padding属性做以下说明：padding是设置内层边框距离外层边框的距离，他是以内层为基准的，也就是说：
                父层会根据自身的padding值调整自己距离内层边框的距离，而内层不会由于外层padding值而变化。这里的padding值表示
                了上下左右四个值，还可以逐个设置：padding-top,padding-right,padding-bottom,padding-left.
                好了，下面说说子层：
                                       
                        #inner{
                            width:90%;
                            height:350px;
                            margin:30px auto;
                            border:1px dotted #00FFEE;   
                        }
                    注意，一般来说，子层的属性值往往会决定父层的表现————比如，子层宽度高度超出父层的宽度高度，这样就导致了传说中的内容溢出。
                    为了解决这个问题就牵扯到了前面说过的overflow属性。一般情况下，程序员保证子层宽度不会溢出，这样就可以只关心高度上的溢出。
                    通常将overflow设置为auto,这样如果将高度设置为最小高度值:min-height:**px;那么父层就会自动增高，
                                                                        如果将高度设置为绝对高度值，那么父层就会出现滚动条。
                            如果将overflow设置为hidden，那么溢出的部分将不显示在页面上。
                           
                    另外需要注意的一点是子层的margin属性，它不会导致父层移动，但会由于margin值导致子层移动从而导致内容溢出。