浮动处理，图片下间隙处理
day05
color:rgba(255,255,255,0.5)
a:alpha 透明度 0-1 的小数 值越大越不透明
文字默认以基线对齐
1：
调整文本垂直对齐方式的属性
verticle-align:top定对齐/ middle 中线对齐/baseline基线对齐/bottm底线对齐
<mark>对块级元素而言，用display：inline-block实现并排不是最好的做法</mark>
**因为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规则（私人区域）
<mark>处于BFC规则的盒子 其外的元素不会影响到它，它内部的元素也不会影响到其外的盒子</mark>
<mark>BFC规则说：只要是BFC盒子内部子元素浮动，则父盒子会计算浮动子元素的高度</mark>
缺点：会隐藏掉故意溢出的元素
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> 行内元素 不能清除浮动
<mark>空标签法 清除浮动影响 放置在浮动子元素之后</mark>
<mark>清除浮动影响的元素必须是块级元素</mark> display:block;
缺点：增加了无用（没有用户展示数据）空标签导致文档树变大，结构冗杂
双伪元素法清除浮动影响
上面方法增加了空的结构标签–>用CSS去创造这个空的结构标签
伪元素的写法： E 代表元素 1： E::after {
//作用是插入一个节点(div,span,p)到E元素所有内容之后
content:'文本内容'; //设置伪元素的文本内容
}
2:E:before {
//作用是插入一个节点(div,span,p)到E元素所有内容之前
content:'';
}
<mark>伪元素默认的是行内元素</mark>
最终方案：放到拥有浮动子元素的 父元素身上即可
.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
