布局入门

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; /* 简写 */

• 准备图标：
• 图标大小至少是本身的2倍，因为屏幕是高清片。
  [图标下载地址]http://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4491
• 使用背景制作图标：

background-size: 16px 16px; /* 设置图标大小 */
padding-left: 18px;

在CSS文件中编写样式

• 分离样式和HTML
  1.建一个新文件 style.css，将style样式剪切到style.css。
  2.引用style.css样式：

<link rel="stylesheet" href="./style.css">