欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
20个编写现代CSS代码的建议
2017-10-25 17:33:19   来源:   评论:0 点击:

明白何谓Margin Collapse

不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习:

.square {
    width: 80px;
    height: 80px;
}

.red {
    background-color: #F44336;
    margin-bottom: 40px;
}

.blue {
    background-color: #2196F3;
    margin-top: 30px;
}

在上述例子中我们会发现,红色和蓝色方块的外边距并没有相加得到70px,而是只有红色的下外边距保留了下来。我们可以使用一些方法来避免这种行为,不过建议来说还是尽量统一使用margin-bottom属性,这样就显得和谐多了。

使用Flexbox进行布局

CSS实战之Flex详解以及其在微信中的兼容实现

在传统的布局中我们习惯使用Floats或者inline-blocks,不过它们更适合于格式化文档,而不是整个网站。而Flexbox则是专门的用于进行布局的工具。Flexbox模型允许开发者使用很多便捷可扩展的属性来进行布局,估计你一旦用上就舍不得了:

.container {
    display: flex;
    /* Don't forget to add prefixes for Safari */display: -webkit-flex;
}

我们已经在Tutorialzine上提供了很多的关于Flexbox的介绍与小技巧,譬如5 Flexbox Techniques You Need to Know About

使用CSS Reset

虽然这些年来随着浏览器的迅速发展与规范的统一,浏览器特性碎片化的情况有所改善,但是在不同的浏览器之间仍然存在着很多的行为差异。而解决这种问题的最好的办法就是使用某个CSS Reset来为所有的元素设置统一的样式,保证你能在相对统一干净的样式表的基础上开始工作。目前流行的Reset库有normalize.css, minireset以及 ress ,它们都可以修正很多已知的浏览器之间的差异性。而如果你不打算用某个外在的库,那么建议可以使用如下的基本规则:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

上面的规则看起来没啥用,不过如果不同的浏览器在默认情况下为你设置了不同的外边距/内边距的默认值,还是会挺麻烦的。

一切应为Border-box

虽然很多初学者并不了解box-sizing这个属性,但是它确实相当的重要。而最好的理解它的方式就是看看它的两种取值:

  • 默认值为content-box,即当我们设置某个元素的heght/width属性时,仅仅会作用于其内容尺寸。而所有的内边距与边都是在其之上的累加,譬如某个

    标签设置为宽100,内边距为10,那么最终元素会占用120(100 + 2*10)的像素。

     

  • border-box:内边距与边是包含在了width/height之内,譬如设置了width:100px的

    无论其内边距或者边长设置为多少,其占有的大小都是100px。

     

将元素设置为border-box会很方便你进行样式布局,这样的话你就可以在父元素设置高宽限制而不担心子元素的内边距或者边打破了这种限制。

以背景图方式使用Images

如果需要在响应式的环境下展示图片,有个简单的小技巧就是使用该图片作为某个

的背景图而不是直接使用img标签。基于这种方式配合上background-size与background-position这两个属性,可以很方便地按比例缩放:

 

img {
    width: 300px;
    height: 200px;
}

div {
    width: 300px;
    height: 200px;
    background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');
    background-position: center center;
    background-size: cover;
}

section{
    float: left;
    margin: 15px;
}

不过这种方式也是存在缺陷的,譬如你无法设置图片的懒加载、图片无法被搜索引擎或者其他类似的工具抓取到,有个不错的属性叫object-fit可以解决这个问题,不过该属性目前的浏览器支持并不是很完善。

相关热词搜索:代码 建议

上一篇:有关css栅格系统的故事
下一篇:JavaScript 异步进化史

收藏