菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 康利-20221018-css5 [打印本页]

作者: 智商不在服务区 时间: 2022-10-19 00:31
标题: 康利-20221018-css5
一、学习内容：
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

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)