小白前端08-浮动/PS切图/学成案例小白前端08-浮动

1.浮动 1.1传统网页布局的三种方式

普通流（标准流）
- 概念：标签按照规定的默认方式排列
1. 块级元素会独占一行，从上到下顺序排列
- 常用元素：div、hr、p、h1~h6、ul
2.行内元素会按顺序从左到右，碰到父元素边缘自动换行
- 常用元素：span、a、em
浮动
定位

1.2 为什么需要浮动

原因：很多布局效果，标准流无法实现，此时可以利用浮动完成布局，浮动可以改变元素标签的默认排列方式。
浮动的典型应用：可以让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动。

1.3 浮动概念

概念：float属性用于创造浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：选择器 { float: 属性值; }
- none：元素不浮动（默认值）
- left：元素向左浮动
- right：元素向右浮动

1.4 浮动特性

主要特性：
1.浮动元素会脱离标准流（脱标）
2.浮动的元素会一行内显示并元素顶部对齐
3.浮动的元素具有行内块元素的特性

注意：浮动的元素不占有位置！！

1.4.1 脱标

脱标元素的特性：
1. 脱离标准流的控制（浮）移动到指定位置（动），即脱标。
2. 浮动的盒子不再保留原先的位置。

1.4.2 浮动元素一行显示

要想在一行显示，每个标签都要设置浮动属性。
浮动元素是互相贴靠在一起的，没有缝隙。
如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

1.4.3 浮动元素行内块特性

任何元素都可以浮动，无论之前是什么模式的元素，添加浮动后具有行内块元素的相似特性。
- 行内元素可以直接给高度/宽度。
- 如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。

1.5 浮动元素和标准流父级搭配

作用：为了约束浮动元素位置，常常，先用标准流的父级元素排列上下位置，之后在内部子元素使用浮动排列左右位置。符合网页布局第一准则。

注意：有很多案列，比如小米的展示部分的布局，商品展示栏的布局，以及常用的网页结构的布局。

1.6 浮动注意点 1. 浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置
再用内部子元素浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里有多个盒子，如果其中一个盒子动了，那么其他兄弟盒子也应该浮动，以免出现问题
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

2.清除浮动 2.1 为什么要清除浮动

原因：父级盒子在很多情况下，不方便给高度，但是子盒子浮动不占位置，最后父级盒子高度为0，就会影响下面的标准流盒子。
父级盒子不方便设高度场景：
- 商品页面商品会随时添加，更新
- 新闻页面的文章长短不一样
关键：由于浮动元素不再占有原标准流的位置，所以会对后面的元素排版产生影响。

2.2 清除浮动元素的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

2.3 清除浮动

语法：选择器{ clear: 属性值; }
- left：不允许左侧有浮动元素（清除左侧浮动的影响）
- right：不允许右侧有浮动元素（清除右侧浮动的影响）
- both：同时清除左右两侧浮动的影响

注意：在实际工作中，几乎只使用clear:both;

清除浮动的策略是：闭合浮动。

2.4 清除浮动方法

额外标签法也称隔墙法，W3C推荐
父级添加 overflow 属性
父级添加 after 伪元素
父级添加双伪元素

2.4.1 额外标签法

语法：在最后一个浮动的子元素后面，添加一个额外的标签，添加清除浮动样式。例如，或者其他标签（如< br />等）
- 优点：书写方便，容易理解
- 缺点：添加许多无意义的标签，结构化较差。工作中不常用。

注意：添加的空标签，必须是一个块级元素才可以。

2.4.2 父级添加 overflow 属性

语法：给父级添加overflow属性，属性值为hidden、auto、scroll。
使用overflow:hidden;来清除浮动。
- 优点：代码简洁
- 缺点：无法显示溢出的部分

2.4.3 父级添加 after 伪元素

语法：:after方式是额外标签法的升级版，是给父元素添加的
- 优点：没有添加标签，结构简单
- 缺点：照顾低版本浏览器
- 代表网站：百度、淘宝网、网易等
.clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } .clearfix{/* IE6、7专有（兼容性） */ *zoom:1; } ... <父元素 class="clearfix">

2.4.4 父级添加双伪元素

语法：也是给父元素添加，只是这次是在前后添加了伪元素。
- 优点：代码更简洁
- 缺点：照顾低版本浏览器
- 代表网站：小米、腾讯等
.clearfix:before,.clearfix:after{ content:""; display:block; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1; } ... <父元素 class="clearfix">

2.5 清除浮动总结

为什么清除浮动：
- 父级没高度
- 子盒子浮动了
- 影响下面布局

【小白前端08-浮动/PS切图/学成案例】清除浮动方式：

方式	优点	缺点
额外标签法（隔墙法）	易懂、书写方便	添加无意义标签，结构化差
父级`overflow:hidden;`	书写简单	溢出隐藏
父级`:after伪元素`	结构语义化正确	IE6-7不支持`:after`，兼容性问题
父级双伪元素	结构语义化正确	IE6-7不支持`:after`，兼容性问题

3.PS切图 3.1 常见的图片格式

jpg图像格式：JPEG(.JPG)对色彩保留较好，高清，颜色多，产品类图片常使用。图片较大
gif图像格式：GIF格式最多只能存储256色，常显示简单图形及字体，可以保存透明背景和动画效果。
png图像格式：结合了GIF和JPEG的优点，颜色好且保持透明背景。背景类图片常用。
PSD图像格式：是PS的专用格式，是设计稿常用的格式。

3.2 PS切图

常见的切图方式：图层切图、切片切图、PS插件切图等

3.2.1 图层切图

方法1（简单）：右击图层-快速导出为PNG
方法2 （合并图层）：先合并需要的图层（ctrl+e），再导出PNG

3.2.2 切片切图

方法：
1.先利用切片选中图片
2.文件菜单-导出-存储为web设备所用格式-选择需要的图片格式-存储

3.2.3 PS插件切图

方法：利用Cutterman插件来简化切图过程

4.学成案例 4.1 CSS属性书写顺序

建议按照以下顺序：
1.布局定位属性：display/position/float/clear/visibility/overflow
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性(CSS3)： content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...

4.2 页面布局整体思路

为了提高网页制作效率，整体思路如下：
1.必须确定页面的版心（可视区），通过测量
2.分析页面中的行模块，以及每个行模块的列模块，为页面布局的第一准则。
1. 一行中的列模块经常浮动布局，先确定每个列的大小，再确定列的位置，为页面布局的第二准则。
  4.制作HTML结构，还是遵循先有结构，后有样式的原则。
  5.先理清布局结构，再写代码。需要多写多积累。

4.3 页面具体布局 4.3.1 头部布局

主盒子类名为header
- 包括有：logo、nav导航、search搜索、ueser个人等盒子
- 这几个盒子都要设置浮动
导航栏：在实际开发中，不会直接用a标签，而是用li标签包含a的做法。
- li+a语义更清晰，这是有条理的列表型内容。
- 如果直接用a，搜索引擎容易辨别为有堆砌关键字的嫌疑（故意堆砌关键字容易被搜索引擎降权），影响网站的排名。
注意：
1. 让导航栏一行显示，给li添加浮动，因为li是块级元素，需要一行显示。
2. 这个nav导航栏可以不给宽度，方便将来添加其余文字。
3. 导航栏里的文字不一样多，最好给链接a 左右padding撑开盒子，而不是指定宽度。
搜索框：一个大盒子里包含2个表单，input文本框和button按钮。
- 按钮使用的是背景图的设置
- 文本框和按钮之间会有默认的间距，要手动清除。