HTML/CSS盒子浮动、定位、隐藏(省略号）（学习整理）

浮动float

常用float：left（左浮动） right（右浮动）

解决父元素塌陷问题的方法（很多情况下父级盒子不给高度，考虑子盒子高度会变）

1. 给父元素一个固定的高度
2. 在父元素中子元素的最后添加一个div子元素，并且设置其样式为clear：both
3. 给父元素添加css样式 overflow:hidden
4. 伪类设置：在父元素中设置

 <style>
        div ::after{
            content: '';
            display: block;
            clear:both;
        }
    </style>

---

**省略号的写法**（给盒子里的内容超出盒子部分用省略号代替） *注意：盒子里必须为英文才会超出，否则不会超出*

<style>
        box{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>

overflow：hidden 超出部分隐藏
overflow：scroll 给盒子添加侧边滚动条
oveflow：auto 根据盒子内容需要给盒子添加滚动条

---

定位

定位的种类

• static 没有定位（默认）
• relative 相对定位（相对于自身进行定位）
• absolute 绝对定位
• fixed 固定定位

定位	特性
relative 相对定位	相对于自身进行定位 left，right，top，bottom不改变其他元素位置，不脱离文档流
absolute 绝对定位	相对于最近的已经定位的祖先元素进行定位，如果没有就相对于浏览器进行定位，脱离文档流
fixed 固定定位	定位以后自身位置固定不变（通常网页中的侧边广告就是用固定 定位写的），脱离文档流

---

隐藏盒子

方法	特性
opacity 透明度 （0-1之间的数）	不脱离文档流（盒子没了，所占的位置还在）
display:none （隐藏盒子）	脱离文档流
visibility:hidden/visible（影藏盒子）	不脱离文档流

阴影

盒子阴影
box-shadow: x轴的距离 y轴的距离 阴影的模糊程度 阴影大小 阴影颜色 阴影位置（默认outset，可以设置为inset，不可以设置为outset）

文字阴影
text-shadow：x轴距离 y轴距离 阴影模糊程度 阴影颜色