1. 浮动
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属性用于创建浮动框，将其移动到一边，直到遇到左边缘或右边缘及包含块元素或另一个浮动框的边缘
/* 语法 */
/* 属性值 none:元素不浮动（默认） left:元素向左浮动 right:元素向右浮动 */
选择器 {float: 属性值;}
1.5 浮动特性
1、浮动元素会脱离标准流（脱标）
- 浮动的盒子不再保留原先的位置
2、浮动的元素会一行显示并且元素顶部对齐
如果多个盒子都设置了浮动，则会按照属性值一行内显示并且顶端对齐排列。
注意：浮动的元素会互相贴靠在一起，不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
3、浮动的元素会具有行内块元素的特性
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
即：如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
- 浮动的盒子中间没有缝隙，是紧挨着一起的
- 行内元素同理
1.6 浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，网页布局策略：
网页布局第一准则：先用标准流的父元素排列上下位置，再内部子元素采取浮动排列左右位置；
网页布局第二准则：先设置盒子大小，再设置盒子位置
2. 常见网页布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习</title>
<style>
* {
padding: 0;
margin: 0;
}
/* 通栏： 和浏览器一样宽，不需要设置宽度，只需要设置高度即可 */
.top {
height: 50px;
background-color: gray;
}
.banner {
width: 980px;
height: 150px;
background-color: gray;
margin: 10px auto;
}
.box {
width: 980px;
height: 300px;
margin: 0 auto;
background-color: pink;
}
.box li {
list-style: none;
width: 237px;
height: 300px;
background-color: gray;
float: left;
margin: 0 auto;
margin-right: 10px;
}
.box .last {
margin-right: 0;
}
.footer {
height: 200px;
background-color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="banner"></div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>
效果类似于第三种网页布局
2.1 浮动布局注意点
2.1.1 浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.1.2 一个元素浮动了，理论上其余兄弟元素也要浮动
一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，防止出现问题。
浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流。
3. 清除浮动
3.1 清除浮动原因
由于父级盒子很多的情况下，不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为0时候，就会影响下面的标准流盒子，对后面的排版产生影响。
- 父级没高度
- 子盒子浮动了
- 影响下面布局了
3.2 清除浮动本质
清除浮动元素脱离标准流造成的影响
- 如果父盒子本身有高度，则不需要浮动
- 清除浮动后，父级就会根据浮动盒子自动检测高度，父级有了高度，就不会影响下面的标准流
/*属性值： left---清除左侧浮动影响 right---清除右侧浮动影响 both---清除左右浮动影响*/
/*实际一般只用 clear:both; */
选择器 {clear: 属性值;}
3.3 清除浮动方法
3.3.1 额外标签法（隔墙法）
在浮动元素末尾添加一个空的标签，或者其他标签
例如 <div style= ''clear: both''></div>
优点：通俗易懂，书写方便
缺点：添加很多无意义标签，结构化较差
要求：新的空标签必须是块级元素
3.3.2 父级添加overflow属性
父级元素添加属性代码：overflow: hidden;
优：代码简洁
缺：不显示溢出部分
3.3.3 父级添加after伪元素
.clearfix:after {
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /*IE6 、7专有*/
*zoom: 1;
}
优：没有增加标签，代码简单
缺：照顾低版本浏览器（百度、淘宝、网易）
3.3.4 父级添加双伪元素
.clearfix:before, .clearfix:after {
content:"";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix { /*IE6 、7专有*/
*zoom: 1;
}
优：代码简洁
缺：照顾低版本浏览器（小米、腾讯）
4. PS切图
PS有很多切图方式：图层切图、切片切图、PS插件切图等
4.1 常见的图片格式
4.2 图层切图
4.2 切片切图
4.2 插件切图
扫一扫
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
