目录
浮动
传统网页布局的三种方式
纵向排列找标准流，横向排列找浮动
浮动的定义
在横向排版中，向左浮动时多个元素会紧挨着靠近左侧浏览器边缘，右浮同理
浮动特性
1.脱离标准流的控制移动到指定位置；且不再为浮动的盒子保留的原来的位置，其他的盒子会占有，形成重叠
2.多个盒子设置浮动，他们会在一行内显示并在顶端对齐
3.浮动元素会具有行内块元素的特性
设置的浮动对象会移动到特定位置，它原来的位置不会再保留，会有其他的盒子来占据浮动盒子原来的位置，可能会形成重叠
如下图，粉色盒子设置了浮动，三个盒子紧贴在一起，紫色的盒子会上位占据原来粉色盒子的位置，形成重叠
设置浮动的盒子上顶端会对齐，浮动的元素互相贴合在一起，中间不会有缝隙
如果父级宽度装不下这些盒子，多出的盒子会再起一行对齐
行内元素设置浮动后会具有行内块的特性，可以设置宽和高；
如果块级盒子没有设置宽度，那么它的宽度和父级元素的宽度一样，但是设置浮动后，它的宽度取决于盒子中的内容多少
浮动元素经常和标准流父级搭配使用
用标准的父元素排列上下位置，之后内部元素采取浮动排列左右。
就是用一个大盒子装小盒子，先确定好大盒子的在页面中的整体位置，再去布局小盒子在大盒子中的位置
案例
从上图到下图，除去了第四个盒子的右外边框。再写代码时要考虑权重的问题，如果直接写.last，那么不会修改成功，它的权重是10，而.box li的权重是11，所以写.box.last，它的权重是20
常见的页面布局
通栏的盒子的宽度与浏览器相等，不需要再设置宽度
浮动布局注意点
标准流定义父级盒子的上下位置，浮动定义子盒子再父盒子中的左右位置
一个元素浮动了，理论上其他兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流（只影响后面，不影响前面）
清除浮动
为什么要清除浮动
在不确定子元素的多少、大小的情况下，盲然设置父级盒子的高度，可能会影响子级元素的展现
当不设置父级盒子的高度并让子级元素浮动时，父级元素高度会变为0
清除浮动本质
清除浮动元素脱离标准流的影响
清除浮动
clear:...
清除浮动的策略是：闭合浮动
额外标签法
在浮动元素末尾添加一个空的标签，如<div class="demo"></div>或者<br/>，在<style></style>标签中引用后调用clear方法
最后添加的这个元素一定要是块级元素，不可以是<span></span>等元素
父元素overflow
给父元素添加overflow属性，将其属性值设置为hidden、auto或scroll
after伪元素
复制粘贴，需要在父级盒子中添加上多类名clearfix
双伪元素
复制粘贴，给父元素添加
清除浮动总结
PS切图
jpg:对色彩信息保留较好，高清，产品类的图片经常用jpg格式
gif:经常用于一些图片动画效果
png:可以切成背景透明的图片
PSD图像格式：可以直接从上面复制文字，获得图片，还可以测量大小和距离
图层切图
右击图层-快速导出为PNG
图层菜单-选择图层-合并图层（ctrl+e）-右击图层-快速导出为PNG
切片工具
切片工具手动划出-文件菜单-导出-存储为web设备所用格式-选择图片格式-存储
注意切片一定要选择“选中的切片”，否则会选中所有的切片
扫一扫
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
