css代码的定位及浮动

上次,我们解除了css的内外边距、鼠标悬停及其练习。现在我们学习css元素练习和定位。

元素转换

元素分为块元素、行元素和行内块。 display 显示:转换元素的类型

display:inline; display:block; display:inline-block; display:none;元素隐藏 opacity 透明度

块元素block 特点:1.可以设置宽高 2.独占一行 举例:div、p、h1-h6、li

行元素inline 特点:1.不可以设置宽高 2.可以和其他的行快元素在一行 举例: a、span、del

行内块inline-block 特色:1.可以和别的元素在一行显示 2.可以设置宽高 举例:img、input

cursor:pointer 设置鼠标箭头、使其变成小手 +获取下一个兄弟标签 例如:.but:hover+ul{ 值 }

元素隐藏 display:none; 元素不占位置 opacity:0-1 1不透明 0完全透明 半透明 0-1之间的数

浮动 float:left/right 清除浮动 clear:left/right/both 盒子设为阴影: box-shadow
静态定位 position:static

定位position: 可以决定元素在网页上的位置 left左 right右 top上 bottom下 z-index层级

静态定位(默认值) c

相对定位 position:relattive

1.relative 相对定位 相对于自身位置进行移动、保留原位置 position:relattive;

绝对定位 position:absolute

absolute 绝对定位 1.不占位置 2.相对于那哪里移动 默认:相对于整个网页 父元素进行移动,父元素有定位,则子元素会相对于父元素进行移动(父相子绝)

固定定位 position:fixed

fixed 固定定位 1.相对于进行移动 2.是否占原位

相关推荐
用户老李10 分钟前
YOLO 目标检测自学教程 07:YOLOv3——多尺度预测
前端
moshuying38 分钟前
ESP32 墨水屏金价牌(上):从点亮到把图片推过去
前端
李剑一1 小时前
别再抬杠,前端岗已经没了!无论前后端,我们最终都要成“全干”工程师
前端·面试
Highcharts.js1 小时前
Highcharts 仪表盘与速度仪图表库介绍
前端·信息可视化·仪表板·highcharts·图表开发·图表库·仪表可视化
愚坤1 小时前
前端真有意思,JS还能独立做项目?
前端·javascript·github
SGAMERrain1 小时前
# Nuxt 4 + MediaPipe:如何在浏览器中实现本地 AI 人脸分析?
前端
github_is_geeksKai2 小时前
浏览器端文件处理的边界:PDF 面单、GPX 隐私与 EPUB 修复
前端
deli0073 小时前
从一句反馈到一次升级:Mystudy 的自进化实践
前端
FungLeo4 小时前
成为全栈·Vue 管理后台篇·用 fetch 建一层可控的请求内核
前端·javascript·vue.js·http·fetch·formdata·接口封装
FungLeo6 小时前
成为全栈·Vue 管理后台篇·Vue Router如何守住多角色后台边界
前端·javascript·vue.js·rbac·vue router·路由守卫·前端权限