一个项目中包含的资源有html、css、js、img、字体文件，我们目前学习到的只有img html css。所以在我们对应的位置上，我们可以先创建如下目录结构
HTML
html就是我们对应的网页，这些文件应该存放于我们的项目根目录中。html文件允许是中文。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入reset.css --> <link rel="stylesheet" href="./css/reset.css"> <!-- 引入base.css --> <!-- 引入网页本身.css --> <link rel="stylesheet" href="./css/index.css"> </head> <body> </body> </html>
CSS
css文件夹中，应该包含如下内容：
- reset.css 每个网页中都需要引入，重置样式用
- base.css 公共样式，多个页面中共有的样式。方便样式复用
- xxx.css 对应的网页的css
css文件不要用中文。
IMG
这个文件夹用来存放对应的图片资源。
图片在网页上默认底部会有一个4px左右的空白出现，如何解决这个问题
如何解决这个问题：
- 给图片设置vertical-align: middle;
- 给图片设置display: block;
行高对我们布局的影响
我们在网页上，大部分时候都是单行文本，不管是什么文本，默认都是有行高的。margin在计算时，以行高为标准，不是以文字顶部为标准。所以因为行高，经常会有几px的误差。
想要解决对应的问题，我们可以通过设置所有的行高为1进行解决
body {
line-height: 1
}
如果我们设置行高为1，就会导致一个问题，多行文本显示不好看，当我们遇到多行文本就需要单独再设置合适的行高，然后计算margin时减去对应的行高误差
对应margin - (行高 - 文字大小）/ 2 = 新的margin
3845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
