发表于: 2017-04-17 23:15:51

1 808


今天完成的事情:

       完成了任务15。css的模块化给我的感觉非常好,也让我对框架有了更深的理解。实际操作起来有一种拼图的感觉,在一个css里面写好几百行代码很杂乱,模块化很好的避免了这个问题,几个页面相同的部分直接在头部引入就好。直接写栅格系统模块的好处就是不用bs也不影响之前用bs布局的html代码。


       加载css link与@import的区别:

       在引入模块的时候我尝试了在一个css文件中用@import的方式去引入css模块,修改css模块代码的并没有第一时间显示修改后的样式。

       基本上来看 link 的加在会在页面显示之前全部加在完全,而 @import 会是读取完文件之后加在,所以如果网速很好或很快的情况下,会出现先开始无css定义,而后加载css定义。@import加载页面时开始的瞬间会有闪烁(无样式表的页面),然后才恢复正常(加载样式后的页面),Link没有这个问题。

他们从方法上是一样的,只是在浏览器识别上有点差距,link在支持CSS的浏览器上都支持而@import只在5.0以上的版本有效,而且还能用于浏览器过滤也就是hack的使用,兼容一些老版本的浏览器。所以最好还是使用link通用型更强,但是对于高版本的浏览器,也就是现在的浏览器来说,其实都一样,这是个没有太大意义的区分 。


对@import url()做一下总结:

   1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。

2,@import 是css2里面的,所以古老的ie5不支持。

3,当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

4,link除了能加载css外还能定义RSS,定义rel连接属性,@import只能加载css

所以我认为结合来使用就最好,比如:<link href="css/main.css" rel="stylesheet" type="text/css">引用了一个main.css文件,在main.css里面再引用@import url(footer.css);@import url(head.css);这样达到一个清晰明了的作用.


明天计划的事情:

      学习js dom前3章和js高级程序设计前7章。


问题:

     引入栅格系统需要清除模块与模块之间的浮动,只能通过改变模块高度来设置大小,margin反而没有作用了。


收获:

     Hello World!


返回列表 返回列表
评论

    分享到