CSS浮动
# 标准流
块级元素会独占一行，从上向下顺序排列
常用块元素：div、hr、p、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行
常用元素：span、a、i、em
以上都是标准布局，标准流是最基本的布局方式
# 浮动
多个块级元素纵向排列使用标准流，多个块级元素横向排列使用浮动
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
# 浮动特性
- 浮动元素会脱离标准流
- 浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
# 脱标
- 脱离标准普通流的控制 移动到指定位置 ， 脱标
- 浮动的盒子不再保留原先的位置
# 顶部对齐
如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并顶端对齐排列
注意：浮动的元素是相互贴靠在一起的，如果父级容器宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
# 行内块元素
浮动的元素会具有行内块元素的特征
# 标准使用
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
# 常见的网页布局
# 注意点
浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动配列左右位置
一个元素浮动了，理论上其余的兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
# 清除浮动
由于父级盒子很多情况下，不方便加高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
# 清除浮动本质
- 清楚浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
# 清除方法
div {
clear : 属性值；
}
2
3
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
- 额外标签法，也称为隔墙法，W3C推荐
- 父级添加 overflow 属性
- 父级添加 after 伪元素
- 父级添加双伪元素
# 额外标签法
<style>
.box {
width:800px;
}
block1,block2 {
float: left;
width: 200px;
heigth: 200px;
}
.clear {
clear: both;
}
</style>
<body>
<div class="box">
<div class="block1">浮动1</div>
<div class="block2">浮动2</div>
<div class="clear"></div>
</div>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
要求这个新标签必需是块级元素
策略是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式
# overflow
overflow: hidden | auto | scroll;
缺点是无法显示溢出部分
# after 伪元素
额外标签法的升级版,也是给父元素添加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; //兼容低版本浏览器
}
2
3
4
5
6
7
8
9
10
较常使用 ，企业级
# 双伪元素清除
.clearfix:before , .clearfix:after {
content: "";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
2
3
4
5
6
7
8
9
10
更符合闭合原则
# BFC介绍
块格式化上下文 (Block Formatting Context)
是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其它元素交互的区域
创建BFC方法：
- Html标签
- 浮动元素
- 行内块元素
- overflow: hidden
特点：
- BFC盒子会默认包裹住内部子元素
- BFC盒子本身与子元素之间不存在margin的坍陷现象
# PS切图基本操作
- jpg图像格式：JPEG对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式
- gif图像格式：GIF格式最多只能存储256色，所以通常用来显示图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果
- png图像格式：结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，选择png格式
- PSD图像格式：是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多设计稿，可以直接从上面复制文字，获取图片，还可以测量大小和距离
# 合并图层
# 切片工具
# PS插件切图
Cutterman