CSS第五天-定位
2023-06-13 09:15:17 时间
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 隐藏元素本身,隐藏后的元素不占有位置
垂直方向居中:
第一种: 第二种: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
相关文章
- Unity 接入高德开放API - IP定位
- 面试20场,我总结了面试问题及解答!激光+IMU融合定位方向
- 【说站】css中背景定位有哪些方法
- 【说站】css中固定定位fixed是什么
- 2022-11-24:小团在地图上放了3个定位装置,想依赖他们进行定位! 地图是一个n*n的棋盘, 有3个定位装置(x1,y1),(x2,y2),(x3,y3)
- css固定定位_css定位布局
- css中绝对定位_绝对定位和相对定位怎么用
- java和vue学生定位打卡小程序人脸识别打卡系统源码网站学生考勤系统
- 软件测试|selenium css定位
- C/C++ 定位文件 .text 区段地址
- 软件测试|App自动化控件定位
- 根据 IP 地址定位经纬度
- 前端必备的 CSS 库,normalize.css
- 【CSS】浮动 ① ( 浮动引入 | 盒子模型位置摆放三大机制 - 普通流、浮动、定位 | 行内块元素的摆放缺陷 )
- 【CSS】定位 ② ( 静态定位 | 相对定位 )
- 【CSS】定位 ⑤ ( 子元素绝对定位 父元素相对定位 | 代码示例 )
- 【CSS】使用 z-index 属性值控制定位盒子的堆叠顺序 ( 多个盒子堆叠次序问题 | z-index 属性值简介 | 控制盒子堆叠次序 )
- 【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )
- Linux基础:如何定位后台服务偶发崩溃的解决方法
- HTML5 定位
- Oracle定位追索从中心经纬度到位置的找寻(oracle中心经纬度)
- CSS关于相对定位和绝对定位的说明实例
- js设置css的定位
- juqery学习之六CSS--css、位置、宽高
- JavaScript网页定位详解
- Android中实现GPS定位的简单例子