第四节：定位、装饰(vertical-aligin、光标、圆角、overflow、隐藏)、background-size、阴影过渡详解
一. 定位
1. 常见网页布局形式
(1).标准文档流：
A.块级元素独占一行 → 垂直布局
B.行内元素/行内块元素一行显示多个 → 水平布局
(2).浮动
可以让原本垂直布局的 块级元素变成水平布局
(3).定位
A. 可以让元素自由的摆放在网页的任意位置
B. 一般用于 盒子之间的层叠情况
2. 静态定位
position:static, 静态定位，也就是默认值，一般用它来强制取消定位.
静态定位就是之前标准流，不能通过方位属性进行移动,之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
3. 相对定位
position: relative, 相对于自己之前的位置进行移动
特点：需要配合方位属性实现移动、相对于自己原来位置进行移动、 在页面中占位置 → 没有脱标
4. 绝对定位
position:absolute, 相对于【非静态定位】的父元素进行定位移动, 通常是 子绝父相
特点：需要配合方位属性实现移动、 默认相对于浏览器可视区域进行移动、 在页面中不占位置 → 已经脱标
5. 子绝父相
让子元素相对于父元素进行自由移动， 子元素：绝对定位 父元素：相对定位
下面例子剖析：
首先最外层的father盒子是relative定位，没问题
内层son盒子是绝对定位，满足子绝父相对，right和bottom都是相对于father盒子来的
最内层sun盒子是绝对定位，但是它的父亲是son盒子，son盒子也是绝对定位，根据绝对定位的定义，我们知道相对于【非静态定位】的父元素进行定位移动，只要是非静态的定位的父元素即可，不必一定是relative布局，只不过子绝父相更常用而已，所以sun盒子的top和right是相对于son盒子而言的。
代码分享：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .father { width: 600px; height: 600px; background-color: pink; /* 父相 */ position: relative; } .son { width: 400px; height: 400px; background-color: blue; /* 子绝 */ position: absolute; right: 0; bottom: 0; } .sun { width: 200px; height: 200px; background-color: yellow; /* 子绝 */ position: absolute; right: 0; top: 0; } style> head> <body> <div class="father"> <div class="son"> <div class="sun">div> div> div> body>
运行效果：
6. 固定定位
position:fixed, 相对于浏览器可视区域进行移动
特点：在页面中不占位置 → 已经脱标，主要用于让盒子固定在屏幕中的某个位置
7. 层级关系
改变定位元素的层级，z-index，数字越大，层级越高
8. 子绝父相实现子盒子水平竖直居中
前提：设置子绝父相
A. 水平居中方案
(1). 先让子盒子往右移动父盒子的一半：left:50%
(2). 然后沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码 transform：translateX(-50%)
B. 竖直居中方案
(1). 让子盒子往下走大盒子一半: top:50%
(2). 让子盒子往下走大盒子一半: transform：translateY(-50%)
C. 水平竖直居中合并写法
left: 50%;
top: 50%;
/* transform: translateX(-50%) translateY(-50%); */
transform: translate(-50%, -50%);
代码分享：
Document
运行效果：
二. 装饰
1. 垂直对齐方式
A. 什么是基线？
浏览器文字类型元素排版中存在用于对齐的基线（baseline)
B. 属性值
C. 用途
(1). 文本框和表单按钮无法对齐问题
(2). input和img无法对齐问题
(3). div中的文本框，文本框无法贴顶问题
(4). div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
(5). 使用line-height让img标签垂直居中不生效问题
(6). img标签默认下方有个间距, 该属性vertical-aligin:middle 可以去掉image下间隙问题
注意：学习了浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题，推荐优先使用浮动完成效果
代码分享
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> /* 1.文本框和表单按钮无法对齐问题 */ .c1 input { /* 加个宽高看的更明显 */ height: 40px; box-sizing: border-box; /* 之前的方案：设置浮动 */ /* float: left; */ /* 新方案 */ vertical-align: bottom; } /* 2. input和img无法对齐问题 */ .c2 img { vertical-align: bottom; } /* 3.div中的文本框，文本框无法贴顶问题 */ .c3 { width: 400px; height: 200px; background-color: pink; } .c3 input { vertical-align: top; } /* 4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题 */ .c4 { width: 400px; background-color: green; } .c4 img { /* 解决方法一：改变img标签的垂直对齐方式不为baseline即可 */ vertical-align: bottom; /* 解决方法二：设置img转换成块级元素 */ /* display: block; */ } /* 5. 使用line-height让img标签垂直居中问题 */ .c5 { width: 400px; height: 400px; line-height: 400px; background-color: cornsilk; } .c5 img { vertical-align: middle; } style> head> <body> <div class="c1"> <input type="text"> <input type="button" value="搜索"> div> <div class="c2"> <input type="text"> <img src="./images/1.jpg" alt=""> div> <div class="c3"> <input type="text"> div> <div class="c4"> <img src="./images/1.jpg" alt=""> div> <div class="c5"> <img src="./images/1.jpg" alt=""> div> body>
运行效果
2. 光标类型
光标类型 cursor
(1). default: 默认值，通常是箭头
(2). pointer：小手效果，提示用户可以点击
(3). text: 工字型,提示用户可以选择文字
(4). move: 十字光标，提示用户可以移动
3. 边框圆角
A. 用途
让盒子四个角变得圆润，增加页面细节，提升用户体验
B. 属性名和取值
border-radius
常见取值：数字+px 、百分比, 可以写 4个值、三个值、两个值、一个值
C. 常用案例
(1). 圆形
盒子必须是正方形,设置边框圆角为盒子宽高的一半 → border-radius:50%
(2). 胶囊按钮
盒子要求是长方形, 设置 → border-radius：盒子高度的一半
代码分享
运行效果
4. overflow溢出效果
A. 说明
溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
B. 使用场景
控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
C. 用法
overflow(overflow-x、overflow-y)
(1) visible: 默认效果，多出来的直接溢出
(2) hidden: 溢出部分隐藏
(3) scroll: 无论是否溢出，都显示滚动条
(4) auto: 自动显示隐藏或显示滚动条
(5) overlay: 效果同auto，但是他不占位置，很好的解决了出现滚动条导致页面内容变窄，并且抖动一下的问题（当overflow的值为overlay时，行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。）
代码分享
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> div { width: 200px; height: 100px; background-color: pink; margin-bottom: 10px; margin-right: 10px; float: left; font-size: 14px; } /* 1. 默认效果，多出来的直接溢出*/ .box1 { overflow: visible; } /* 2. 溢出部分隐藏 */ .box2 { overflow: hidden; } /* 3. 无论是否溢出，都显示滚动条 */ .box3 { overflow: scroll; } /* 4. 自动显示隐藏或显示滚动条 */ .box4 { overflow: auto; } style> head> <body> <div class="box1"> 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试2 div> <div class="box2"> 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试2 div> <div class="box3"> 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试2 div> <div class="box4"> 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试 测试2 div> body> html>
运行效果
实际案例场景：比如某个区域，只有鼠标移动上去才显示滚动条，移出去的时候，不显示滚动条。
解决方案： 比如这个区域class为myDiv， 设置myDiv：overflow:hidden , myDiv:hover 为 overflow:auto
5. 元素的隐藏
(1). visibility：hidden
隐藏元素本身，并且在网页中 占位置
(2). display：none
隐藏元素本身，并且在网页中 不占位置
PS：开发中经常会通过 display属性完成元素的显示隐藏切换 display：none；（隐藏）、 display：block；（显示）
6. 元素透明度
场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
1：表示完全不透明
0：表示完全透明
注意点：opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
我是内容
7. css画三角形（了解）
两种方案
代码分享
运行效果
8. 精灵图的使用
A. 使用步骤
(1). 先看看目标的图标的大小，给盒子设置width和height
(2). 利用background-image属性加载图片
(3). 利用background-position: xpx xpx 的属性加载指定图标
A. 默认水平方向 和 竖直方向都是0，即左上角
B. 用相应工具测量一下目标图标左上角的位置
C. 水平方向设置为负值，即图片向左移动
竖直方向设置为负值，即图片向上移动
B. 核心属性
方法1： 利用 background-image 和 background-position 组合写法
方法2： 利用 background: url('./images/taobao.png') 0 -484px; 合并写法
三. background-size详解
(本节使用的图片1.jpg 默认大小为：200px*200px)
1. 复习img标签
(1). 首先img标签是行内块元素，在一行显示，且可以直接设置宽高
(2). 使用img加载一张图片，默认大小就是图片自身的大小，可以直接对img标签设置宽高，从而改变图片的大小
代码分享：
1. 复习img标签
运行效果
2. 背景图片backgroud 默认效果
(1).盒子自身大小设置为多少盒子就是多少，背景图片不能撑大/缩小盒子，背景图片默认是水平竖直方向都平铺的。（下面代码设置了no-repeat）
(2).如果想保持图片自身大小不变，而且还想使用背景图片实现，那么需要设置盒子自身的width和height，使其和图片大小相同
代码分享：
2.1. 背景图片backgroud 默认效果-
2.2. 调整盒子大小和图片相同-
运行效果
3. 平铺效果 background-repeat
默认是水平竖直方向都平铺，详见01_基础/05-背景和img.html
4. 设置背景图片大小 background-size
(1). 数字+px, 优点:设置简单 缺点:图片可能会拉伸变形
(2). 百分比, 优点:设置简单 缺点:图片可能会拉伸变形
(3). contain
让背景图片进行等比例缩放，直到不会超出盒子的最大(即width和height有一个扩大到和盒子相同则立刻停止)
优点：进行等比例缩放，不会让图片变形
缺点：可能盒子会出现留白
(4). cover
让背景图片进行等比例缩放，直接填满整个盒子刚好没有空白为止(即盒子需要全部填满，图片width和height其中一个可能会超过盒子)
优点：进行等比例缩放，不会让图片变形
缺点：可能背景图片会超出盒子
代码分享：
3. background-size的几种效果
3.1 默认
3.2 数字+px
3.3 百分比
3.4 contain
3.5 cover
运行效果
5. background和background-size覆盖问题
正确写法：
写法1：都写在background里，格式：background: color image repeat position/size;
写法2：先写background，然后background-size必须写在其后面
4. background-size的两种写法
四. 阴影、过渡
1. 文字阴影
(1).属性名：text-shadow
(2).作用: 给文字添加阴影效果
(3).参数
h-shadow: 必添，水平偏移量，允许负值
v-shadow: 必填，竖直偏移量，允许负值
blur: 可选，模糊度
color: 可选，阴影颜色
代码分享
1.文字阴影
测试文字阴影效果1
测试文字阴影效果2
运行效果
2. 盒子阴影
(1).属性名：box-shadow
(2).作用: 给文字添加阴影效果
(3).参数
h-shadow: 必添，水平偏移量，允许负值
v-shadow: 必填，竖直偏移量，允许负值
blur: 可选，模糊度
spread: 可选，阴影扩大
color: 可选，阴影颜色
inset: 可选，将阴影改为内部阴影
代码分享
2.盒子阴影
运行效果
3. 过渡效果
(1) 属性名：transition
(2) 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
(3) 参数：
过渡的属性：all(表示所有的属性都过渡，也可以写具体的属性名，比如写width,则只有width有过渡)
过渡的时长：数字+s（秒）
注意点：
A. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
B. transition属性给需要过渡的元素本身加
C. transition属性设置在不同状态中，效果不同的
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
代码分享
3.过渡效果
运行效果
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。