CSS第五天-定位
- 静态定位：static
- 定位的默认值，写边偏移也不会有效果
相对定位：relative
父元素搭配子绝父相使用
- 根据自身原来的位置，进行定位
- 没有脱标，在页面还占有位置 天生就是给绝对定位当爹用
绝对定位：absolute
- 根据最近带有定位(非静态)的祖先元素来定位 子绝父相
- 脱离标准流，在页面不占有位置
- 绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度
固定定位：fixed
- 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动
- 可以直接加宽高，默认宽度是内容宽度
- 脱离标准流，在页面不占有位置
- 解决分辨率问题有两种方法…
定位层级：z-index
- 只有定位有这属性，绝对定位、固定定位、相对定位
- 默认值：auto，数字越大，层级越高
- 可以设置正值或负值，没单位
过渡: transition
- 让元素样式慢慢变化，常配合hover使用，增强网页交互体验
- 过度所有属性：transition: all 1s === 给盒子添加阴影效果
- transition: 过度属性 花费时间(s) 运动曲线 何时开始
- 可以简写：transition: width 1s, height 1s, background 1s
盒子阴影: box-shadow
- 给盒子添加阴影效果
- h-shadow、v-shadow、blur、color…
- spread 语言扩大 /// inset 内部阴影
隐藏元素（重点）：
开发中经常会通过 display属性完成元素的显示隐藏切换
- display：none；（隐藏）、 display：block；（显示）
- visibility：hidden 隐藏元素本身，隐藏后的元素还占有位置
- display：none 隐藏元素本身，隐藏后的元素不占有位置
垂直方向居中：
代码语言：javascript复制第一种： 第二种：left: 50% 第三种：
top: 50% margin-left: -75px top: 0
left: 50% top: 50% left: 0
transform: translate(-50%, -50%) margin-top: -40px right: 0
bottom: 0
margin: auto水平方向居中：
- 文字、行内元素、行内块元素 === 给其父元素添加text-align: center
- 块级元素 === 给当前元素设置 宽度和margin: 0 auto
- 浮动元素 === 给外面标准流的父元素设置 宽度和margin：0 auto
- 定位元素 === left: 50% translateX(-50%)
溢出隐藏：overflow
- 默认值 overflow: visible
- 溢出部分溢出 overflow: hidden
- 无论是否溢出，都显示滚动条overflow: scroll
- 根据是否溢出，自动显示或隐藏滚动条 overflow: auto
- white-space: nowrap;（设置文字在一行显示，不能换行）
- text-overflow: ellipsis;（规定当文本溢出时，显示省略号来代表被修剪的文本）
边框圆角：border-radius
- 让盒子四个角变圆润
- 数字 px 、百分比 （从上、右、下、左)
垂直对齐方式：vertical-align
- baseline 默认
- top 顶部对齐
- middle 中部对齐
- bottom 底部对齐
精灵图：
- 测量图片左上角坐标，分别取负值设置盒子的background-position：x y
- 合并成一张大图片，这张大图片称之为精灵图
- 减轻服务器的压力，提高页面加载速度
背景图片大小：background-size
- background-size：宽度 高度 /百分比
- contain 等比例缩放
- cover 将背景图片等比缩放，填满盒子 刚好没空白
- background: color image repeat position/size //连写同时设置时，需要注意覆盖问题
只做了解：
- 表格边框合并 border-collapse: collapse
- 焦点选择器 input:focus
- 链接伪类选择器 link、visited、hover、active（未访问过、访问过、鼠标悬停、鼠标按下）
- 属性选择器 input [ type = text ]
- 元素整体透明 opacity: 0/1
- CSS画三角形 border - top - left - bottom - right = 0
文字阴影: text-shadow
- 给文字添加阴影效果
- h-shadow 水平偏移量，允许负值
- v-shadow 垂直偏移量，允许负值
- blur 模糊度 /// color 阴影颜色
垂直方向居中：
- 文字、行内元素 line-height 等于height
- 行内块、行高等于高 搭配vertical-align: middle
- 块级元素、浮动元素 需要去测量
- 定位元素 === top：50% 50% translateY(-50%)
- 行内元素、行内块元素、并列关系的垂直居中对齐
- 设置vertical-align: middle
垂直的用法：
- 文本框和表单按钮无法对齐
- input和img无法对齐
- div中的文本框，文本框无法贴顶问题
- div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
- 使用line-height和vertical-align: middle 让img标签垂直居中问题
鼠标样式：cursor
- cursor: default; 小箭头
- cursor: pointer; 小手 (较常用)
- cursor: move; 移动
- cursor: text; 文本
- cursor: not-allowed; 禁止
本节单词：
- relative
- absolute
- fixed
- z-index
- vertical
- vertical-align
- middle
- transform
- transition
- translate
- radius
- static 默认值
- baseline 默认值
box 盒子阴影 & text 文字阴影
- shadow
- blur
- spread
- inset
只了解：
背景图片大小：
- contain
- cover
溢出隐藏：
- auto
- scroll
- visible
元素整体透明：
- opacity
焦点伪类选择器：
- focus
表格边框合并：
- collapse
链接伪类选择器：
- link
- visited
- active
鼠标样式：
- cursor
- pointer
- move
- default
