CSS第五天-定位

  1. 静态定位：static

  2. 定位的默认值，写边偏移也不会有效果

相对定位：relative

父元素搭配子绝父相使用

  1. 根据自身原来的位置，进行定位

  2. 没有脱标，在页面还占有位置 天生就是给绝对定位当爹用

绝对定位：absolute

  1. 根据最近带有定位(非静态)的祖先元素来定位 子绝父相

  2. 脱离标准流，在页面不占有位置

  3. 绝对定位，固定定位，浮动，可以直接设置宽度和高度，默认宽度是内容宽度

固定定位：fixed

  1. 永远根据浏览器可视区域定位，不会随着滚动条的滚动而滚动

  2. 可以直接加宽高，默认宽度是内容宽度

  3. 脱离标准流，在页面不占有位置

  4. 解决分辨率问题有两种方法…

定位层级：z-index

  1. 只有定位有这属性，绝对定位、固定定位、相对定位

  2. 默认值：auto，数字越大，层级越高

  3. 可以设置正值或负值，没单位

过渡: transition

  1. 让元素样式慢慢变化，常配合hover使用，增强网页交互体验

  2. 过度所有属性：transition: all 1s === 给盒子添加阴影效果

  3. transition: 过度属性 花费时间(s) 运动曲线 何时开始

  4. 可以简写：transition: width 1s, height 1s, background 1s

盒子阴影: box-shadow

  1. 给盒子添加阴影效果

  2. h-shadow、v-shadow、blur、color…

  3. spread 语言扩大 /// inset 内部阴影

隐藏元素（重点）：

开发中经常会通过 display属性完成元素的显示隐藏切换

  1. display：none；（隐藏）、 display：block；（显示）
  2. visibility：hidden 隐藏元素本身，隐藏后的元素还占有位置
  3. display：none 隐藏元素本身，隐藏后的元素不占有位置

垂直方向居中：

1
2
3
4
5
6
第一种：                          第二种：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
水平方向居中：
  1. 文字、行内元素、行内块元素 === 给其父元素添加text-align: center
  2. 块级元素 === 给当前元素设置 宽度和margin: 0 auto
  3. 浮动元素 === 给外面标准流的父元素设置 宽度和margin：0 auto
  4. 定位元素 === left: 50% translateX(-50%)

溢出隐藏：overflow

  1. 默认值 overflow: visible

  2. 溢出部分溢出 overflow: hidden

  3. 无论是否溢出，都显示滚动条overflow: scroll

  4. 根据是否溢出，自动显示或隐藏滚动条 overflow: auto

  5. white-space: nowrap;（设置文字在一行显示，不能换行）

  6. text-overflow: ellipsis;（规定当文本溢出时，显示省略号来代表被修剪的文本）

边框圆角：border-radius

  1. 让盒子四个角变圆润

  2. 数字+px 、百分比 （从上、右、下、左)

垂直对齐方式：vertical-align

  1. baseline 默认
  2. top 顶部对齐
  3. middle 中部对齐
  4. bottom 底部对齐
精灵图：

  1. 测量图片左上角坐标，分别取负值设置盒子的background-position：x y

  2. 合并成一张大图片，这张大图片称之为精灵图

  3. 减轻服务器的压力，提高页面加载速度

背景图片大小：background-size

  1. background-size：宽度 高度 /百分比

  2. contain 等比例缩放

  3. cover 将背景图片等比缩放，填满盒子 刚好没空白

  4. background: color image repeat position/size //连写同时设置时，需要注意覆盖问题

只做了解：
  1. 表格边框合并 border-collapse: collapse
  2. 焦点选择器 input:focus
  3. 链接伪类选择器 link、visited、hover、active（未访问过、访问过、鼠标悬停、鼠标按下）
  4. 属性选择器 input [ type = text ]
  5. 元素整体透明 opacity: 0/1
  6. CSS画三角形 border - top - left - bottom - right = 0
文字阴影: text-shadow

  1. 给文字添加阴影效果

  2. h-shadow 水平偏移量，允许负值

  3. v-shadow 垂直偏移量，允许负值

  4. blur 模糊度 /// color 阴影颜色

垂直方向居中：

  1. 文字、行内元素 line-height 等于height

  2. 行内块、行高等于高 搭配vertical-align: middle

  3. 块级元素、浮动元素 需要去测量

  4. 定位元素 === top：50% 50% translateY(-50%)

  5. 行内元素、行内块元素、并列关系的垂直居中对齐

  6. 设置vertical-align: middle

垂直的用法：

  1. 文本框和表单按钮无法对齐

  2. input和img无法对齐

  3. div中的文本框，文本框无法贴顶问题

  4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

  5. 使用line-height和vertical-align: middle 让img标签垂直居中问题

鼠标样式：cursor

  1. cursor: default; 小箭头

  2. cursor: pointer; 小手 (较常用)

  3. cursor: move; 移动

  4. cursor: text; 文本

  5. cursor: not-allowed; 禁止

本节单词：

  1. relative
  2. absolute
  3. fixed
  4. z-index
  5. vertical
  6. vertical-align
  7. middle
  8. transform
  9. transition
  10. translate
  11. radius
  12. static 默认值
  13. baseline 默认值
box 盒子阴影 & text 文字阴影
  1. shadow
  2. blur
  3. spread
  4. inset
只了解：
背景图片大小：
  1. contain
  2. cover
溢出隐藏：
  1. auto
  2. scroll
  3. visible
元素整体透明：
  1. opacity
焦点伪类选择器：
  1. focus
表格边框合并：
  1. collapse
链接伪类选择器：
  1. link
  2. visited
  3. active
鼠标样式：
  1. cursor
  2. pointer
  3. move
  4. default