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%;
原文地址:https://www.cnblogs.com/qdbj2020/p/13457728.html