常用的CSS代码技巧

1、重置元素的CSS样式

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  将所有元素的内外边距都设置为0了，而正是没有了这些默认内外边距的影响，使得我们后面的CSS设置会更加的容易。

2、将图片作为背景

当给页面添加图片时，尤其需要图片是响应式的时候，最好使用background属性来引入图片，而不是标签。

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

举个例子
HTML

<section>
    <p>Img element</p>
    <img src="aaa.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('aaa.jpg');
    background-position: center center;
    background-size: cover;
}

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

background引入图片的一个缺点是页面的Web可访问性会受到轻微的影响，因为屏幕阅读器和搜索引擎无法正确地获取到图像。这个问题可以通过CSS object-fit属性解决，到目前为止除了IE浏览器其他的浏览器都可以使用object-fit。

3、表格边框

HTML中的表格总是很难看的。它们很难做成响应式的，而且总体上很难改变样式。
这里有一个快速的方法来删除所有的双倍边框：border-collapse: collapse，只需设置这个属性后，表格的边框看起来就顺眼多了。

4、注释

CSS也许不是一种编程语言，但其代码仍然需要文档化。添加一些简单的注释可以将代码分类区分，方便自己和同事后期维护。

对于大的区域划分或者重要的组件可以使用下面的注释样式：

/*---------------
    #Header
---------------*/
header { }

header nav { }

/*---------------
    #Slideshow
---------------*/
.slideshow { }

对于细节和不太重要的样式可以使用单行的注释方式：

/*   Footer Buttons   */
.footer button { }

.footer button:hover { }

另外，请记住，CSS中没有//注释，只有/**/注释：

/*  正确  */
p {
    padding: 15px;
    /*border: 1px solid #222;*/
}

/*  错误  */
p {
    padding: 15px;
    // border: 1px solid #222;  
}

5、class命名

当class或者ID包含多个单词时，应使用连字符（-），CSS不区分大小写，因此不能使用驼峰式命名。同样，CSS中也不建议使用下划线连接的命名方式。

/* 正确 */
.footer-column-left { }

/* 错误 */
.footerColumnLeft { }

.footer_column_left { }
当涉及到命名时，您还可以考虑BEM，它遵循一组原则，提供基于组件并增加一致性的开发方法。

6、使用text-transform转换字母为大写

在HTML中，可以将某个单词全部写为大写字母来表达强调的含义。比如：

<h3>My name is LZQ</h3>

如果你需要将某段文字全部转化为大写，我们可以在HTML中正常书写，然后通过CSS来转化。这样可以保持上下文内容的一致性。

<div class="movie-uppercase">My name is LZQ</div>
.movie-uppercase{
    text-transform: uppercase;
}

7、角标功能

这里有一个小知识点，伪元素的 content 属性，通过 attr(xxx)，可以读取到对应 DOM 元素标签名为 xxx 的属性的值。

所以，配合属性选择器，我们可以很容易的实现一些角标功能：

<div count=“5“>Message</div>
div {
    position: relative;
    width: 200px;
    height: 64px;
}

div::before {
    content: attr(count);
    ...
}

8、长词和链接

在手机屏幕上浏览文章的时候，一个长词或者内联链接可能会导致页面出现水平滚动条。使用 CSS 的 word-break 可以防止这个问题。

.article-content p {
    word-break: break-all;
}   

9、使用 display: inline-block 时奇怪的空隙

给两个或两个以上的元素设置 display: inline-block 或者 display: inline ，将会导致它们之间产生一个微小的空隙。原因是浏览器会将元素当作字词去解释，从而给每个元素之间添加一个字符的空隙。

下面的例子中，每个项目的右侧都有一个 8px 的空隙，但是使用 display: inline-block 而产生的小空隙将会使其变为 12px，这不是我们想要的效果。

li:not(:last-child) {
    margin-right: 8px;
}

通过给父元素设置 font-size: 0 可以简单地解决这个问题。

ul {
    font-size: 0;
}

li {
    font-size: 16px; /* 应该在这里重新设置字体大小，因为它会从父元素继承 `font-size: 0`。*/
}

10、压缩或拉伸图片

用 CSS 调整一张图片的大小时，如果纵横比与图片的宽高不一致，则图片会被压缩或拉伸。

解决方法很简单：使用 CSS 的 object-fit。它的功能和给背景图片设置 background-size: cover 类似。

img {
    object-fit: cover;
}

详细可以查看：https://segmentfault.com/a/1190000011874066

11、为 input 添加正确的 type

为 input 使用正确的 type。这将改善移动端的用户体验，默认弹出对应的键盘，比如tel就会弹出数字键，并使用户更容易访问。

<form action="">
    <p>
        <label for="name">Full name</label>
        <input type="text" id="name">
    </p>
    <p>
        <label for="email">Email</label>
        <input type="email" id="email">
    </p>
    <p>
        <label for="phone">Phone</label>
        <input type="tel" id="phone">
    </p>
</form>

12、改变鼠标样式

*{
    cursor:url(../images/shubiao.ico),auto;
}