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.是否占原位

相关推荐
leluckys14 分钟前
flutter 专题 六十八 Flutter 多图片上传
前端·javascript·flutter
Enti7c21 分钟前
数据一键导出为 Excel 文件
前端·javascript·excel·jquery
Jinuss22 分钟前
源码分析之Leaflet中control模块Zoom类实现原理
前端·leaflet
qiyue7724 分钟前
用claude3.7,不到1天写了一个工具小程序(11个工具6个游戏)
前端
Linruoxin30 分钟前
理解浏览器视口:为什么你的屏幕分辨率不直接决定网页的显示区域?
前端·css
乌恩大侠31 分钟前
AMD Versal™ AI Edge Series VEK280 Evaluation Kit
前端·人工智能·edge
七公子7738 分钟前
微信小程序常见问题记录合集
前端·微信小程序
the_one39 分钟前
🔥 纯CSS黑科技!仅用1个DIV实现3D立体选项卡
前端·css
逆袭的小黄鸭1 小时前
掌握 JavaScript:理解原型和原型链
前端·javascript·面试
患得患失9491 小时前
【前端】【tailwind】tailwind默认重置了样式
前端·tailwind