今天完成的事情：完成了任务2，但是字体大小还没有改，做了关于cssmargin负边距的知识。

明天计划的事情：学习任务3，修改任务2 和任务1；

遇到的问题：好像做的太慢了。。。。

收获：学会了onkeyup和一点点正则表达式的用法。

小课堂分享：

css-08 margin负值在页面布局中有哪些应用？ 

            小课堂【成都-158期】

            分享人：先小波

1.背景介绍 

CSS盒模型中，margin是我们老熟悉的一个属性了， 它的负值你用过吗？ 如何实现经典的圣杯布局？

2.知识剖析

1一个负margin应该是这样设置的                

#content {margin-left:-100px;}或者#content{margin-left:-100%;}

如果使用得当，负margin是非常强大的属性，以下是2种可以使用margin的场景。

使用margin水平垂直居中

                    body{margin:0;padding:0;}

                    #test{

                       width:200px;

                       height:200px;

                       background:#F60;

                       position:absolute;

                       left:50%;

                       top:50%;

                       margin-left:-100px;

                       margin-top:-100px;

                    }

实现圣杯布局

3.常见问题

margin和padding百分比的问题？

假设一个块级包含容器，宽1000px，高600px，块级子元素定义 margin:10% 5%; 大家说说 margin 的 top, right, bottom, left 计算值最终是多少？

4.解决办法

事实告诉我们结果是 100px 50px 100px 50px，不论结果是否符合你的预期

5、编码实战

曾经有这样一个经典的需求： 1）两栏抑或三栏布局，主体自适应宽度； 2）一个或两个侧边栏固定宽度； 3）主体部分xhtml结构在最前面（网速慢时可以优先显示，对SEO有利） 4）自适应高度，且不影响等高； 5）兼容IE6+，firefox，chrome，opera。 于是乎margin负值便大放光彩，首先是国外出现的圣杯布局，掀起一股margin负值热潮

（1）、基本布局

   <header><h4>Header内容区</h4></header>

  <div class="container">

  <div class="middle"><h4>中间弹性区</h4></div>

  <div class="left"><h4>左边栏</h4></div>

  <div class="right"><h4>右边栏</h4></div>

  </div>

css设置左边栏和右边栏宽高都为200px;向左浮动，中间弹性区宽为100%;高为200px;  

2）利用负边距让左右两个盒子浮动上去        

利用负边距让左右两个盒子浮动上去      

.left {margin-left:-100%;}

.right {margin-left：-200px;}

2.5）遇到的问题 

3）让中间自适应的盒子安全显示

.container{ padding: 0  200px;}

                    .left{ position: relative; left: -200px;}

                    .right{position: relative;right: -200px;}

4）完成图

6

扩展思考

margin负值还能运用到哪些地方？

去除列表右边框和下边框

7参考文献

参考文献：

[1]http://blog.csdn.net/zhousning/article/details/40930097

[2]http://www.jianshu.com/p/f9bcddb0e8b4

[3]http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

8.更多讨论