css布局学习

 最近在学习css布局的东西，能够自定义页面布局，开发一个页面布局生成器。这是第一篇博客，整理页面布局的基础知识：   

首先从页面标签元素说起：

一、元素分类及其显示风格

元素分类：顶级(top-level)元素,块级(block-level)元素和内联(inline)元素

顶级元素： { html, body, iframe }

块级元素：{ p, h1~h6, div, ul }
以块显示的元素，高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。


内联元素：{ a, br, em, img, li, span }
文本的显示方式，与块级元素相反，内联元素的高度宽度是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。内联元素的显示特点就是像文本一样的显示，不会独自占据一个行.

p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在hongsediv下方，而不是右方

<div style="height: 100px; width: 100px; background-color: Red;">
    </div>
    <div style="height: 100px; width: 100px; background-color: Green;">
    </div>

而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度，这就是为什么我们一次次的在span上设置height属性不好使的原因。

块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。


行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。


例如：我们可以给div或p应用下面样式，但是a标签却无法应用下面的样式。


.test{width:100px; height:100px;}
当然我们还可以通过样式display属性来改变元素的显示方式。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。所以我们可以给a标签应用以下样式：


.test{display:block; width:50px; height:50px;}
另外，如果我们即想让一个元素可以设置宽度高度，又想让它以行内形式显示，这时我们可以设置display的值为inline-block。如：


a{display:inline-block; width:100px; height:100px;}

看一下w3c里对display属性的介绍

display的值
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact 此元素会根据上下文作为块级元素或内联元素显示。（css2.1后不使用）
marker   （css2.1后不使用）
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）

我们在显示隐藏元素的时候经常会用到把display设为none或者’’，设为none效果很明显，就是让元素脱离文档流，不显示，不占文档空间，而设为’’其实就是设置为元素默认属性block或inline，inline-block属性是CSS2.1新加值，IE8以上及其他主流浏览器都已经支持，它可以使元素像行内元素那样水平一次排列，但是框的内容符合块级元素行为，能够显示设置宽，高，内外边距。很有意思。

还有一点儿很有意思，可以通过不同的赋值改变元素生成框的类型，也就是说，通过将display属性设置为block，可以使行内元素表现的想块级元素一样，反之亦然。

二、定位：

要想了解CSS元素定位就需要了解position属性了，position属性有几个常用值如下

值                       属性
inhert          规定应该从父元素继承 position 属性的值。


static            默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。


relative          生成相对定位的元素，相对于元素本身正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。


absolute          生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。


fixed             生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

CSS有三种基本的定位机制：普通流，浮动和绝对定位

普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。

相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现会改变。

普通流：

<div style="border: solid 1px #0e0; width:200px;">
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
    </div>

相对定位：

<div style="border: solid 1px #0e0; width:200px;">
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; position:relative; top:20px; left:20px;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
    </div>

上面例子可以看出，对绿色div进行相对定位，分别右移，下移20px后第二个红色div位置并没有相应变化，而是在原位置，绿色div遮挡住了部分红色div。

 

相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。

绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块儿（body或html神马的）元素。

因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。

还是刚才的例子，稍微改动一下，让绿色div绝对定位，为了清晰显示，第二个红色div改为黄色。

<div style="border: solid 1px #0e0; width:200px; position:relative;">
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; position:absolute; top:20px; left:20px;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>

这时可以看出，绿色div是相对于父元素，也就是绿框div进行的移位，而红色和黄色div进行布局时就像绿色div不存在一样。

 

最后要说的就是fixed属性了，应用fixed也叫固定定位，固定定位是绝对定位的中，固定定位的元素也不包含在普通文档流中，差异是苦丁元素的包含块儿是视口（viewport），经常见一些页面的如人人网看在线好友那个模块总在窗口右下角，估计用的是类似技术

固定定位：

<div style="border: solid 1px #0e0; width:200px;">
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; position:fixed; bottom:20px; left:20px;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>

 

可见红色和黄色div布局没有受到绿色div影响，而无论是页面纵向滚动条在页面顶端还是底端，绿色div总是在视口左下角

tip:实现如人人网看在线好友那个模块总在窗口右下角效果，可参考以下代码：

$(document).ready( function () {

     var  html = "<div id=\"layer\" style=\"position:fixed;_position:absolute;z-index:200;display:none;width:108px; height:108px; bottom:50px;right:10px;opacity:0.75;\">" ;

     html += "<a href=\"javascript:void(0);\" title=\"返回顶部\">" ;

     html += "<span style=\"width:108px;height:108px;display:block; margin-bottom:7px;-webkit-transition:1s;-moz-transition:1s;transition:1s;background-color: transparent 9; background:#ddd url(http://images.cnblogs.com/cnblogs_com/cmsdn/387055/r_top.png) no-repeat center center;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;\"></span>" ;

     html += "</a>" ;

     html += "</div>" ;

     $( "body" ).append(html);

     $( "#layer span" ).mouseover( function () { $( this ).css( "background-color" , "#999" ); }).mouseout( function () { $( this ).css( "background-color" , "#ddd" ); });

     $( "#layer span" ).click( function () {

         $( "html,body" ).animate({ scrollTop: "0px"  }, 500);

         return  false ;

     });

     $(window).scroll( function () {

         if  ($(document).scrollTop() > 100) {

             $( "#layer" ).fadeIn( "slow" );

             return  false ;

         } else  {

             $( "#layer" ).fadeOut( "fast" );

             return  false ;

         }

     });

});

