html+ css基础笔记_PS_浮动_定位_part1_3

1. photoShop使用？

    组成：
        菜单项
        工具栏
        辅助面板

    下载：
        https://pan.baidu.com/s/1LVa5R_btSjczLBwskCZidQ 提取码: sc3v      

    快捷键：
        ctrl + r : 显示隐藏标尺
        alt + 滚轮：可以对图片进行放大缩小
   功能：   
        （1）在标尺上可以拖拽参考线
        （2）可以通过移动工具拖拽回去，也可以在视图菜单中选择清除所有的参考线
        （3）图层中的小眼睛可以对当前图层进行显示隐藏
        
    jpg：适合做色彩丰富的照片，质量高   

    png等图片的切图流程：
        1. 通过矩形选框工具，选择指定的区域
            微调：alt 减少区域  shift 增加区域   上下左右键进行微调
            利用参考线记录量取的位置，以便以后测量其他的值
        2. ctrl + c : 复制图层
        3. ctrl + n : 新建图层
        4. ctrl + v : 粘贴图层
        5. 点击文件存储为web格式        

    psd图片的切图流程：
        1. 启动生成器
        2. 图像资源
        3. 重命名图层，自动获取切图
        4. 可上传到线上，方便数据获取

2. float浮动？

       定义：脱离文档流，延迟父容器靠左或靠右进行排列。

        属性值：left、right、none

    float注意点:    
            只会影响后面的元素。
            内容默认提升半层。
            默认宽根据内容决定。
            换行排列。
            主要给块元素添加，但也可以给内联元素添加。

    如何清除浮动？
        上下排列：clear属性，表示清除浮动的，left、right、both
        嵌套排列：
            固定宽高   :  不推荐 , 不能把高度固定死，不适合做自适应的效果。
            父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
            overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
            display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
            设置空标签 : 不推荐 , 会多添加一个标签。
            after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。
                ( clear属性只会操作块标签，对内联标签不起作用 )

3. CSS 定位？

    position 定位标签: 
        属性值：    static（默认）
                relative
                absolute
                fixed
                sticky

    relative(相对定位)：
             （1）如果没有定位偏移量，对元素本身没有任何影响
             （2）不使元素脱离文档流
             （3）不影响其他元素布局
             （4）left、top、right、bottom是相对于"当前元素"自身进行偏移的

    absolute(绝对定位)：
             （1）使元素完全脱离文档流
             （2）使内联元素支持宽高 （让内联具备块特性）
             （3）使块元素默认宽根据内容决定（让块具备内联的特性）
             （4）如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

    fixed（固定定位）：
            （1）使元素完全脱离文档流
            （2）使内联元素支持宽高 （让内联具备块特性）
            （3）使块元素默认宽根据内容决定（让块具备内联的特性）
            （4）相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响（可做弹窗）

    sticky（黏性定位）：
           在指定的位置，进行黏性操作。
    写法：position: sticky;top: 0;要结合上下左右使用！！
    
    z-index：定位层级。

4.添加省略号

    三步写法：white-space: nowrap;    不折行
             overflow: hidden;        隐藏多余内容
             text-overflow: ellipsis;添加省略号

5.CSS sprite图

    特性：又叫CSS精灵，是一种网页图片应用处理方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载
    好处：（1）可以减少图片的质量，网页的图片的加载速度快
           （2）减少图片的请求的次数，加快网页的打开速度

6. PC端的布局？

       通栏 : 自适应浏览器的宽度。
       版心 : 固定一个宽度，并且让容器居中。