学习的内容

• 定位的扩展
  • 绝对定位的盒子居中
  • 堆叠顺序
  • 绝对定位与行内块的关系
• CSS 高级技巧
  • 元素的显示与隐藏
  • 用户界面样式
    • 鼠标样式
    • 轮廓 outline
    • 防止拖拽文本域 resize
  • 溢出的文字隐藏
  • vertical-align 行内块垂直对齐方式
• 精灵图的使用

1、定位的扩展

①绝对定位的盒子居中

绝对定位的盒子不能通过 margin: 0 auto; 设置水平居中

在使用绝对定位时想要水平居中，可以按照如下图设置方法：

1. left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。
2. margin-left: -100px; 让盒子向左移动自身宽度的一般。
   盒子居中定位示意图
   
   居中方法1

.father {
	position: relative;
	width: 800px;
	height: 400px;
	background-color: #ccc;
	margin: 0 auto;
}
.son {
	position: absolute;
	/*向右走父元素宽度的一半*/
	/*left: 50%;*/
	/*向左走盒子自身宽度的一般*/
	/*margin-left: -50px;*/
	right: 0;
	/*bottom: 0;*/
	/*向下走父元素高度的一半*/
	top: 50%;
	/*向上走自身高度的一半*/
	margin-top: -50px;
	width: 100px;
	height: 100px;
	background-color: #f00;
	/* margin: 0 auto;
	只能使标准流里的块元素水平居中
	*/
}

居中方法2:

.father {
	position: relative;
	width: 800px;
	height: 400px;
	background-color: #ccc;
	margin: 0 auto;
}
.son {
	position: absolute;
	/*使用该技巧，子元素必须设置了宽高，被内容撑开的宽高无效*/
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100px;
	height: 100px;
	background-color: #f00;
}

② 堆叠顺序（z-index）

使用定位布局时，可能会出现盒子重叠的情况，使用 z-index 层叠等级属性可以调整盒子的堆叠顺序，如下图所示：

z-index 的 特性如下：

• 属性值：正整数、负整数或0，默认值是0，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来者居上
• 数字后面不能加单位

③ 定位与行内块的关系

行内块的特性：一行可以有多个，可以设置高度和宽度，大小是受内容的影响。

• 可以用 inline-block 转换为行内块
• 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块

因此，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度。

2、CSS 高级技巧

① 元素的显示与隐藏

CSS 中有三个显示和隐藏的单词比较常见，分别是 display、visibility 和 overflow。
他们主要的目的是让一个元素在页面中消失，但是不在文档源代码中删除掉。
display 显示
display 设置或检索对象是否及如何显示。
display: none; 隐藏对象，与其相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。
特点：隐藏之后不在保留位置。

visibility 可见性
设置或检索是否显示对象。
visible：对象可视
hidden：对象隐藏
特点：隐藏之后，继续保留原有位置。

overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible：不剪切内容也不添加滚动条。
auto：超出自动显示滚动条，不超出不显示滚动条
hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll：不管超出内容否，总是显示滚动条

② CSS用户界面样式

鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形态

cursor: url 自定义 | default 小白 | pointer 小手 | move 移动 | text 文本
/*更多可查询手册*/
/*其中自定义可如下写：*/
* {
	cursor: url("https://xxx.yy/normal.ico"),auto;
}
 /*整体默认指针*/

:link, :visited, input {
	cursor: url("https://xxx.yy/pointer.ico"),pointer;
}
/*默认超链接，按钮，编辑框指针*/

a:active, a:visited, input {
	cursor: url("https://xxx.yy/active.ico"),pointer;
}
```/*点击超链接，按钮，编辑框指针*/
实例代码及效果如下：
```HTML
<ul>
	<li style="cursor:url('https://jiangck.com/touxiang.jpg'), auto(类型)">我是自定义指针</li>
	<li style="cursor:default">我是小白</li>
	<li style="cursor:pointer">我是小手</li>
	<li style="cursor:move">我是移动</li>
	<li style="cursor:text">我是文本</li>
	<li style="cursor:not-allowed">我是不允许</li>
</ul>

• 我是自定义指针
• 我是小白
• 我是小手
• 我是移动
• 我是文本
• 我是不允许

轮廓 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline: outline-color | outline-style | outline-width

最直接写法是：outline: 0; 或者 outline: none;

防止拖拽文本域resize
resize: none 这个单词可以防止火狐、谷歌等浏览器随意的拖动文本域
可拖动和设值不可拖动的代码和效果如下：

<textarea style="resize: none;" cols="50" rols="5"></textarea>

不可拖动
右下角可以拖动

③ 溢出的文字隐藏

white-space
white-space 设值或检索对象内文本显示方法。通常使用用于强制一行显示内容。

normal：默认处理方式
nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇 br 标签对象才换行
可以处理中文

text-overflow 文字溢出
text-overflow: clip | ellipsis
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
clip：不显示省略标记（...），而是简单的裁切
ellipsis：当对象内文本溢出时显示省略标记（...）
注意一定要首先强制一行内显示，再次和 overflow属性搭配使用
使用三部曲：
① 先强制一行内显示文本
white-space: nowrap;
② 超出的部分隐藏
overflow: hidden
③ 文字用省略号代替超出的部分
text-overflow: ellipsis;

④ vertical-align 行内块垂直对齐方式

vertical-align: baseline | top | middle | bottom

设置或检索对象内容的垂直对齐方式。
vertical-align 不影响块级元素的内容对齐，它只针对于行内元素或者行内块元素特别是行内块元素，通常用来控制图片/表单与文字的对齐。

图片去底部缝隙
图片或者表单等行内块元素，他的底线会和父元素盒子的基线对齐，这样会造成图片底侧会有一个空白缝隙，解决方法就是：
1、给 img 加 vertical-align: middle | top 等，让图片不要和基线对齐
2、把 img 转化为块级元素（display:block）也能解决

3、CSS精灵技术（sprite）

多个背景小图片集合到一张图片上，作为背景。然后使用定位选择其中的一小块局部图片。
步骤如下：
1、背景图像撑不开盒子的宽高，测量精灵图局部的宽高，设置成盒子的宽高
2、将测量的局部大小的坐标值，设置为背景定位负值。