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可以节省很多工作,尤其是在构建响应式页面时。
网友评论