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