我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

前端-毛少涵-20221116

[复制链接]
微小星晨 发表于 2022-11-16 23:03:47 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
今日学习内容:定位的叠放次序
在使用定位的时候会出现盒子重叠的情况,需要使用z-index来控制盒子的前后次序
注意点:
1数值可以是正整数、负整数或者0,默认值是auto,数值越大,盒子越靠上
2 如果属性值相同,按照书写的顺序,后来者居上3数字后面不可以加单位4只有定位的盒子才有z-index属性
定位拓展
    1、绝对定位的盒子居中问题
       加了绝对定位的盒子不能通过margin: 0 auto;进行水平居中,但是可以通过计算的方式实现水平和垂直居中
水平居中的方法;先将左边偏移50%使用margin-left让盒子往左偏移自己宽的一半
2、不论是什么元素,使用固定定位或者绝对定位之后都可以直接设置宽高
3、脱标的盒子不会触发外边距塌陷的问题
4、固定定位和绝对定位都会完全压住下面的盒子
元素的显示与隐藏
1.display 显示与隐藏 (常用的隐藏元素属性)
display:block; 除了转化为块元素的功能外,还能将元素给显示出来
dispaly:none; 隐藏对象 dispaly来隐藏元素时,隐藏的元素不再占有原来的位置
2.visibility 显示隐藏 visibility:visible;元素可视visibility:hidden; 元素隐藏
用visibility隐藏元素之后,继续占有原来的位置
3.overflow 溢出的显示与隐藏overflow:visible; 不剪切内容,也不添加滚动条。
overflow:hidden; 将超出盒子的内容给隐藏掉overflow: scroll; 不管盒子里的内容有没有超出盒子的范围,都显示滚动条overflow:auto;  内容超出盒子的话就显示滚动条,不超出盒子就不显示。
CSS的其他技巧
精灵图 使用方法:利用背景图片的方式来将精灵图插入
将精灵图移动到指定位置即可,利用的属性是bacground-position , 一般移动的数值都是负值.
鼠标样式 属性cursor属性值default   默认的鼠标样式 pointer  小手的鼠标样式
text 文本鼠标样式move 拖动时的鼠标样式not-allowed   禁止鼠标样式
输入框删除外框outline:none;
文本域取消拖拽resize:none;
行内元素的对齐方式属性:vertical-align属性值:top  顶线对齐middle  中线对齐
baseline 基线对齐(默认值)bottom 底线对齐
CSS的三角制作
CSS的省略号制1、让文字一行显示2、将多余的文字隐藏掉3、将隐藏的文字用省略号代替
今日问题:无

回复

使用道具 举报

关注0

粉丝0

帖子50

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

客服电话:18009298968

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

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

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