前端补充之浮动与定位、透明度

内容概要

• 浮动
  • 浮动带来的负面影响
• 定位
• 脱离文档流
• 溢出属性
• z-index属性
• 透明度

内容详细

一、浮动

浏览器页面实际上是一个三维空间

一般标签都是设置在最底层的平面上

浮动就是使得平面上的标签漂浮到上层，不占用底层平面的空间

定义:

div {
    float: left;  /*向左漂浮*/
    float: right; /*向右飘浮*/
}

浮动带来的负面影响

会造成父标签塌陷!!!

也就是位于底层平面上没有设置长宽大小的父标签不再被内部的浮动标签撑起

解决：哪个标签塌陷，就添加下面的类

.clearfix:after {
    content: '';
    clear: both;
    display: block;
}

注意： 浏览器默认都是文本优先展示

二、定位

1.静态定位	static
	所有的标签默认都是静态定位即不能改变位置
2.相对定位	relative
	相对标签原来的位置做定位
3.绝对定位  absolute  
	相对已经定位过的父标签做定位(没有则参考body标签)
    	eg:小米官网导航条内购物车
4.固定定位  fixed
	相对浏览器窗口做定位
    	eg:小米官网右边回到顶部
如何使用css完成定位  
	定位关键字position
    位置关键字left、right、top、bottom

三、脱离文档流

也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

脱离文档流： 浮动、绝对定位、固定定位

不脱离文档流： 相对定位

是否为脱离文档流的判断标准是，标签位置改变之后 原来的位置是否会空出来，如果空出来了被其他标签自动占有 那么表示脱离否则不脱离

四、z-index属性

• 1、z-index定义

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

• 2、使用

（1）必须在定位元素（position:relative/absolute/fixed/sticky）上才有效

（2） 可以有负值

（3）不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染.

eg:百度登录或者退出界面>>>:三明治结构(模态框)

五、透明度（opacity）

指定透明度的属性是opacity,属性值从 0.0 到 1.0。值越小，越透明。

rgba(124,124,124,0.5)
	只影响颜色
opacity:0.5
    影响颜色和字体

六、溢出属性

在给div标签设置了长宽大小之后，标签里面的文本内容或者图片标签的大小可能会因为体量太大而溢出到了div标签之外

解决：设置溢出属性

# 圆形头像
#d1 {
            width: 200px;
            height: 200px;
            border: 3px solid darkgray;
            border-radius: 50%;
            overflow: hidden;
        }
#d1 img {
            /*max-width: 100%;*/
            width: 100%;
        }

应用：
	头像图片过大
    隐藏头像溢出内容