基础学习5 浮动

背景:

background: #000 url(“ ”) no-repeat xpx ypx /10% 20% / center center top left /

10% 20% 指的是背景盒子的宽度-图片的宽度的10%

background-position:   xpx  ypx /10%  20% / center center  top left  ;

background-position: 50px ; 
(50px ,50%)

文字默认以基线对齐

解决办法:

1:

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

verticle-align:top顶对齐 / middle中线对齐/baseline基线对齐/bottom底线对齐

2: 给两个盒子加了一个触发BFC规则的属性 :overflow:hidden

结论:对块级元素而言,用display:inline-block实现并排不是最好的做法

?因为: display:inline-block会使元素转换为行内块 具有文本属性 基线对齐—> 对不齐(图片在上,文字在下) 而且,盒子中间会有空隙

图片下间隙问题

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

解决方法:

1:修改图片的对齐方式 不为基线对齐 (top/middle/bottom)

2:给图片添加display:block 属性 让图片丢失文本特性

浮动(float)

作用:解决盒子并排问题

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

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

float:left / right /  none(默认值) ;

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

影响

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

**父盒子的高度塌陷: **父盒子高度本来是由子元素撑开的,父亲的高度计算是从内容的高度得来的, 现在由于浮动元素不占位置,所以子元素高度无法计算,父盒子的高度就他塌陷了.

清除浮动的影响

现象:

1: 给父盒子定高 height

缺点: 不实际 实际中就是有时侯高度就是auto

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

触发BFC规则 (私人区域)

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

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

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

[外链图片转存失败(img-5kJ1hU1F-1564656569214)(C:\Users\Administrator\Desktop\第一阶段\day05\笔记\media\overflow缺点.png)]

3:css属性中 空标签法清除浮动影响

clear:left/right/both  clear:both 

属性必须依靠结构存在  ----> 必须写在body
<div style="clear:both"></div>  块级元素  可以清除
<span style="clear:both"></span>  行内元素  试了  不可以

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

清除浮动影响的元素必须是块元素

缺点: 增加了无用(没有用户展示数据)空标签 导致文档树变大 ,结构冗杂

4:双伪元素法清除浮动影响

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

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

伪元素默认的显示模式是行内模式

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

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

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

显示与隐藏:  display 展示

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