浮动:
1:作用:用于布局页面;
2:css布局的三种机制:
3;普通流在布局中的特点:
4:使用浮动的作用
5:为什要清除浮动
6:利用浮动完后导航栏
7:能够清除浮动
8:使用ps切图工具
1:css布局的三种机制:
1:标准流:
1:块级元素:div h p dt
2:行内元素:span <strong>
2:浮动:
1:为什么用浮动:
1:如果让多个div布局在同一行:
1:行内块内部有空白缝隙很难去除;
2:如果实现盒子的左右对齐:
2:什么是浮动:
1:脱离普通流的控制;
2:移动到指定位置;
3:作用:
1:让多个盒子同行显示;
2:实现盒子的左右对齐;
3:浮动最早是用来控制图片,实现文字环绕图片的效果;
4:使用方式:
选择器{
float:left|right
}
5:特性--浮 漏 特
1:浮:最上边的盒子漂浮在其他盒子之上(脱标)
2:漏:浮动的盒子会把位置漏给其他盒子,不在占有之前的位置
3:特:浮动的属性会改变元素的dispay属性
1:添加浮动后仍然是块级元素,默认相当于转换为了inline-block,
区别:行内块有空隙,float没有空隙
2:消除中间空隙,浮动元素之间默认没有空隙
3:如果parent盒子放不下float,则会另起一行
6:浮动小细节:
1:float是脱标的,所以需要给float添加一个标准流的parent,降低对其他标准流的影响
2:一个网页都是由标准流+float完成的
7:列表使用:
1:重要的导航栏的实现采用:li+a 来实现:语义更清晰
2:防止浏览器过滤
8:浮动元素与父元素之间的关系:
1:不会与parent的边框重叠,不会压着边框;
2:不会超过父盒子的内边距;
9:浮动元素与兄弟盒子之间的关系:
1:两个都浮动则并列;
2:第一个不浮动,第二个浮动,则不变;
3:浮动元素只会影响后面的盒子;
4:所谓浮动就是在当前位置浮动;
2:为什么要清除浮动:
1:为什么用浮动:可以让多块元素单行显示;
2:为什么清除浮动:
1:在标准流里孩子多高,父亲就有多高
2:在浮动情况下,孩子设置浮动,父亲的高度会消失(从而会影响页面布局)
3:由于浮动的盒子不占用位置,则会导致父盒子没有高度;
3:清除浮动的本质:子元素设置浮动,浮动的盒子不占用位置,父元素高度会消失的问题;
4:消除浮动的方法:选择器{
clear:left|right|both
}
1:额外标签法:
1:在浮动元素的后面添加一个空标签
<div class="sec"></div>
<div style="clear: both;"></div>
2:优点:通俗易懂,书写方便
3:缺点:添加无意义标签,结构化差
2:给父级添加overflower:hidden(溢出隐藏)|auto(溢出滚动)|scroll (溢出滚动)
1:优点:代码简介
2:缺点:内容增多时容易造成不会自动换行导致内容被隐藏,无法显示要溢出的元素
3:after伪元素清除浮动:
1:是额外标签法的升级版;使用方法:
.clearfix:before,
.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1
}
2:优点:不用添加单独标签,代码更简洁;
3:缺点:兼容性问题
4:双伪元素:
5:清除浮动触发条件:
1:父元素没有高度;
2:子元素设置浮动;
3:影响下面布局;