xc-book

# 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 隐藏元素本身，隐藏后的元素不占有位置

# 垂直方向居中：

第一种：                          第二种：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

← CSS-2D-3D转换 →