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 额外标签法

• 语法：在最后一个浮动的子元素后面，添加一个额外的标签，添加清除浮动样式。例如 <div style= "clear:both"></div>，或者其他标签 （如< 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 清除浮动总结

• 为什么清除浮动：

  • 父级没高度
  • 子盒子浮动了
  • 影响下面布局

• 清除浮动方式：

  方式	优点	缺点
  额外标签法（隔墙法）	易懂、书写方便	添加无意义标签，结构化差
  父级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.分析页面中的行模块，以及每个行模块的列模块，为页面布局的第一准则。
  3. 一行中的列模块经常浮动布局，先确定每个列的大小，再确定列的位置，为页面布局的第二准则。
     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按钮。
  • 按钮使用的是背景图的设置
  • 文本框和按钮之间会有默认的间距，要手动清除。

4.2 banner布局

• 通栏的大盒子banner，不给宽度，给高度，给一个背景。
• 版心盒子，水平居中对齐，其他元素在这个盒子里布局
• 版心内左侧subnav导航栏
• 版心右侧course课程栏

4.3 精品推荐模块

• 大盒子goods 水平居中，且有盒子阴影
• 左侧盒子是标题H3左浮动
• 中间盒子是链接左浮动，good-item 距离可以控制链接的左右外边距（注意：行内元素只给左右外边距）
• 右侧盒子是 mod（修改的意思）右浮动

4.4 精品展示大模块

• 最大的盒子box版心水平对齐
• 上面的盒子box-hd，里面左侧标题H3左浮动，右侧链接a右浮动
• 下面的盒子box-bd，里面是无序列表
• 小li外边距的问题，小技巧：给box-hd宽度为1215 就可以一行装5个li。
  即最后一个盒子没有外边距时，可以直接给父级盒子一个大的宽度，就可以假装没有外边距。

4.5 底部模块

• 大盒子是通栏盒子footer，底色是白色
• 大盒子版心水平居中
• 盒子版权copyright左对齐
• 盒子链接links 右对齐