CSS概念：现代CSS代码 高性能 Flexbox Reset Em, Rem, Pixel !i

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

background-color: #F44336;

margin-bottom: 40px;

}
.blue {

background-color: #2196F3;

margin-top: 30px;

}

的背景图而不是直接使用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;

}

使用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;
}

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

• Better Table Borders
• 注释格式优化
• 使用Kebab-case命名变量

/*  Do     */
.footer-column-left { }
/  Don't  /

.footerColumnLeft { }
.footer_column_left { }

对于样式类名或者ID名的命名都需要在多个单词之间添加-符号，CSS本身是大小写不敏感的因此你是用不了camelCase的，另一方面，很久之前也不支持下划线，所以现在的默认的命名方式就是使用-

• 避免重复代码
  大部分元素的CSS属性都是从DOM树根部继承而来，这也是其命名为级联样式表的由来。我们以font属性为例，该属性往往是继承自父属性，因此我们并不需要再单独地为元素设置该属性。
• 使用transform添加CSS Animations

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}/* Not Cool*/.ball.slide-out {
    left: 500px;
}/* Cool*/.ball.slide-out {
    transform: translateX(450px);
}

不建议直接改变元素的width与height属性或者left/top/bottom/right这些属性来达到动画效果，而应该优先使用transform()属性来提供更平滑的变换效果，并且能使得代码的可读性会更好

• 不要重复造轮子
  现在CSS社区已经非常庞大，并且不断地有新的各式各样的库开源出来。这些库可以帮助我们解决从小的代码片到用于构建完整的响应式应用的全框架。

如果下次你再碰到什么CSS问题的时候，在打算撸起袖子自己上之前可以尝试在GitHUB或者CodePen上搜索可行方案。

尽可能使用低优先级的选择器

并不是所有的CSS选择器的优先级都一样，很多初学者在使用CSS选择器的时候都是考虑以新的特性去复写全部的继承特性，不过这一点在某个元素多状态时就麻烦了，譬如下面这个例子:

a{
    color: #fff;
    padding: 15px;
}
a#blue-btn {

background-color: blue;

}
a.active {

background-color: red;

}

我们本来希望将.active类添加到按钮上然后使其显示为红色，不过在上面这个例子中很明显起不了作用，因为button已经以ID选择器设置过了背景色，也就是所谓的Higher Selector Specificity。一般来说，选择器的优先级顺序为：ID(#id) > Class(.class) > Type(header)

• 避免使用!important
• 使用text-transform属性设置文本大写

.movie-poster {

text-transform: uppercase;

}

• 在生产环境下使用Minified代码
  为了提升页面的加载速度，在生产环境下我们应该默认使用压缩之后的资源代码。在压缩的过程中，会将所有的空白与重复剔除掉从而减少整个文件的体积大小。当然，经过压缩之后的代码毫无可读性，因此在开发阶段我们还是应该使用普通的版本。
• 使用Autoprefixers来提升浏览器兼容性
• 在大型项目中使用预处理器

$accent-color: #2196F3;
a {

padding: 10px 15px;

background-color: $accent-color;

}
a:hover {

background-color: darken($accent-color,10%);

}

1in = 96px，3pt = 4px，25.4mm = 96px等。

文本相对长度单位：em

相对长度单位是相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)

Outer inner outer
body { font-size: 62.5%; }
span { font-size: 1.6em; }

结果：外层 为 body 字体 10px 的 1.6倍 = 16px，内层 为外层内容字体 16px 的 1.6倍 = 25px（或26px，不同浏览器取舍小数不同）。

明显地，内部 内的文字受到了父级 的影响。基于这点，在实际使用中给我们的计算带来了很大的不便。(要是嵌套计算了更麻烦不如rem)

文本相对长度单位：rem

rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小.

作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的天猫tmall就使用这种办法

in > cm > pc > pt > px (3pt = 4px)

pt
绝对长度单位。点（Point）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

pc
绝对长度单位。派卡（Pica）。相当于我国新四号铅字的尺寸。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

究竟有什么区别呢？

首先要明白一点，那就是屏幕分辨率。我们知道，在不同的分辨率下，像素点的大小是不同的。所以同一个网页，以px作长度单位时，在不同的分辨率下显示的大小是不同的。在低分辨率下，像素点较大，细节不够清晰，显示的页面也大，但模糊不清。

实际上,所有的单位,无论是相对还是绝对单位,最终都是转化为px为单位的---在屏幕上的显示。所以一般来说，在网页制作时，基本单位都选择px而不是pt，因为pt也是通过浏览器的DPI转换成px显示（比如FireFox的DPI是96，则有9pt = 12px）。不仅pt，cm/in/mm等都是转换成px的。所以无论用绝对还是相对，在不同分辨率下都是会变的。不要以为我把长度设置为3cm，它就会在不同的分辨率下保持3cm不变。

那又为什么出现绝对单位和相对单位呢?

我觉得pt还是很有用的一个单位，在打印时尤其如此。现在有的网页已经实现了显示是一个页面，打印用另一种方式，我想在打印上采用的就是pt吧，因为针对不同的分辨率，打印出来的页面都是一样的大小。这就是绝对单位的第一个特征。但是依然要记住，在显示上，这个单位代表的不是真实的物理长度，它也是要根据像素的实际大小（这个跟分辨率有关）进行调整的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!