CSS3入门与提高（四）

定位(position)

定位模式(定位的分类)

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位(static)

网页中所有元素都默认的是静态定位，其实就是标准流的特性。

相对定位relative(自恋型)

1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2. 其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

绝对定位absolute (拼爹型)

父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
子级是绝对定位的话，(占位) 父级要用相对定位。（不占位）

绝对定位的盒子水平/垂直居中

1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left。
   margin: 0 auto; 加了绝对定位的盒子，margin 左右auto 就无效了

	.father {
			width: 1000px;
			height: 400px;
			background-color: pink;
            margin: 40px auto;
            position: relative;
		}
        .son {
            width: 100px;
            height: 40px;
            background-color: purple;
            position: absolute;
            /* margin: 0 auto;  加了绝对定位的盒子，margin 左右auto 就无效了 */
            /* left: 400px; */
            left:50%;  /* left 父盒子宽度的一半 */
            margin-left: -50px; /* 左走自己宽度 的一半 */
            top: 50%;
            margin-top: -20px;
        }

固定定位fixed(认死理型)

固定定位有两点：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
3. 固定定位的盒子一定要写宽和高 除非有内容撑开不用写
   例如新浪固定头条和广告

叠放次序（z-index）

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

2. 如果取值相同，则根据书写顺序，后来居上。

3. 后面数字一定不能加单位。

4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

定位模式转换

跟浮动一样，元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换，都转换为 行内块模式，
因此a标签等行内元素如果要设置宽高，那么有定位以后不用再写display：inline-block

span {
			background-color: purple;
			/* display: block; */
			width: 100px;
			height: 100px;
			/*float: left;  如果盒子本身就需要添加浮动后者绝对固定定位就不需要转换了 */
			position: absolute;
		}

元素的显示与隐藏

display 显示

设置或检索对象是否及如何显示。

• display : none 隐藏对象 与它相反的是
• display:block 除了转换为块级元素之外，同时还有显示元素的意思。
  特点： 隐藏之后，不再保留位置。

visibility 可见性设置或检索是否显示对象。

• visible : 　对象可视
• hidden : 　对象隐藏
  特点： 隐藏之后，继续保留原有位置。（停职留薪）

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

• visible : 　不剪切内容也不添加滚动条。
• auto : 　 超出自动显示滚动条，不超出不显示滚动条
• hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
• scroll : 　不管超出内容否，总是显示滚动条

CSS高级技巧

CSS用户界面样式

鼠标样式cursor

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

cursor: default 小白| pointer 小手|move 移(类似京东放大图片的鼠标样式)）|  text  文本

轮廓 outline

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

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

但是我们都不关心可以设置多少，我们平时都是去掉的（考虑谷歌或者火狐旧版本）。
最直接的写法是 ： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。

右下角可以拖拽：

<textarea></textarea>

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

以前我们学习过

• 有宽度的块级元素居中对齐，是margin: 0 auto;
• 文字居中对齐，是 text-align: center;

 vertical-align : baseline |top |middle |bottom

• baseline:基线对齐
• middle：垂直居中
• top:顶部对齐
• bottom:底线对齐

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

图片、表单和文字对齐

div {
			width: 200px;
			height: 100px;
			background-color: pink;
			margin-left: auto;
			margin-right: auto;  /* 左右自动 auto  盒子可水平居中对齐 */
			text-align: center;  /* 文字水平居中 */
			/* vertical-align: middle; 对于块级元素无效 */
		}
		img { /* 行内块 */
			/* vertical-align: baseline;  默认的基线对齐 */
			vertical-align: middle;    /* 手动改为中线对齐 */
		}
		textarea {
			height: 300px;
			width: 300px;
			vertical-align: middle;
		}

去除图片底侧空白缝隙

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决的方法就是：

1. 给img vertical-align:middle | top等等。 让图片不要和基线对齐。
2. 给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字隐藏

word-break:自动换行

主要处理英文单词

• normal 使用浏览器默认的换行规则。
• break-all 允许在单词内换行。
• keep-all 只能在半角空格或连字符处换行。

white-space

可以处理中文

• white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
• normal : 　默认处理方式
• nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

text-overflow 文字溢出

一定要首先强制一行内显示，再次和overflow属性 搭配使用

• clip : 　不显示省略标记（…），而是简单的裁切
• ellipsis : 　当对象内文本溢出时显示省略标记（…）

CSS精灵技术（sprite）（了解）

精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

精灵技术的使用

就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

<style>
		div {
			width: 17px;
			height: 13px;
			background: url(images/jd.png) no-repeat;
			background-position: 0 -388px;  /* 因为背景图片往上移动，所以是负值 */
			margin: 100px auto;
		}
		p {
			width: 56px;
			height: 49px;
			background: url(images/jd.png) no-repeat;
			background-position: 0 -438px;  /* 因为背景图片往上移动，所以是负值 */
		}
        </style>

制作精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
背景图片比较多，可以建议使用精灵技术，但是现在如果背景图片不多的话会用字体图标（iconfont)