浮动
先说一个问题
-
文字图片对不齐
解决办法
1.文字与图片基线对齐(文字默认与基线对齐,但图片的基线是图片最下面的那条边,图片的底线在它空白的下面)
调整文本垂直对齐方式的属性
verticle-align:top顶对齐/middle中线对齐/baseline基线对齐/bottom底线对齐
2.给两个盒子加了一个触发规则BFC的属性:overfllow:hidden
结论:对块级元素而言,用diaplay:inline-block实现并排并不是最好的做法。因为diaplay:inline-block会使元素转换为行内块元素 它具有文本属性 基线对齐 导致对不齐(图片在上,文字在下)而且,盒子中间会有空隙
图片下间隙问题:
这个间隙是什么:这个间隙是图片下间隙,产生的原因是,图片具有文本特性,就会默认以基线对齐,这个下间隙实际实际就是基线与底线之间的距离,一般默认3px,但是可以发生改变,随着字体大小发生变化
解决方法:
- 修改图片的对齐方式,不以基线对齐
- 给图片添加 display:block 属性 使图片丢失文本特性
浮动
浮动的作用:解决盒子并排问题
float:left/right/none(默认);
left:找父元素的左边界停靠
right:找父元素的右边界停靠
none:保持原本位置,标准流
每一个并排的盒子身上都要加并排属性
并排无间隙
标准流:一行一个,从左侧边界开始放置
浮动会带来一个现象,盒子实现了并排放置—>脱离标准流—>成为浮动流—>不占界面位置,可以使盒子并排,但还是会有不好的影响
浮动带来的影响:
脱离标准流—>成为浮动流—>不占界面位置—>导致其他盒子向上移动
**导致父盒子的高度塌陷:**父盒子的高度本来是由子元素撑开的,父亲的高度计算是从内容的高度得来的,现在由于浮动元素不占位置,所以子元素高度无法计算,父盒子的高度为0或者塌陷了。
**清除浮动造成的影响(解决方法):**现象,本质
-
现象:
-
给父盒子定高度 height
缺点:不实际 实际中就是有时候高度就是auto
-
-
overflow:hidden 给父元素加BFC规则(私人区域)
处于BFC规则的盒子 其外的元素不会影响到他,它内部的元素也不会影响到其外的元素
BFC规则说明,只要是BFC盒子内部子元素浮动,则父盒子会计算浮动子元素的高度
-
缺点:会隐藏掉故意溢出的元素
[外链图片转存失败(img-4OhZ946d-1565270882836)(E:\老师整理\day05\笔记\media\overflow缺点.png)]
-
-
css属性中有一个属性可以清除浮动影响
clear:left/rigth/both(首选) clean:both 属性必须依靠结构存在--->必须写在body里面 <div style="clear:both"></div> 块级元素 可以清除浮动影响 <span style="clear:both"></span> 行内元素 不能清除浮动影响
空标签 放置位置放置在所有浮动子元素之后
清楚浮动的元素必须是块级元素
- 缺点 增加了无用(没有向用户展示的数据)空标签 导致文档树变大,数据冗杂
-
伪元素法清除浮动造成的影响
由于上面方法 增加了空的结构标签—>用css去创造这个空的结构标签
伪元素的写法: 1:E::after{ //作用是插入一个节点(块级元素,行内元素,行内块元素)到E元素所有内容之后 content:'文本内容';//设置伪元素的文本内容 } 2:E::before{ //作用是插入一个节点(块级元素,行内元素,行内块元素)到E元素所有内容之前 content:'文本内容'; } 创造一个清除浮动的公用名字(衣服)clearFix
伪元素默认的显示模式是行内模式
::最终方案:
.claerFix::after,.claerFix::before{ content:'不要有空格'; height: 0; font-size: 0; line-height: 0; display:block;//原因,只有块级元素才可以清除浮动影响 clear:both; content:attr(data-info) 获取data-开头的自定义属性的值 <div class="q" data-info="数据"></div> data-info自定义属性的值 }
显示与隐藏属性
隐藏以后不占位置
显示与隐藏: display 展示
显示:display:block;
隐藏:display:none;