CSS第五天-定位
CSS第五天-定位
相对定位: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 隐藏元素本身,隐藏后的元素不占有位置
垂直方向居中:
1 | 第一种: 第二种:left: 50% 第三种: |
水平方向居中:
- 文字、行内元素、行内块元素 === 给其父元素添加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