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

标题: 前端基础-段童雨-20230419 [打印本页]

作者: Yeeeee 时间: 2023-4-20 21:45
标题: 前端基础-段童雨-20230419
一。今日所学
定位的叠放次序
         在使用定位的时候，可能会出现盒子重叠的情况，可以使用z-index属性来控制盒子的前后顺序
         属性值
            可以是正整数、负整数、或者0，默认是auto，值越大越靠上
            如果属性值相同，按照书写顺序，后来居上
            数字后面不要加单位
            只有定位的盒子才有z-index属性
   定位的拓展
         绝对定位的盒子居中
         定位的特殊性
            添加固定定位和绝对定位的盒子，可以直接设置宽度和高度
            块元素添加了绝对定位或者固定定位，如果没有宽高，默认就是里面内容的大小
         脱标的盒子不会触发外边距塌陷的问题
            脱离标准流的方法：绝对定位、固定定位、浮动。
         绝对定位和固定定位会完全压住盒子
            浮动的元素会压住标准流的盒子，但是不会压住盒子中文字和图片
            绝对定位和固定定位的盒子会完全压住下面的盒子，文字和图片也都会被盖住
         元素的显示和隐藏
            类似于网站广告，点击关闭按钮，元素消失，这个时候就需要用到显示和隐藏元素
            display 显示和隐藏（使用频率最高）
                  display:none; 代表隐藏对象，不再占有原来的位置
                  display:block; 除了能将元素转化为块元素以外，还能将元素显示出来
            visibility 显示和隐藏
                  属性值
                     visible 元素可视
                     hidden 元素隐藏隐藏之后还会占有原来的位置
            overflow 溢出显示和隐藏
                  属性值
                     visible 不剪切也不添加滚动条
                     hidden 将超出盒子的内容给隐藏掉
                     scroll 不管内容是否超出盒子的范围，都显示滚动条
                     auto 盒子中内容超出盒子显示滚动条，不超出不显示
PS的基本使用
      基本使用方式
         ctrl+r可以打开标尺
         右键点击标尺可以改变尺寸单位
         ctrl+加号 ctrl+减号  或者按住 alt+鼠标滚轮  可以放大或者缩小视图
         使用矩形选框工具可以测量图片例内容的大小
      PS切图
         1、选择切片工具
         2、选择要切图的位置
         3、导出切好的图片
      PS图层导出
         导出单个图层
            1、选择图层
            2、快速导出选中图层
         合并图层导出
            1、选择cutterman切图工具
            2、合并图层导出
CSS的其他技巧
      精灵图的使用
         是将多张小图片整合到一张大的图片中返回给浏览器，避免重复的对服务器进行请求，以减轻服务器压力。
         精灵图主要是针对小的背景图片来使用的
         主要借助于background-positon属性来实现
         一般情况下属性值都是负值，因为x轴向左是负值，y轴向上是负值。
         例
      鼠标的样式
         鼠标样式的设定
            属性名 cursor
                  属性值
                     default 默认的鼠标样式
                     pointer 小手鼠标样式
                     text 文本鼠标样式
                     move 移动鼠标样式
                     not-allowed 禁止鼠标样式
      输入框删除外框
         outline：none；
      文本域取消拖拽
         resize:none;
      行内元素的对齐方式
         vertical-align
            属性值
                  top 顶线对齐
                  middle 中线对齐
                  base-line 基线对齐（默认值）
                  botttom 底线对齐
      CSS的三角制作
         实现思路：先将盒子的宽高设置为0，将四个边框的颜色改为透明色，然后想用哪一个三角，就将哪一个边框设置颜色即可。

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