css经常使用的技巧

时间 2019-11-08

标签 css 经常使用技巧栏目 CSS 繁體版

原文原文链接

1.CSS中没有//注释，只有/**/注释：css

2.将图片做为背景html

当给页面添加图片时，尤为须要图片是响应式的时候，最好使用background属性来引入图片，而不是<img>标签。浏览器

这看起来使用图片会更复杂，但实际上它会使设置图片的样式变得更加容易。有了background-size, background-position和其它的属性，保持或改变图片原始尺寸和宽高比会更方便。编辑器

//div
<section>
    <p>Img element</p>
    <img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle">
</section>

<section>
    <p>Div with background image</p>
    <div></div>
</section>

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

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

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

3.更好的表格边框ide

HTML中的表格老是很难看的。它们很难作成响应式的，并且整体上很难改变样式。例如，若是要向表格及其单元格添加简单的边框，则最可能的结果是：函数

如你所见，有不少重复的边框，看起来很很差看。这里有一个快速的方法来删除全部的双倍边框：border-collapse: collapse，只需设置这个属性后，表格的边框看起来就顺眼多了：工具

4.使用transform属性来建立动画post

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

下面的例子中，咱们给.ball元素添加了一个从左向右的移动动画。推荐使用transform: translateX()函数来代替left属性。url

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}

/* 不建议 */
.ball.slide-out {
    left: 500px;
}

/* 建议 */
.ball.slide-out {
    transform: translateX(450px);
}

transform以及它的全部函数（translate, rotate, scale等）几乎没有浏览器兼容性问题，能够随意使用。

5.使用text-transform转换字母为大写

本条适用于英文环境，不适合中文

在HTML中，能够将某个单词所有写为大写字母来表达强调的含义。好比：

<h3>Employees MUST wear a helmet!</h3>

若是你须要将某段文字所有转化为大写，咱们能够在HTML中正常书写，而后经过CSS来转化。这样能够保持上下文内容的一致性。

<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster {
    text-transform: uppercase;
}

6.Em, Rem与px

设置元素与文本的大小应该用哪一种单位，em，rem，仍是px？一直以来都有不少的争论。事实是，这三种选择都是可行的，都有其利弊。

在何时在什么项目使用哪一种单位是没有一个定论的，开发人员的习惯不一样，项目的要求不一样，均可能会使用不一样的单位。然而，虽然没有固定的规则，可是每种单位仍是有一些要注意的地方的：

em - 设置元素为1em，其大小与父元素的font-size属性有关。这个单位用于媒体查询中，特别适用于响应式开发，可是因为em单位在每一级中都是相对于父元素进行计算的，因此要得出某个子元素em单位对应的px值，有时候是很麻烦的。
rem - 相对于<html>元素的font-size大小计算，rem使得统一改变页面上的全部标题和段落文本大小变得很是容易。
px - 像素单位是最精确的，可是不适用于自适应的设计。px单位是可靠的，而且易于理解，咱们能够精细的控制元素的大小和移动到1px。

最重要的是，不要惧怕尝试，尝试全部方法，看看最适合什么。有时候，em和rem能够节省不少工做，尤为是在构建响应式页面时。

7.使用AutoPrefixer达到更好的兼容性

浏览器前缀是CSS中最烦人的事情之一，每一个属性须要的前缀是不一致的，你永远不知道到底须要哪个，若是真的要把它一个一个手动添加到样式表中，那无疑是一个无聊的噩梦。

值得庆幸的是，有工具能够自动为咱们提供添加浏览器前缀的功能，甚至能够决定须要支持哪些浏览器：

在线工具：Autoprefixer
文本编辑器插件：Sublime Text, Atom
代码库：Autoprefixer (PostCSS)