本文同时发布于本人的个人网站www.yaoxiaowen.com

百度创办的前端技术学院，是一个面向大学生的前端技术学习平台。虽然只有大学生才有资格报名，提交代码进行比赛排名。但是这并不妨碍我们这些初学者也可以按照他们的任务列表，进行刷题。虽然ife名义上是针对初学者，但是我看了一下任务列表，那些任务还并不是那么简单。所以很适合初学者把任务刷一遍，我觉的，把这些任务都刷完，那么前端算是入门了。

对于代码学习来讲，除了实际的去敲，还有其他更好的学习方法吗？因此我计划按照ife的任务都刷一遍，代码提交到我的github，同时将刷题过程中，碰到的问题，疑难点都用我的博客记录下来，一来做为自己的总结和反思，二来也希望我的文字和记录能够为其他初学者提供一些细微的帮助。

所以那些熟悉前端的同学，就不要阅读我的这些基础性的博客来浪费时间了。。当然，我理解错误的地方，或者总结的不到位的地方，欢迎打脸批评。

1，关于chrome浏览器的快捷键，开发者调试， window下是f12，mac下是command＋option＋i； 刷新 ：window下是 f5，mac下是 command ＋ shift＋ r；

2，关于css reset的概念。，在未接触前端之前，就知道浏览器乱象了。虽然现在h5的出现，总算可以结束大部分的纷争。但是且不说面对之前各个旧版本浏览器的兼容， 就说最新的各个浏览器，面对不同的标签，显示上依旧会有细微差别。比如strong标签的加粗，em标签的倾斜。而我们开发的目标自然是在不同浏览器上有完全相通的表现，所以为了避免这些差异，那么我们可以在css的最开头，将浏览器的默认样式都去掉（严格点说，是叫做覆盖，而不是去掉，将不同浏览器提供的一些默认样式覆盖掉），通过我们写的css，来重新定义一些默认的标签样式，这就叫做css reset。

最初的，也是最简单粗暴的css reset内容如下

 * {

     padding:;

     margin:;

     border:;

  }

当然，我们也可以写更多内容。比如我们可重置button的相关属性，这样不同浏览器就可以统一表现。但是，凡事有利必有弊，写了很多代码，那么必然会造成冗余，或者对速度性能有所影响，比如那个简单粗暴的＊，通配符必然需要遍历整个DOM树，这不影响性能才怪呢。所以这中间都有取舍。。不过我们打造自己的 css reset文件，就是在学习的过程当中不断的总结，完善自己的css reset文件，这样项目当中直接引用，那是最好的。

3，关于清除浮动。我在写任务三：三栏式布局时的任务时，注意到这个问题的。。要求是左右内容固定，中间内容的高度自适应，并且整个背景的宽度是三栏当中的最大高度.那么自然的，我们就想到使用浮动，一个浮动到左边，一个浮动到右边，中间设置左右margin，那么代码如下：

css代码

     #allContent{

         background-color: #eee;

     }

     #leftContent{

         float: left;

         width: 200px;

     }

     #rightContent{

       float: right;

       width: 200px;

     }

     #middleContent{

         margin-left: 240px;

         margin-right: 240px;

     }

html代码

 <div id="allContent">

         <div id="leftContent">

             <img src="img/flower.png"/>

         </div>

         <div id="rightContent">

             <img src="img/pu_gong_ying.png"/>

             <img src="img/pu_gong_ying.png"/>

         </div>

         <div id="middleContent">

             <p>/**  实际内容省略，节约篇幅  **/</p>

         </div>

     </div>

而实际的显示效果呢　　　　

左右伸缩一下浏览器宽度可以发现，背景高度其实是只和middleContent有关，仔细思考，就可以知道原因，左右部分既然float，那么就已经脱离了流，所以整个背景已经感受不到左右部分了。自然就和左右部分的高度没关系。当然初学者很容易想到，middleContent部分可以clear：both，但是再细想，这样设置之后会产生什么效果呢，那就是middleContent部分会在左右两部分的下面，而不是和左右并列呢。聪明的同学可以想到一个解决方案，那就是我能不能在这三部分的下面设置了实际上没内容的区域，但是clear：both，从而起到支撑高度的作用呢。我们先试试再说 。

 <style>

     /**  ......  **/

     #middleContent{

         margin-left: 240px;

         margin-right: 240px;

     }

     #bottomContent{

         clear: both;

     }

 </style>

 <body>

     <div id="allContent">

         <div id="leftContent">

             <img src="img/flower.png"/>

         </div>

         <div id="rightContent">

             /**  ......  **/

         </div>

         <div id="middleContent">

             /**  ......  **/

         </div>

         <div id="bottomContent"></div>

     </div>

 </body>

再看看实际效果：达到了我们想要的效果。左右拉伸一下浏览器，改变其大小，再试试。效果很完美。

