浮动处理，图片下间隙处理

day05

color:rgba(255,255,255,0.5)

​ a:alpha 透明度 0-1 的小数 值越大越不透明

文字默认以基线对齐

1：

调整文本垂直对齐方式的属性

verticle-align:top定对齐/ middle 中线对齐/baseline基线对齐/bottm底线对齐

对块级元素而言，用display：inline-block实现并排不是最好的做法

**因为display：inline-block会使元素转换为行内块 具有文本属性 基线对齐—>对不齐

图片在上，文字在下，而且盒子之间有空隙。

浮动（float）

作用：解决盒子并排问题

标准流：一行一个 从左侧边界开始放置

浮动带来一个现象，盒子并排放置–>脱离标准流，成为浮动流–>不占界面位置

float:left / right / none

left:找父元素的左边界停靠
right:找父元素的右边界停靠
none：保持原有的位置  标准流
每一个并排的盒子身上都要加浮动属性

影响：

脱离标准流，成为浮动流–>不占界面位置–>导致其他盒子向上移动

父盒子的高度塌陷：父盒子高度本来是由子元素撑开的，父盒子的高度计算是从内容的高度的来的

，现在由于浮动元素不占位置，所以子元素高度无法计算，父盒子的高度就塌陷了。

清除浮动的影响

从现象上:

1:给父盒子定高 height

缺点：不实际 实际中就是有时候高度就是auto

2：给父元素加overflow:hidden属性

图片下间隙问题

产生原因是图片具有文本属性，默认以基线对齐，这个间隙实际是哪个就是基线与底线之间的距离，一般默认是3px，但是可以发生变化，随着字体大小发生变化。

解决方法：

1：修改图片的对齐方式不为基线对齐 vertical-align:baseline;（top/middle/baseline/bottom)

2:给图片添加display：block属性

触发BFC规则（私人区域）

处于BFC规则的盒子 其外的元素不会影响到它，它内部的元素也不会影响到其外的盒子

BFC规则说：只要是BFC盒子内部子元素浮动，则父盒子会计算浮动子元素的高度

缺点：会隐藏掉故意溢出的元素

overflow属性

溢出处理属性 overflow

1：auto 如果溢出，则显示滚动条

2：scroll 无论溢出 都显示滚动

3：hidden 去除溢出

css属性中 清除浮动影响

clear:left/right/both  clear:both
属性必须依靠结构存在
<div style="clear:both"></div> 块级元素
<span style="clear:both"></span> 行内元素 不能清除浮动

空标签法 清除浮动影响 放置在浮动子元素之后

清除浮动影响的元素必须是块级元素 display:block;

缺点：增加了无用（没有用户展示数据）空标签导致文档树变大，结构冗杂

双伪元素法清除浮动影响

上面方法增加了空的结构标签–>用CSS去创造这个空的结构标签

伪元素的写法： E 代表元素
1： E::after {
    //作用是插入一个节点(div,span,p)到E元素所有内容之后
    content:'文本内容';  //设置伪元素的文本内容
}

2:E:before	{
     //作用是插入一个节点(div,span,p)到E元素所有内容之前
      content:'';
}	

伪元素默认的是行内元素

最终方案：放到拥有浮动子元素的 父元素身上即可

.clearFix::after,.clearFix::before{
    content:'.';
    line-height:0;
    font-size:0;
    height:0;
    display:block;//原因：只有块级元素才能清除浮动影响
    clear:both;
}

伪元素动态获取信息：

 .tips::after {
            content: attr(data-info);

            background-color: #ff0;
            padding: 0px 10px;

        }

<div class="phone tips" data-info="打折"></div>
<div class="phone tips" data-info="秒杀"></div>
<div class="phone tips" data-info="减50"></div>
<div class="phone tips" data-info="新品"></div>

显示与隐藏属性(不占据界面位置)

显示与隐藏： display 展示

显示：display:block
隐藏：display:none