CSS高度的使用原则
- CSS一般不设置高度，区块的高度由文字的行高撑起，高度不够可以使用padding-top，padding-bottom设置。
- 设置渐变色：
background: linear-gradient(to right, #ff9000 0, #ff5000 100%);
margin: 0 10px; /* 上下距离为0，左右距离为10 */
- 行高可以用line-height和padding设置，padding设在块级元素上:
padding: 3px 0; /* 上下3像素，左右为0 */
line-height: 30px;/* 行高为30 */
- 行高 = (font-size)*(line-height）
绝对定位
- absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
- 网页中字体能显示的最小值是12px，因为浏览器设置了最小字号。
- 注意找出网页中不变的量。
- 对文字进行缩放：
transform: scale(0.7); /* 缩放0.7倍 */
图片的使用原则
- 内容的一部分，传递信息，使用img标签。
- 起装饰作用，不传递信息，用CSS承载，主要是背景图。
- 一般使用iconfont和SVG做图标。
- 背景的基本属性：
background-color: #eee; /* 直接设置背景颜色 */
background: url(images/01.png); /* 设置背景图片 url(图片地址) */
background: no-repeat; /* 取消背景平铺 */
background: repeat-x; /* 设置x方向平铺 */
background: repeat-y; /* 设置y向平铺 */
background-position: 0 0; /* 设置向哪儿对齐，可以是数字、left、right、center、top、bottom */
background-position: 2px 10px; /* 精确设置位置，可以设置负数 */
background: #eee url(images/01.png) no-repeat 2px 10px; /* 简写 */
background-size: 16px 16px; /* 设置图标大小 */
padding-left: 18px;
在CSS文件中编写样式
- 分离样式和HTML
1.建一个新文件 style.css，将style样式剪切到style.css。
2.引用style.css样式：
<link rel="stylesheet" href="./style.css">
