今天修改任务3

   用了好几种方法没成功，刚开始是垂直居中，理解错了，认为是垂直居中是上下一起居中的，实验不对,该开始是加入了text-align:center,不知道是那有问题，没成功，有换成其他方式

   后来是设置宽高，格式错所以又不对

还有一些没有记录

添加宽高正确格式

知道了除了可以直接在a4 a6里面直接添加text-align;center,还可以直接在img里面添加需要加class，父元素添加宽

最后添加text-align:center,

明天计划写任务4

遇到的问题，分不清水平居中和垂直居中

今天收获分清了水平居中和垂直居中，水平居中是左右移动，垂直居中是上下移动

任务一总结

 <!DOCTYPE>的作用，

<DOCTYPE>是document type（文档类型）的缩写，<DOCTYPE>声明位于文档的最前面，处于标签之前，她不是html标签，主要作是告诉浏览器使用哪种html规范或者xhtml规范 来解析页面

                        删除<DOCTYPE>会发生什么

在w3c标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异，这种渲染模式叫做混杂模式，在w3c标准出来以后，浏览器对页面的渲染有了统一的标准，这种渲染方式叫做标准模式

<DOCTYPE>不存在或者形式不正确会导致html xhtml以混乱模式程现，就是把如何渲染页面端权力交给浏览器，有多少种浏览器就有多少种展示方式，因此要提高浏览器兼容性就必须重视《DOCTYPE》

                      如何理解盒模型

                     盒子模型是样式表（css）控制页面很重要的概念，如何理解盒模型和其中每个元素的用法，才能熟练使用css的定位方式和技巧，所以的页面的元素都可以看成是一个盒子，占据一定的页面空间

占据的空间要比实际使用的空间大的多，我们可以调整盒子的边框距离来调整盒子的位置

                    盒子模型是由内容，边框，间隙（padding) 间隔(margin)组成。

  盒子实际宽度（高度）=内容+边框+内边距+外边距，对于任何一个元素设置width   height 控制内容大小，也可以分别设置各自的边框，间隙(padding)   间隔(margin)

灵活设置这些盒子的这些属性。可以实现各自排版的效果

            border是元素的外围，计算元素的宽和高要把border加上特别是特殊网站页面

           border 有3个主要属性，color (颜色） width（粗细） style(样式）

          1、color主要是指定border的颜色，一共有256的3次方种颜色供我们选择。通常是16进制的值，比如红色是“#FF0000”.在HTML规范中定义，可以通过两种方式知道颜色。

  1，一种是以定义好的颜色各种命名，具体的颜色对不同的浏览器也有不同，

  2，另一种方式通过一个“#”开头的6位16进制数值表示一种颜色，6位数字分为3组，每组两个，依次表示红绿蓝三种颜色的强度，在RGB颜色模式，颜色由表明红绿蓝各成分强度的三个

数值表示，从极小值0到极大值255，所有颜色都在最低值被显示的颜色是黑色，最大值是白色。

          border-color属性用于设置边框的颜色

例如 p.one{border-style:solid;

                   border-color:orange}

       p.two{border-style:solid;

                 border-color:#ff0000;

注意   border-color是单独不起作用的，必须显使用border-style来设置边框样式

  2、width是border粗细程度，可以设置为thin、thick和length，length为具体数值，比如说border:1px #CCC solid;其中1px指的是border的width，默认值是medium，一般浏览器解析为2像素

   3、style属性可以设为none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等，其中none和hodden是不显示border，hidden可以用来解决边框的冲突问题。对于groove、inset、outset、rigde、border-style，IE会出现兼容问题，使用时一定要注意

         其中，none   hidden均可设置元素为不可见的状态，其中none属于display的属性值，hidden属于visibility的属性值，使用none时元素不在占空间，如果原先占用空间，当display变为none时，

其他元素会替补他原来的位置，而使用hidden时元素仍然占用空间，其他元素不会替补他原来的位置

         border-style: dotted   solid   double   dashed

          上边框是 dotted

           有边框是  solid

           下边框是  double

            左边框是    dashed

     border-style: dotted   solid    double

         上边框是     dotted

          左右边框是     solid

        下边框是   double

     border-style:dotted     solid

         上下边框是    dotted

         左右边框是      solid

       border-style :none 默认无边框

                           dotted    定义一个点线边框

                           dashed    定义一个虚线边框

                           solid        定义实线边框

                           double     定义两个边框，两个边框的宽度和border-width的值相同     双边框

                         groove      凹槽边框

                         ridge        垄状边框

                         outset      外凸边框

                            inset       垄状边框

                          hidden      隐藏边框

          其中groove   inset    outset    rigde     border-style    IE会出现兼容问题，使用时要注意

             padding用于控制content与border之间的距离，同时设置上下左右的padding时，可以这样写padding:10px 20px 10px 10px;分别对应上、右、下、左四个方向的padding，逆时针排序，margin属性也可以这样书写

            margin用于控制块与块（可以理解成块级元素）之间的距离。为了便于理解可以把盒子模型想象成一幅画，content是画本身，padding是画与画框的留白，border是画框，margin是画与画之间距离。

   float 浮动

float只能左右移动不能上下移动，如果向左或者向右移动，其周围元素也会跟着排列，float往往用于图像，在布局上很有用

一个浮动元素向左或者向右移动，知道他的外边缘碰到包含框或者另一个浮动框的边框为止， 浮动元素之前的元素不会受到影响

彼此相邻的浮动元素

如果几个浮动元素放在一起，周围有空间的话，它们将彼此相邻

 清除浮动用clear

元素浮动之后，会重新排列，为了避免这种情况，使用clear属性

clear属性指定元素两侧不能出现浮动元素