08-溢出属性与定位

#### 单行文本溢出显示省略号

  * 溢出属性 overflow

    + visible 默认值

    + hidden 溢出隐藏

    + scroll 显示滚动条

      - overflow-y y轴滚动

      - overflow-x x轴滚动

    + **auto** 没有超出的时候正常显示，超出之后才显示滚动条  

  * **单行文本超出宽度显示省略号**

    + 设置宽度 

    + 设置不换行 white-space:nowrap

    + 设置溢出隐藏 overflow:hidden;

    + 设置文本溢出显示省略号 text-overflow:ellipsis;

#### 圆角属性 border-radius:数值+px    

#### 定位 position

  * static 默认值

  * relative 相对定位

    + 参考物：自己本身的位置

    + 方向：left/right/top/bottom: 数值+px 可以设置负数 百分比,

    + 特点

      - 移动之后依然占据空间

    + 应用：移动盒子 

  * absolute 绝对定位

    + 参考物：参考有定位属性(除了static)的祖先元素,定位元素通过一层一层想上找，找到有定位的祖先元素，如果找到body依然没有找到有定位的祖先元素，参考浏览器窗口(**子绝父相**)

    + 方向：left/right/top/bottom: 数值+px 可以设置负数 

    + 特点  

      - 脱离文档流，且文字能被遮挡

      - 块级元素设置margin:0 auto;会失效

      - 内联元素设置定位转换成块元素

    + 应用场景：有重叠效果的需求

例图

　　

    + 实现盒子水平垂直居中

      - 第一种

        1. 设置该元素left:50%;(参考元素宽度的一半)margin-left:当前盒子宽度的一半

        2. 设置该元素top:50%;(参考元素高度的一半)margin-top:当前盒子高度的一半

      - 第二种  

        1. 设置left:0;top:0;right:0;bottom:0;

        2. 设置margin:auto; 上下左右居中

#### 设置透明色

  rgba(253, 196, 215);

  a的取值是0-1之间的数 0:完全透明 1:不透明 值越小越透明      

#### 设置圆形

  border-radius: 50%或者100%;