【10】CSS（定位、精灵图）、页面布局、favicon 图标

1 定位

CSS属性名	功能	属性值
positon	设置定位	static：不定位，默认值 relative：相对定位 absolute：绝对定位 fixed：固定定位
left	距离参考点左边距离	长度
right	距离参考点右边距离	长度
top	距离参考点上边距离	长度
bottom	距离参考点下边距离	长度
z-index	设置显示层级	数字（正负值）

1.1 相对定位

① 如何设置相对定位：

position:relative;

② 相对定位元素定位的参考点

该元素原来在文档流中的位置。

③ 相对定位元素的特点

1、相对定位元素不会脱离文档流，故其他元素排列显示时，仍然参照该相对定位元素原来的位置。
2、元素设置了相对定位后，不改变原来的显示模式；相对定位也可与浮动同时设置。
3、相对定位通常用于配合绝对定位使用，想让谁作为绝对定位元素的包含块，就给谁设置相对定位。

1.2 绝对定位

① 如何设置绝对定位

position:absolute;

② 绝对定位元素定位的参考点

该绝对定位元素的包含块。

绝对定位元素的包含块：是第一个定位（任何定位都可以）的祖先元素，如果祖先元素都没有定位，就是整个页面。
没有定位的元素的包含块：其父元素

③ 绝对定位元素的特点

1、绝对定位的元素会脱离文档流，相邻元素或其父元素在文档流中会忽略其存在。
2、绝对定位的元素可以完美设置4个方向的内外边距，但其默认宽高不再参照父元素，而是被自身内容撑开。
3、不论元素原来是行内、行内块、块级以及浮动元素，设置了绝对定位之后，不再保持原来的显示模式，而是按照绝对定位元素的特点显示。
4、给多个兄弟元素同时设置绝对定位，会重叠，最后一个兄弟元素在最上面。

1.3 固定定位

① 如何设置固定定位

position:fixed;

② 固定定位元素定位的参考点

视口

固定定位的包含块是视口，与祖先元素是否定位无关。

③ 固定定位元素的特点（同绝对定位）

1. 固定定位的元素脱离文档流， 相邻的元素或父元素在文档流中会忽略其存在。
2. 固定定位的元素，默认宽高被自身内容撑开，可以完美设置4个方向内外边距。
3. 不论元素原来是行内、行内块、块级以及浮动元素，设置了固定定位之后，就按照固定定位元素的特点。

1.4 定位层级

• 默认情况下，定位元素的显示在不定位元素的上面；相对定位、绝对定位、固定定位层级相同，各定位元素之间，后面的元素显示在前面的元素上面。
• 使用 z-index 可以设置定位元素的显示层级，只有定位的元素设置 z-index 才能生效。
• z-index 的值为数字，数字越大显示层级越高，若为负数，显示层级会低于不定位的元素。
• 在实际中，如果发现元素a的显示层级>元素b，但页面显示元素a在元素b之下，检查是否元素a的父元素的显示层级<元素b。解决办法：更改或去掉元素a的父元素的显示层级设置。

1.5 定位的特殊应用

① 定位元素的默认宽度计算

• 定位元素如果设置了宽度，则不要同时设置left和right；
• 定位元素如果设置了高度，则不要同时设置top和bottom，否则会冲突；
• 定义元素如果没有设置宽度，可以利用同时设置 left 和 right，调整元素默认宽度的计算，高度同理。

② 设置定位元素在包含块中水平垂直都居中

• 方案一：给定位的元素进行设置

  position:absolute;
  left:50%;
  top:50%;
  margin-left:-宽度/2;
  margin-top:-高度/2;
  

• 方案二：给定位的元素进行设置

  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  

2 精灵图

2.1 什么是精灵图

CSS Sprites：精灵图或雪碧图，是一种背景图片的应用处理方式。将很多小图片合并到一张大图中，把整个大图作为背景图，通过 background-position 属性将合适的图片显示到元素上。

2.2 精灵图的优点

多个元素使用的同一张背景图像，图片只需下载一次，减少请求服务器的次数。

2.3 精灵图在线制作工具

https://alloyteam.github.io/gopng/

2.4 background-position设置位置的三种方式

• 使用关键字：

  background-position: left top;
  background-position: right;/* right center */
  background-position: top;/* center top */
  

• 通过长度设置图像左上角在元素上的坐标：

  background-position: 100px 20px;
  background-position: 20px; /* 20px center */
  

• 使用百分比设置背景图像位置：

  background-position: 30% 30%;
  /* 背景图像上 30%，30%的点 与 元素上 30%，30% 的点重合 */
  

3 页面布局

3.1 样式重置

开发页面前，通常要重置元素的默认样式，以免在设置样式时造成不必要的麻烦。

重置方式：

1、全局选择器：适合平时练习使用

2、reset.css：将元素的默认样式归零

3、normalize.css：解决不同浏览器样式不一致的问题，并未真正重置默认样式，只是重新设置了一下。

3.2 版心

页面中主要内容所在的区域，一般用类名.container表示。

4 favicon 图标

浏览器网页标题前的小图标，一般为.ico格式，命名为favicon.ico。

4.1 设置方法

用link标签设置在title中：

4.2 ico 在线制作工具

http://www.ico51.cn/

http://www.bitbug.net/