内容简介:1.重叠的外边距当上下垂直的外边距同时存在时会发生外边距折叠。就是只保留两个margin值中较大的那个。html:
1.重叠的外边距
当上下垂直的外边距同时存在时会发生外边距折叠。就是只保留两个margin值中较大的那个。
html:
<div class="div1"> <div class="div2"></div> <div class="div2"></div> </div>
css:
.div1{ width: 600px; height: 200px; border: 1px solid #aaa; margin: 0 auto; } .div2{ width: 50px; margin: 20px; border: 1px solid red; height:50px; }
效果:
2.重置css样式
为了避免不同浏览器的不能默认样式所带来的的麻烦,重置css样式无疑是最好的选择。
* { margin: 0; padding: 0; box-sizing: border-box; }
3.所有元素设置为Border-box
box-sizing属性有两个值:
- content-box(默认): -内容的实际尺寸。所有的padding和边框值都不包含。
- border-box : padding与边框包含在元素的宽度或高度中。
比如一个元素设置为:width: 100px;box-sizing:border-box,那么它的总宽就是100px,包括:padding与边框。
4.短横线命名
当class或者ID包含多个单词时,应使用连字符(-),CSS不区分大小写,因此不能使用驼峰式命名。同样,CSS中也不建议使用下划线连接的命名方式。
5.不要重复设置
善用继承样式,可以去掉很多重复代码。
6.使用transform属性来创建动画
最好使用transform()函数来创建元素的位移或大小动画,尽量不要直接改变元素的width,height以及left/top/bottom/right属性值。
7.注意选择器的权重
id>.class>el
8.慎用!important
因为!important的权重是最高的,它可以覆盖掉所以的样式
9.em, rem与px
- em - 设置元素为1em,其大小与父元素的font-size属性有关。这个单位用于媒体查询中,特别适用于响应式开发,但是由于em单位在每一级中都是相对于父元素进行计算的,所以要得出某个子元素em单位对应的px值,有时候是很麻烦的。
- rem - 相对于<html>元素的font-size大小计算,rem使得统一改变页面上的所有标题和段落文本大小变得非常容易。
- px - 像素单位是最精确的,但是不适用于自适应的设计。px单位是可靠的,并且易于理解,我们可以精细的控制元素的大小和移动到1px。
- 大型项目使用预处理器
Sass, Less, PostCSS, Stylus等css预处理器。它们提供诸如变量、CSS函数、选择器嵌套和许多其他很酷的功能,使CSS代码更易于管理,特别是在大型项目中。
11.压缩CSS文件
网页首要关注点就是加载速度,压缩文件无疑是其中较好的一种方式。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- PJBreedsViewController 组件开发总结
- PJPickerView 组件开发总结
- iOS开发经验总结
- PhotosKit开发总结(一)
- Clojure 开发经验总结
- threejs游戏开发经验总结
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
编写高质量代码:改善Python程序的91个建议
张颖、赖勇浩 / 机械工业出版社 / 2014-6 / 59.00元
在通往“Python技术殿堂”的路上,本书将为你编写健壮、优雅、高质量的Python代码提供切实帮助!内容全部由Python编码的最佳实践组成,从基本原则、惯用法、语法、库、设计模式、内部机制、开发工具和性能优化8个方面深入探讨了编写高质量Python代码的技巧与禁忌,一共总结出91条宝贵的建议。每条建议对应Python程序员可能会遇到的一个问题。本书不仅以建议的方式从正反两方面给出了被实践证明为......一起来看看 《编写高质量代码:改善Python程序的91个建议》 这本书的介绍吧!