一、浮动(float)
1.1 传统网页布局方式
①网页布局的本质:用CSS来摆放盒子,把盒子放到相应位置。
②CSS提供了三种传统布局方式:普通流、浮动、定位。
1.2 标准流(普通流 / 文档流)
①定义:标签按照规定好的默认方式排列,如:
1)块级元素会独占一行,从上到下顺序排列,常用元素:div、hr、p、h1-h6、ul、ol、dl、form、table;
2)行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行,常用元素:span、a、i、em。
②标准流是最基本的布局方式。
1.3 需要浮动的原因
①很多布局效果,标准流没办法完成,此时就可以利用浮动完成布局。浮动可以改变元素标签默认排列方式;
②浮动最典型应用:让多个块级元素一行显示;
③网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素找浮动;
④网页布局第二准则:先设置盒子大小,再设置盒子位置。
1.4 浮动的定义
float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘及包含块或另一个浮动框的边缘。
选择器 { float: 属性值; }
1.5 浮动的特性
①浮动元素会脱离标准流;
②浮动元素会在一行内显示并且元素顶部对齐排列;
③浮动的元素会具有行内块元素的特性。
重要特性
①脱离标准流的控制移动到指定位置,浮动的盒子,会漂浮在标准流的盒子上面,不占位置;
②如果多个盒子都设置了浮动,则它们会按照属性值一行显示并且顶端对齐排列;
③浮动的元素是相互贴在一起(没有间隙)的,若父级宽度放不下盒子,多出的盒子会再下一行对齐;
④浮动元素具有行内块元素特性,任何元素都可以浮动,设置了浮动元素后都具有行内块元素性质。
注:若块级元素没有设置宽度,则默认和父级一样宽。
1.6 浮动元素经常和标准流父级元素搭配使用
为了约束元素位置,一般采取:用标准流父元素排列上下位置,内部子元素采取浮动元素排列左右位置,符合网页布局第一准则。
二、常见网页布局
①浮动和标准流的父盒子搭配:用标准流父元素排列上下位置,内部子元素采取浮动元素排列左右位置。
②一个元素浮动了,理论上其余兄弟元素也要浮动:一个盒子里有多个盒子,其中一个盒子浮动,其他盒子也应该浮动,防止引起问题。
注:浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
三、清除浮动
3.1 需要清除浮动的原因
由于父级盒子在不确定要放多少子盒子的情况下,不便设置高度,而子盒子浮动不占位置,最后父级盒子高度会自动变为零,就会影响下面的盒子的排版,从而造成影响。
3.2 清除浮动的本质
①清除浮动的本质是清除浮动元素脱离标准流造成的影响;
②如果父盒子本身具有高度,则不需要清除浮动;
③清除浮动之后,父级会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流的排版了。
3.3 清除浮动的方法
选择器: {
clear: 属性值;
}
清除浮动的策略:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
①额外标签法(隔墙法)
在最后一个浮动元素末尾添加一个空的块级元素,给其设置属性:clear: both; 。
.clear {
clear: both;
}
<div class="clear"></div>
优点:通俗易懂,书写方便;
缺点:添加许多无意义的标签,结构化差。
②父级添加 overflow 属性
给父级添加 overflow 属性,将其属性设置为 hidden、auto 或 scroll。
注:是给父元素添加代码。
优点:代码简洁;
缺点:无法显示溢出部分。
③父级添加 after 伪元素
.clearfix {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*IE6、7专有*/
*zoom: 1;
}
优点:没有增加标签,结构更简单;
缺点:照顾低版本浏览器。
④父级添加双伪元素
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
优点:代码更简洁;
缺点:照顾低版本浏览器。
四、PS切图
4.1 常见的图片格式
①JS 图像格式:JPEG(JPG)对色彩的信息保留较好,高清,颜色较多,产品类的图片经常用到 jpg 格式的。
②gif 图像格式,GIF 格式最多只能存储 256 色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际上经常用于一些图片小动画效果。
③png 图像格式是一种新兴的网络图形格式,结合了 GIF 和 JPEG 的特点,具有存储形式的特点,能够保存透明背景。如果想要切成背景透明的图片,请先择 png 格式。
④PSD 图像格式是 Photoshop 的专用格式,里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说,最大的优点是我们可以上面复制文字,获得图片,还可以测量大小和距离。
4.2 图层切图
最简单的切图方式:鼠标点击设置为移动工具->点击图层->快速导出为 PNG。
4.3 合并图层
①按住 Shift 选中需要合并的图层:图层菜单→合并图层(Ctrl+E);
②右击→快速导出为PNG。
4.4 切片切图
①利用切片工具手动划出切片范围;
若要切出透明 logo.png,则需要将图层下拉至最下面,然后点击小眼睛使背景消失。
②文件菜单->导出->存储为 web 设备所用格式->选择我们要的图片格式->存储。
4.5 PS Cutterman 插件切图
Cutterman 是一款在 PS 中的插件,能够自动将你需要的图层进行输出,以替代传统的手动“导出为 web 所用格式”以及使用切片工具进行挨个切图的繁琐流程。