CSS03

浮动

# ps:html代码是没有缩进一说的 全部写在一行也可以 """浮动主要就是用于页面布局的!!!""" # 浮动带来的负面影响 """会造成父标签塌陷!!!""" 解决浮动的负面影响 1.再写一个div撑场面(不可取) 2.关键字clear(可以使用) 3.通用解决策略(推荐使用):只要父标签塌陷就使用 .clearfix:after { content: ''; clear: both; display: block; } # 谁塌陷就给谁加class属性 # 浏览器默认都是文本优先展示

定位

1.静态定位 static 所有的标签默认都是静态定位即不能改变位置 2.相对定位 relative 相对标签原来的位置做定位 3.绝对定位 absolute 相对已经定位过的父标签做定位(没有则参考body标签) eg:小米官网导航条内购物车 4.固定定位 fixed 相对浏览器窗口做定位 eg:小米官网右边回到顶部 如何使用css完成定位 定位关键字position 位置关键字left、right、top、bottom

是否脱离文档流

# 标签位置改变之后 原来的位置是否会空出来 如果空出来了被其他标签自动占有 那么表示脱离否则不脱离 浮动、定位 脱离文档流 浮动、绝对定位、固定定位 不脱离文档流 相对定位

溢出属性

# 圆形头像 #d1 { width: 200px; height: 200px; border: 3px solid darkgray; border-radius: 50%; overflow: hidden; } #d1 img { /*max-width: 100%;*/ width: 100%; }

z-index属性

# 浏览器平面不是一个二维坐标系而是一个三维坐标系 eg:百度登录或者退出界面>>>:三明治结构(模态框)

透明度

rgba(124,124,124,0.5) 只影响颜色 opacity:0.5 影响颜色和字体

__EOF__

本文作者祈安
本文链接https://www.cnblogs.com/jyc666/p/15897453.html
关于博主:没有收拾残局的能力,就别放纵善变的情绪
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   丶祈安  阅读(26)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
点击右上角即可分享
微信分享提示