三、浮动：

首先介绍一些浮动模型的基本知识：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.帮助我们理解浮动的表现，我简单的画几个。

不浮动 
<div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; ">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>

//红向右浮动
<div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red; float:right;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green; ">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>

/红框左移,覆盖绿框 
<div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;">
        </div>
    </div>

//都向左浮动,父元素宽度为0
 <div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
        </div>
    </div>

如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,,直到有足够的扣减,如果浮动元素的高度不同,那么下下移动的时候可能被卡住

没有足够水平空间  
<div style="border: solid 5px #0e0; width:250px;">
        <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
        </div>
    </div>

卡住了
<div style="border: solid 5px #0e0; width:250px;">
        <div style="height: 120px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
        </div>
    </div>

行框和清理

前面指出浮动会让元素脱离文档流,不影响不浮动元素.实际上并不完全如此,如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。

不浮动  
<div style="border: solid 5px #0e0; width: 250px;">
        <div style="height: 50px; width: 50px; background-color: Red;"></div>
        <div style="height: 100px; width: 100px; background-color: Green;">
           11111111111
           11111111111
        </div>
    </div>

浮动
 <div style="border: solid 5px #0e0; width: 250px;">
        <div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
        <div style="height: 100px; width: 100px; background-color: Green;">
           11111111111
           11111111111
        </div>
    </div>

可以看出浮动后虽然绿色div布局不受浮动影响，正常布局，但是文字部分却被挤到了红色浮动div下边。要想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left，right，both，none表示框的哪些边不挨着浮动框。

 

div style="border: solid 5px #0e0; width: 250px;">
        <div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
        <div style="height: 100px; width: 100px; background-color: Green; clear:both;">
           11111111111
           11111111111
        </div>
    </div>

对元素清理实际上为前面的浮动元素留出了垂直空间,这样可以解决我们之前的一个问题，看前面的图片的时候我们发现div内的所有元素浮动的话就会不占据文档空间，这样父元素，高度为0，可能很多效果也不见了

 

//都向左浮动,父元素宽度为0
 <div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
        </div>
    </div>

如果我们想让父元素在视觉上包围浮动元素可以向下面这样处理

 

 

在最后添加一个空div，对它清理

<div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
        </div>
        <div style="clear:both;"></div>
    </div>

四、“盒子模型”

模型概述

盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。如下图所示：

内边距出现在内容区域的周围。如果在元素上添加背景，那么背景应用于元素的内容和内边距组成的区域。因此可以用内边距在内容周围创建一个隔离带，使内容不与背景混合在一起。添加边框会在内边距区域外边增加一条线。这些线可以有不同的样式和宽度，如实线、虚线、点画线。在边框外边的是外边距，外边距是透明的，一般使用它控制元素之间的间隔。

 

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边，如：

1 2 3 4 5 6 7 8

padding-top : 20px ;    //为元素单独设置上内边距 padding : 15px ;    //元素的所有内边距都为 15px padding : 1px 2px 3px 4px ;    //分别为每个边设置内边距，顺序为 上 右 下 左   /*外边距margin用法同内边距padding*/   border-top : 1px solid #ccc ;    //为元素单独设置上边框 border : 2px dashed #000 ;        //为所有边设置边框

 

标准模式与混杂模式下的盒模型

什么是标准模式和混杂模式

当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式。在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

怎样区分标准模式和混杂模式

浏览器根据DOCTYPE（文档声明）是否存在以及使用那种DTD来选择要使用的呈现方式。如果XHTML和HTML文档保航形式完整的DOCTYPE，那么它一般以标准模式呈现。相反，如果文档的DOCTYPE不存在或者形式不正确则导致HTML和XHTML以混杂模式呈现。

两种模式下的盒模型

标准模式下盒子的实际宽度为：

width + padding-left + padding-right + border-left-width + border-right-width

实际高度为：

heigth + padding-top +padding-bottom + border-top-width + border-bottom-width

混杂模式下盒子的实际宽度为：css中设定的width值，高度为设置的height值。当然在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。

基础知识准备就是这些，我的设计思路是，以DOM树节点的存储方式在数据库中存储每次布局的元素以及元素样式，然后将修饰的布局css样式转换为css文件，这样若改动项目布局只需对布局从新进行调整即可。