17.1.5 依旧是布局

1.了解了2D/3D 转换属性(Transform)过渡属性(Transition),过度属性让css3不用js也能实现动画效果

2.clearfix的用法,用在哪   首先理解下为什么要用clearfix,因为一个父块中有一群不听话浮动的子集,若父集没有设置高度,那么他就会坍缩,以前解决的办法是添加都一个子集div用clear:both来解决,但是这样的话就多了一个儿子,还没名分的那种不好,所以就有了这个clearfix的方法,这个方法其实  整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果。

一下是bootstrap里面clearfix的写法,这是依据BFC构成方法写出的

clearfix这个类名用在父集标签上

.clearfix {    

*zoom:1;            /*针对IE6的写法*/

}

.clearfix:before,  

.clearfix:after {

display: table;     /*这个display,用inline-block会产生空白 或者table-caption会导致兼容问题,所以用table就行了*/

line-height:0;

content:"";  /*内容为空或者别的都行*/

}

.clearfix:after {

clear:both;

}

3.在写页面的时候遇到一个比较白痴的问题就是当浏览器页面减小,拖动滚动条的时候设定的宽度不填充

后来在设置背景的容器里面加入min-width就解决了

4.行高和字号的关系,尽量用em来控制文本中的行高,这样不用重复调整所有参数,所以为了更好地参数设置,干脆就直接设置一个固定的父集字号,后面的字号设置成父集的百分比,行高又或者是padding,margin,border-radius这类有关的值都设置成em。这样只需要调整字号所有的值都随之变化。rem是相对根目录也就是html的,若html设置了16px 的fontsize   1rem=16px;

5.了解下CSS3 中的多栏 瀑布流布局

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 4,675评论 0 2
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,717评论 0 1
  • 外边距的合并 首先要明白,外边界的合并出现在垂直方向上,由于默认的普通流中,块级元素从上到下排列,通过margin...
    sunny519111阅读 2,905评论 0 0
  • 自我投资,用的是自己的金钱和时间。 金钱的重要性我们就不用说了,但往往我们会把“时间”这个概念看得很模...
    露露儿Lucy阅读 1,891评论 1 4