也就是说，我们通过在底部设置一个（实际没内容的）区域，同时clear：both来完美的实现了我们的要求，但是有没有更优雅的办法呢。毕竟html负责展现实际内容，我们这样写，实际上是属于多了冗余内容，在维护时，也容易造成误解。。所以我们就寻求一种在css中，更优雅的办法去满足我们的要求。首先，我们先删除之前代码html内容的 bottomContent 那个div，同时代码在上述内容的基础上做如下修改：

 /**  ...... */

 <style>

     .clearContent {

     /**  触发 hasLayout，关于IE的一个特性，但是这个其实我好不了解 **/

         zoom:;

     }

     .clearContent:after {

         content:'';

         display:block;

         clear:both;

         visibility: hidden;

         }

 </style>

     /**  ...... */

     <div id="allContent" class="clearContent" >

 /**  ...... */

      我们通过测试可以看到，依旧可以达到我们的效果，所以我们可以通过修改css的内容来实现我们的效果，这几句代码其实是这个意思.

      ：after是个伪元素。代表一个元素之后最近的元素，并且可以被各个不同浏览器兼容，那句代码的意思就是说，我们在clearContent元素末尾添加了一个块元素（所以看不到），而我们设置了这个块元素clear：both，所以它可以支撑的起这个高度，所以说白了。这和我们上面添加在html中添加空区域做法差不多，但是这种方式更加优雅，避免冗余，因为归根到底，html负责内容，css负责样式。

后记：

这是我的第二篇博客，距离上一篇博客过了一个多月，中间刷ife任务的github代码提交也没时间，很惭愧，没有完成自己的计划，目前公司的的项目太急，加班太多了，累成了狗，所以空闲时间太少了。但是不管怎么样，记得自己的梦想，去努力的提高自己。完善自己。。且行且努力。

-------
作者: www.yaoxiaowen.com
github: https://github.com/yaowen369

ife任务刷题总结（一）－css reset与清除浮动的更多相关文章

  1. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  2. 深入理解css系列：清除浮动

    如果出现div嵌套,内层元素浮动,而外层包裹的父元素div未设置高度的时候,那么会出现外层不能被撑开的情况. HTML标签代码: <div class="wrap"> ...

  3. css 3种清除浮动方法

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  4. CSS知识点：清除浮动

    开场白 我们平时工作中,很容易遇到浮动效果.一个DIV中嵌套多个DIV,左边显示一个DIV,右边显示一个DIV,外层DIV的高度随着内层内容的高度变化.这就是最基本的浮动效果.下图的百度搜索结果就是一 ...

  5. css公共库——清除浮动

    清除浮动是css的基础,但有时候会忘了一些最简单的东西 浮动因为在文档流之外,所以会造成父元素的坍塌.父元素之后的元素排版就会乱. 常用的方法是在浮动父元素中添加cf类,然后定义cf样式,并将其放在公 ...

  6. [转]CSS clear both清除浮动

    DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...

  7. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  8. CSS clear both清除浮动总结

    我们知道有时候使用了CSS float浮动,会产生CSS浮动,这个时候就需要清理浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习CSS clear知识与用法. clear清除浮动目录 ...

  9. CSS学习系列2 -- CSS中的清除浮动

    CSS中有一个很常见的问题,就是元素的浮动. 那么,到底什么是元素的浮动呢,我们来看一个例子 举个例子,在一个div里面内部有浮动元素的话,这个浮动元素会让这个div的高度塌陷. .myDiv{ ba ...

随机推荐

  1. ios原声音频播放AVAudioSession 总结

    //音频播放/*英译:record:录音 */ 1 导入头文件#import<AVFoundation/AVFoundation.h>//AVAudioSession是一个单例模式.在IO ...

  2. sqlserver索引小结

    1.1 什么是索引? SQL索引有两种,聚集索引和非聚集索引,索引主要目的是提高了SQL Server系统的性能,加快数据的查询速度与减少系统的响应时间 下面举两个简单的例子: 图书馆的例子:一个图书 ...

  3. HTTP错误500.19-定义了重复的节点

    打开服务器的asp.net页面时出现这个错误: HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效.   解决办法: 打开II ...

  4. [译]：Orchard入门——导航与菜单

    原文链接:Navigation and Menus 文章内容基于Orchard1.8版本.同时包含Orchard 1.5之前版本的导航参考 Orchard有许多不同的方法来创建菜单.本文将介绍两种较为 ...

  5. github之git基本命令介绍的简单整理

    git 格式: git [--version] [--exec-path[=<path>]] [--html-path] [--info-path] [-p|--paginate|--no ...

  6. 要将 ASP.NET 访问权限授予某个文件，请在资源管理器中右击该文件，选择“属性”，然后选择“安全”选项卡。单击“添加”添加适当的用户或组。突出显示 ASP.NET 帐户，选中所需访问权限对应的框。

    找到该文件所在文件夹,右键属性,安全选项卡,添加-aspnet用户,并设置其权限为完全控制.如果还是不行,就添加一个Everyone用户并赋予完全控制权限windows server 2008中IIS ...

  7. 用介个新的blog咯..

    之前csdn实在是太卡了.. 只要一写比较长的blog就卡的要死.. 转过来这吧,比较好吧.. 原blog地址 啊为啥域名叫darklove呢.. 这是很久之前创建的.. 简单来说是一个和clearl ...

  8. js简单放羊式单元测试-上

    这是看了很多js单元测试资料后第一次自己做单元测试,因为资料都在介绍工具怎么使用,js单元测试的工具是在是太多了,各种风格,各种支持的,新的旧的,so 还是自己动手来体验一次 简单 是我给自己的需求很 ...

  9. 有了门面，程序会更加体面！- pos软件基于三层架构 -09

    续上篇)        大鸟说道:“实际上没有学过设计模式去理解三层架构会有失偏颇的,毕竟分层是更高一级别的模式,所谓的架构模式.不过在程序中,有意识的遵循设计原则,却也可以有效的做出好的设计.”   ...

  10. 使用XML文件记录操作日志，并从后往前读取操作日志并在richTextBox1控件中显示出来

    #region 获取本地程序操作记录日志 /// <summary> /// 获取本地程序更新日志信息(由后往前读取) /// </summary> private void ...