我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

康利-20221018-css5

[复制链接]
智商不在服务区 发表于 2022-10-19 00:31:12 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、学习内容:
1.定位的叠放次序
可以使用z-index来控制盒子的前后顺序(网页里的z轴)
数值可以是正整数、负整数、0、默认值auto,数值越大,越靠上
如果属性值相同,则按照书写顺序,后来者居上
数字后面不加单位
只有定位的盒子才有z-index 属性

2.绝对定位盒子的居中
绝对定位的盒子没办法用margin:0 auto;来使盒子居中
加了绝对定位的挥舞着不能通过margin:0 auto;水平居中,但可以通过计算来实现
left:50%;让盒子的左侧移动到父级元素的水平中心位置;margin-left:-150px;让盒子向左移动自身宽度的一半;垂直居中同理

定位的特殊性:行内元素添加绝对定位或者固定定位,可以直接设置宽度和高度;
块级元素添加绝对定位或者固定定位,如果不给宽高,默认大小是内容本身的大小
3.元素的隐藏与显示
display显示与隐藏、visibility显示与隐藏、overflow溢出显示与隐藏
overflow:visible;不剪切文字也不添加滚动条
overflow:hidden;将超出盒子的内容隐藏掉
overflow:scroll;不管盒子里面的内容有没有超过父盒子的高度,都显示滚动条
overflow:auto;超过盒子的高度显示滚动条,不超出则不显示

4.精灵图
精灵图的使用步骤:
获取所需要的小图标大小
设置一个盒子来放我们需要的小图标,尺寸和我们所需的小图标大小一致
background-image:(url);将背景图片引入盒子
利用background-position来调整背景图片的位置,以显示我们所需要的图标,注意x和y轴的像素值都是负值,最大是0

回复

使用道具 举报

关注0

粉丝0

帖子68

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026