通过这些天的学习我对自己所学做了一些小总结。 Web 标准构成构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面，分别也是HTML ，CSS,JS等。基础班我们只学习了html和css。HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。我们学了一些标签。如<hx></hx> 标题标签 ； <p></p> 段落标签 ；<hr /> 水平线标签； <br /> 换行标签； <div></div> <span></span>布局标签；图像标签img； 链接标签a；<!-- 注释语句 --> 等。图像标签要注意路径。学完这些后我们又学习了表格<table></table>，列表ul  ol dl ,表单 <input type="属性值" value=""> 等。表单根据type的不同有text，password，radio，checkbox等。css对文字 背景 边框 盒子的处理。标准流派，浮动流，定位，三种应用。同时我还找了一些问题的处理方法：

1.块级盒子的水平居中(block) ，条件：有宽度 左右外边距位auto  写法： margin: 0 auto;

2.让盒子里的文字居中 ，写法： text-align：center; (适用于行内元素和行内块元素)

3.插入图片和背景图片区别，一般用插入图片，小图片用背景图，产品类图片用插入图，背景图用background-position移动位置，插入图用padding和margin移动位置

4.外边距合并，左右边距无问题 垂直相邻的两盒子外边距会合并，会按照大的margin显示。解决方法：只设置一个盒子的margin

5.嵌套块元素外边距合并（塌陷），当子元素设置垂直方向margin，父元素会随子元素一起移动。解决办法： 为父元素设置上边框。为父元素设置上padding，为父元素加overflow:hidden。注：子盒子浮动了，不会外边距塌陷

6.图片与下面盒子间有默认距离，解决办法： 把图片转化为块元素 （display: inline-block;），给图片样式加上 vertical-align:middle;

7.给下面盒子定义高，父盒子未设置高度，子盒子浮动，父盒子下面盒子会升到父盒子下面，（父盒子无高度，子盒子浮动了，影响了下面布局），解决方法 给父盒子清除浮动

清除浮动的方法：

额外标签法(隔墙法) 在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

父级添加overflow属性方法 可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

使用after伪元素清除浮动

.clearfix:after {  

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;  

}   

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

使用双伪元素清除浮动

使用方法：

  .clearfix:before,.clearfix:after {

      content:"";

      display:table;

    }

    .clearfix:after {

     clear:both;

    }

    .clearfix {

      *zoom:1;

    }

  通过这些天的学习我对自己所学做了一些小总结。 Web 标准构成构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面，分别也是HTML ，CSS,JS等。基础班我们只学习了html和css。HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。我们学了一些标签。如<hx></hx> 标题标签 ； <p></p> 段落标签 ；<hr /> 水平线标签； <br /> 换行标签； <div></div> <span></span>布局标签；图像标签img； 链接标签a；<!-- 注释语句 --> 等。图像标签要注意路径。学完这些后我们又学习了表格<table></table>，列表ul  ol dl ,表单 <input type="属性值" value=""> 等。表单根据type的不同有text，password，radio，checkbox等。css对文字 背景 边框 盒子的处理。标准流派，浮动流，定位，三种应用。同时我还找了一些问题的处理方法：

1.块级盒子的水平居中(block) ，条件：有宽度 左右外边距位auto  写法： margin: 0 auto;

2.让盒子里的文字居中 ，写法： text-align：center; (适用于行内元素和行内块元素)

3.插入图片和背景图片区别，一般用插入图片，小图片用背景图，产品类图片用插入图，背景图用background-position移动位置，插入图用padding和margin移动位置

4.外边距合并，左右边距无问题 垂直相邻的两盒子外边距会合并，会按照大的margin显示。解决方法：只设置一个盒子的margin

5.嵌套块元素外边距合并（塌陷），当子元素设置垂直方向margin，父元素会随子元素一起移动。解决办法： 为父元素设置上边框。为父元素设置上padding，为父元素加overflow:hidden。注：子盒子浮动了，不会外边距塌陷

6.图片与下面盒子间有默认距离，解决办法： 把图片转化为块元素 （display: inline-block;），给图片样式加上 vertical-align:middle;

7.给下面盒子定义高，父盒子未设置高度，子盒子浮动，父盒子下面盒子会升到父盒子下面，（父盒子无高度，子盒子浮动了，影响了下面布局），解决方法 给父盒子清除浮动

清除浮动的方法：

额外标签法(隔墙法) 在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

父级添加overflow属性方法 可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

使用after伪元素清除浮动

.clearfix:after {  

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;  

}   

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

使用双伪元素清除浮动

使用方法：

  .clearfix:before,.clearfix:after {

      content:"";

      display:table;

    }

    .clearfix:after {

     clear:both;

    }

    .clearfix {

      *zoom:1;

    }