css-开发总结

时间 2019-12-06

标签 css 开发总结栏目 CSS 繁體版

原文原文链接

1.重叠的外边距
当上下垂直的外边距同时存在时会发生外边距折叠。就是只保留两个margin值中较大的那个。css

html: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-boxspa

box-sizing属性有两个值：设计

content-box（默认）： -内容的实际尺寸。全部的padding和边框值都不包含。
border-box ： padding与边框包含在元素的宽度或高度中。
好比一个元素设置为：width: 100px;box-sizing:border-box,那么它的总宽就是100px,包括：padding与边框。

4.短横线命名
当class或者ID包含多个单词时，应使用连字符（-），CSS不区分大小写，所以不能使用驼峰式命名。一样，CSS中也不建议使用下划线链接的命名方式。code

5.不要重复设置
善用继承样式，能够去掉不少重复代码。orm

6.使用transform属性来建立动画
最好使用transform()函数来建立元素的位移或大小动画，尽可能不要直接改变元素的width，height以及left/top/bottom/right属性值。htm

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文件网页首要关注点就是加载速度，压缩文件无疑是其中较好的一种方式。

1. iOS开发－开发总结
2. Taro开发总结
3. arcgis开发总结
4. mqtt开发总结
5. 开发 ajax总结
6. socket开发总结
7. ThinkPhp开发总结
8. Oracle开发总结
9. MySQL开发总结
10. jstl 开发总结
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• PHP开发工具
• 算法总结-双指针