Img element

Div with background image

width: 300px;

height: 200px;

}

div {

width: 300px;

height: 200px;

background: url('');

background-position: center center;

background-size: cover;

}

section{

float: left;

margin: 15px;

}

这种技术的一个缺点是你页面的可访问性可能略有打击，因为你的图片不会被屏幕阅读器和引擎正确抓取。 这个问题可以被 object-fit 解决，但它还不被所有浏览器支持。

6. 更好的 Table 边框

HTML中的table没什么意思。它们非常古怪，难以设计成响应式的，而且很难与整体风格一致。比如说，你想为table和其中的元素添加上边框，你可能会得到下面的结果。

正如你所见到的，它有很多重复的边框而且看起来不是很好，有一个非常快速且简单的去除双边框的方法，就是将border-collapse: collapse添加到table.

这样看起来就好多了。

7. 更好的注释方式

CSS可能不是一门编程语言但它的代码仍然需要被记录，所以一些简单的注释将会对你的同事或者未来的自己很有帮助！

对于CSS中的一些比较大的模块，比如主要模块或者媒体查询，使用风格化的注释并且在其后留下一些空行。

/*---------------

#Header

---------------*/ header { } header nav { } /*---------------

#Slideshow

---------------*/ .slideshow { }

设计中的一些细节或那些不是特别重要的模块，可以用单行注释。

/* Footer Buttons */ .footer button { } .footer button:hover { }

另外，值得注意的是，CSS中没有//注释，所以当你需要注释的时候你需要使用/* */符号。

/* Do */ p {