首页 > 代码库 > ife任务刷题总结(一)-css reset与清除浮动

ife任务刷题总结(一)-css reset与清除浮动

 本文同时发布于本人的个人网站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内容如下

1 * { 
2     padding: 0; 
3     margin: 0; 
4     border: 0; 
5  }

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

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

css代码 

 1     #allContent{
 2         background-color: #eee;
 3     }
 4     
 5     #leftContent{
 6         float: left;
 7         width: 200px;
 8     }
 9     #rightContent{
10       float: right;
11       width: 200px;
12     }
13     #middleContent{
14         margin-left: 240px;
15         margin-right: 240px;
16     }

html代码 

 1 <div id="allContent">
 2         <div id="leftContent">
 3             <img src="img/flower.png"/>
 4         </div>
 5         <div id="rightContent">
 6             <img src="img/pu_gong_ying.png"/>
 7             <img src="img/pu_gong_ying.png"/>
 8         </div>
 9         
10         <div id="middleContent">
11             <p>/**  实际内容省略,节约篇幅  **/</p>
12         </div>
13     </div>

        而实际的显示效果呢    

技术分享

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

 1 <style>
 2     /**  ......  **/
 3     #middleContent{
 4         margin-left: 240px;
 5         margin-right: 240px;
 6     }
 7     #bottomContent{
 8         clear: both;
 9     }
10 </style>
11 <body>
12     <div id="allContent">
13         <div id="leftContent">
14             <img src="http://www.mamicode.com/img/flower.png"/>
15         </div>
16         <div id="rightContent">
17             /**  ......  **/
18         </div>
19         
20         <div id="middleContent">
21             /**  ......  **/
22         </div>
23         <div id="bottomContent"></div>
24     </div>
25 </body>

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

技术分享

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

 

 1 /**  ...... */
 2 <style>
 3     .clearContent { 
 4     /**  触发 hasLayout,关于IE的一个特性,但是这个其实我好不了解 **/
 5         zoom:1; 
 6     }
 7     .clearContent:after { 
 8         content:‘‘; 
 9         display:block; 
10         clear:both; 
11         visibility: hidden;
12         }
13 </style>
14     /**  ...... */
15 
16     <div id="allContent" class="clearContent" >
17 /**  ...... */

 

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

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

      后记:

     这是我的第二篇博客,距离上一篇博客过了一个多月,中间刷ife任务的github代码提交也没时间,很惭愧,没有完成自己的计划,因为上个月老板突然宣布公司解散,这让我深切的体会到了一脸懵逼的感受,也体会到在魔都生活重压之下失业的惶恐,所以急着找工作,终于入职新公司,但是新的项目太急,加班太多了,累成了狗,所以空闲时间太少了。但是不管怎么样,记得自己的梦想,去努力的提高自己。完善自己。。且行且努力。

ife任务刷题总结(一)-css reset与清除浮动