今日学习内容:定位的叠放次序 在使用定位的时候会出现盒子重叠的情况,需要使用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、将隐藏的文字用省略号代替 今日问题:无
|