自我学习前端第七天--单行文本溢出隐藏（扩展多行）、标题图片、定位

1、网页小图标

图片转换favicon网址

http://www.bitbug.net/

相关格式

<link rel="icon" type="images/x-icon" href="images/bitbug_favicon.ico">

---

2、单行文本溢出隐藏

设置内容单行文本溢出隐藏4步

第一步:设置显示范围（width）
第二步：设置内容强制不换行（white-space:nowrap）
第三步：设置超出的内容隐藏（overflow:hidden）
第四步：隐藏的内容转换成省略号（text-overflow：ellipsis）

设置空白空间

white-space:
            normal    自动换行，多个空格只识别一个（默认值）
            nowrap    强制不换行，多个空格只识别一个
            pre       强制不换行，识别换行和空格
            pre-line  自动换行，只识别换行不识别空格
            pre-wrap  自动换行，换行空格都识别

设置元素超出

    overflow： 
                visible  （默认值）
                hidden   （超出隐藏）
                auto     （超出才显示滚动条）
                scroll   （内容是否超出都有滚动条组件）


    overflow-x：auto（默认值）
    overflow-y：auto（默认值）

设置隐藏的内容

    text-overflow 
                    clip   裁剪隐藏的内容
                    ellipsis 隐藏的内容转换省略号显示

https://www.html.cn/archives/5206/

设置内容多行文本溢出隐藏4步

display: -webkit-box;   将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;   设置或检索伸缩盒对象的子元素的排列方式 
-webkit-line-clamp: 3;   用来限制在一个块元素显示的文本的行数
overflow: hidden;

---

3、定位：（相对定位、绝对定位、固定定位、粘性定位、）取消定位

定位元素可以触发5个属性

4个方向：left、right、top、bottom
1个层级关系：z-index：1（可以设置负数，但是必须是整数）
    普通元素：0
    先定位元素：0.1
    后定位元素：0.2

相对定位

position:relative;
1、元素设置相对定位后是占位的
2、相对定位的位置移动是相对于原位置移动

绝对定位
position:absolute
1、绝对定位的元素脱离文档流，不占位
2、绝对定位的元素位置移动先找最近的有定位属性的父元素，如果没有定位父元素，就以浏览器窗口位位置移动的参照物（包含块：就是绝对定位位置移动的参照物）

固定定位

position:fixed
1、固定定位的元素不占位
2、固定定位的位置移动，是始终以浏览器窗口的可视区为位置移动的参照物

粘性定位

    position:sticky
   算是相对定位和固定定位的结合体，如果粘性定位不设置位置方向，就是一个普通的元素，如果设置位置方向，滚动条划过内容，位置方向才有效果 


   注意点：
            1：需要设置位置方向
            2：父元素不能设置overflow:hidden


position:
            static     取消定位
            relative  相对定位
            absolute 绝对定位
            fixed      固定定位
            sticky     粘性定位（一般情况下，内容占位，当滚动条滑过粘性定位的元素后，跟固定定位效果等同）
            inherit    继承父元素position的属性值

---

设置内容在浏览器可视区水平垂直居中

第一种方法
    position：fixed
    left:50%
    top:50%
    margin-left:-(自身宽度的一半)
    margin-top:-(自身高度的一半)


第二种方法
    position：fixed
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin:auto;