1、注意外边距折叠
与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。
这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。
例如：
HTML
<div class="square red"></div>
<div class="square blue"></div>
CSS
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
微信截图_20190729150255.png
红色方块与蓝色方块的上下间距是40px，而不是70px。
解决外边距折叠的方法有很多种，对于初学者来说最简单的就是所有元素只使用一个方向上的margin，比如上下的外边距我们统统使用margin-bottom。
2、所有元素设置为Border-box
大多数初学者都不知道box-sizing这个属性，但实际上它非常重要。
将所有元素都设置为border-box，可以更轻松的改变元素的大小，而不必担心padding或者border值会将元素撑开变形或者换行显示。
3、将图片作为背景
当给页面添加图片时，尤其需要图片是响应式的时候，最好使用background属性来引入图片，而不是<img>标签。
这看起来使用图片会更复杂，但实际上它会使设置图片的样式变得更加容易。
有了background-size, background-position和其它的属性，保持或改变图片原始尺寸和宽高比会更方便。
举个例子：
HTML
<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;
}
微信截图_20190729151301.png
background引入图片的一个缺点是页面的Web可访问性会受到轻微的影响，因为屏幕阅读器和搜索引擎无法正确地获取到图像。
这个问题可以通过CSS object-fit属性解决，到目前为止除了IE浏览器其他的浏览器都可以使用object-fit。
4、Em, Rem与px
设置元素与文本的大小应该用哪种单位，em，rem，还是px？
一直以来都有很多的争论。事实是，这三种选择都是可行的，都有其利弊。
在什么时候在什么项目使用哪种单位是没有一个定论的，开发人员的习惯不同，项目的要求不同，都可能会使用不同的单位。
然而，虽然没有固定的规则，但是每种单位还是有一些要注意的地方的：
em - 设置元素为1em，其大小与父元素的font-size属性有关。这个单位用于媒体查询中，特别适用于响应式开发，但是由于em单位在每一级中都是相对于父元素进行计算的，所以要得出某个子元素em单位对应的px值，有时候是很麻烦的。
rem - 相对于<html>元素的font-size大小计算，rem使得统一改变页面上的所有标题和段落文本大小变得非常容易。
px - 像素单位是最精确的，但是不适用于自适应的设计。px单位是可靠的，并且易于理解，我们可以精细的控制元素的大小和移动到1px。
最重要的是，不要害怕尝试，尝试所有方法，看看最适合什么。
有时候，em和rem可以节省很多工作，尤其是在构建响应式页面时。
网友评论