基础知识二(CSS)

是时候 get 一波新技能了,走起。

从PSD文件思考如何写代码

拿到效果图时,先不要着急动手,看一下整个页面,再根据需求对整个页面进行分析,思考以下几点:

  1. 公共模块有哪些? 常见的诸如:header footer nav button
  2. 公共样式有哪些?常见的诸如:clearfix 输入框 选择框 下拉框 按钮
  3. 图片的处理? 雪碧图base64 还是 图床

CSShead 引入

浏览器工作的过程是:浏览器解析DOM生成 DOM Tree ,结合CSS生成的 CSS Tree ,最终组成 Render Tree ,再渲染页面。也就是说浏览器在所有的 stylesheets 加载完成之后,才会开始渲染整个页面(CSS 虽然不会阻塞 DOM 解析,但会阻塞 DOM 渲染,而 JS 也会触发页面渲染,是为了保证脚本能获取到最新的 DOM 元素信息)。在这之前,浏览器不会渲染页面里的任何内容,页面会一直呈现空白。如果将 CSS 文件放在 HTML 页面底部,页面渲染就不仅仅是在等待 stylesheet 的加载,还要等待 html 内容加载完成。所以 <script> 最好放在 HTML 页面底部,<link> 最好放在头部,如果头部同时有<script><link> 的情况下,最好将 <script> 放在 <link> 上面.

合并、压缩 CSS

使用工具如 gulp webpack 等把代码压缩,去掉多余的空格和换行。还有一个最常用的就是属性简写:

1
2
3
4
5
6
7
8
9
10
11
12
13
div {
margin-top:0;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
background-image: url('test.jpg');
background-position: top center;
background-repeat: no-repeat;
border-width:1px;
border-style:solid;
border-color:#000;
color:#CCC;
}

这么长一段 CSS 代码,简写下来就四行:

1
2
3
4
5
6
div {
margin:0 10px 10px 10px;
background: url('test.jpg') no-repeat top center;
border:1px solid #000;
color:#CCC;
}

文件合并

把相同的样式提取出来作为公共样式使用, 比如 header nav footer side-bar clearfix 等一般都是公用的,可以合并为一个样式,还有样式重置,基本每个页面都要用到也可以合并为一个文件。每个页面对应一个独立的样式文件,减少页面引入同时也减少了请求。

避免使用 @import

引入 CSS 文件的方式有两种,一种是 link 元素,另一种就是 @import 。建议避免使用 @import ,因为 @import 会影响浏览器的并行下载,使得页面在加载时增加额外的延迟,增加额外的往返耗时,影响用户体验。而且多个 @import 可能会导致下载顺序紊乱。最简单的解决方法就是不使用 @import 而直接使用 link 元素。

样式重置

又是一个 艰难 的话题,网上褒贬不一,各持己见。那就看心情喽,总结一下自己常用的样式重置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
ol, ul {
list-style: none;
}
h1{
font-size: 24px;
}
h2{
font-size: 20px;
}
h3{
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5{
font-size: 14px;
}
h6{
font-size: 12px;
}

慎用通配符 *

常见的使用通配符 * 重置样式的方法:

1
2
3
*{
margin: 0; padding: 0;
}

这种方法代码少又简洁,多好用!但是它性能差,因为渲染的时候它会匹配页面上所有的元素,很多元素(比如:div、li)的基础样式上并没有 marginpadding ,造成了性能浪费,完全没有必要。

1
2
3
4
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul {
margin: 0;
padding: 0;
}

上面这种写法,代码虽然多了点,但在渲染的时候只匹配对应的元素,而且这些带有 marginpadding 的元素,才需要重置。

常见的使用通配符 * 开发的场景。

当给元素设置了宽度、内边距、边框时,实际展示的元素却超出了设定:这是因为元素的边框和内边距会撑开元素。以前有一个代代相传的解决方案:通过数学计算,使用比实际想要的宽度小一点的宽度,减去边框、内边距,而我们也可以使用一种更为简洁的方法,使用 box-sizing 属性,当一个元素为 box-sizing: border-box; 时,元素的边距和边框将不再增加它的宽度。而当我们想确保所有元素的表现都为一致时,可以使用:

1
2
3
4
5
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

当然,最好是为需要的元素单独设置 box-sizing: border-box;,而不是使用通配符 * 设定所有的元素。

0%