一、盒子模型
1.盒子的组成
盒子模型：就是把HTML页面中的布局元素看作一个矩形盒子，也就是一个盛装内容的容器
CSS盒子模型的本质就是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距和实际内容。（border、margin、padding、content）
2.边框border
语法：
border: border-width || border-style || border-color
属性：
border-width：定义边框的粗细，单位是px
border-style：边框的样式
属性值：
none：定义无边框
hidden：与none相同，不过应用于表时除外，对于表，hidden用于解决边框冲突
dotted：定义点状边框，在大多数浏览器中呈现为实线
dashed：定义虚线，大多数浏览器呈现为实线
solid：定义实线
double：定义双线，双线的宽度等于border-width的值
groove：定义3D凹槽边框，其效果取决于border-color的值
ridge：定义3D垄状边框，其效果取决于border-color的值
inset：定义3Dinset边框，其效果取决于border-color的值
inherit：定义应该从父元素继承边框样式
border-color：边框颜色
边框的复合写法：简写
border: 5px solid red; 没有顺序
边框可以拆开写：
border-top: 5px dotted red;
border-bottom: 5px double red;
border-left: 5px dashed red;
border-right: 5px groove red;
3.表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
语法：
border-collapse:collapse;
属性值：
collapse：边框会合并为一个单一的边框，会忽略border-spacing和empty-cells属性
separate：默认值，边框会被分开，不会忽略border-spacing和empty-cells属性
inherit：规定应该从父元素继承border-collapse属性的值
注：
1）collapse单词是合并的意思
2）border-collapse：collapse；表示相邻边框合并在一起
4，边框会影响盒子实际大小
边框会额外增加盒子的实际大小，因此
1）测量盒子大小时，不量边框
2）如果测量时包含边框，则需要width/height减去边框的宽度
5.盒子的内边距padding
padding属性用于设置内边距，即边框与内容之间的距离
属性：
padding-left:左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距
复合属性写法：简写
padding: 5px; 1个值，代表上下左右都有5像素内边距
padding: 5px 10px 2个值，代表上下边距5像素，左右边距10像素
padding: 5px 10px 20px; 3个值，代表上内边距5像素，左右边距10像素，下边界20像素
padding: 5px 10px 20px 30px; 4个值，代表上、右、下、左，顺时针
注：
1）如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子
2）如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可
3）如果盒子本身没有指定width/height属性，则此时的padding不会撑开盒子的大小
6.盒子的外边距margin
margin属性用于设置外边距，即控制盒子和盒子之间的距离
属性：
margin-left
margin-right
margin-top
margin-bottom
复合属性写法：简写
同padding相同
7.外边距的典型应用
外边距可以让块级盒子水平居中，但必须满足以下：
1）盒子必须指定了宽度
2）盒子左右外边距都设置为auto
常见写法：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
8.外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
1.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值(即，当父元素的margin值大时，按父元素的参数进行塌陷，若子元素的margin值大时，按子元素的参数进行塌陷)
解决方案：
1）可以为父元素定义上边框（border-top）
2）可以为父元素定义上内边距（padding-top）
3）可以为父元素添加overflow:hidden
4）其他方法：如浮动、固定、绝对定位的盒子不会出现塌陷
2.两个同级的div1和div2，当div1定义下边距，div2定义上边距，则边距较小的一个会被吃掉
9.清除外边距
网页元素很多都带有默认的内外边距，而且不同浏览器的也不一致，因此在布局之前，首先要清除下网页元素的内外边距
* {
padding: 0; 清除内边距
margin: 0; 清除外边距
}
注：
行内元素为了照顾兼容性，尽量只设置左右内外边距。不要设置上下内外边距，但是转换为块级和行内块元素就可以了
因为行内元素设置margin： 20px后，仅左右边距生效，上下不生效，故为了兼容性，尽量只设置左右边距
10.总结
1)布局为啥用不同盒子，我只想用div？
标签都是有语义的，合理的地方用合理的标签，如产品的标题就用h，大量文字段落就用p
2）为啥用那么多类名？
类名就是给每个盒子起一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也方便
3）到底用margin还是padding？
大部分情况两个都可以混用，两者各有优缺点，根据实际情况使用
4）
11.圆角边框
在CSS3中，新增了圆角边框样式
border-radius属性用于设置元素的外边框圆角
语法：
border-radius: length;
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
radius半径（圆的半径）原理：
（椭）圆与边框的交集形成圆角效果
属性值：
可以为数值，也可以为百分比
属性值复合写法：
border-radius: 左上角、右上角、右下角、左下角
border-radius: 参数1 参数2 #表示左上角及对角（右下角）为参数1，右上角和对角（左下角）为参数2
border-radius: 参数1 参数2 参数3 #左上角-参数1，右上角及左下角-参数2，右下角-参数3
圆形块：
设置border-radius属性值为正方形边框的一半。
注：
1）当属性值设置为百分百时，属性值和边框（高度或宽度中较短的边框）的长度
2）当属性值为百分之五十时，属性值为边框（高度或宽度中较短的边框）的一半
3）当属性值为百分比时，最高仅能设置到百分之五十
4）当属性值为数值时，最高仅能设置为（高度或宽度中较短的边框）的一半
12.盒子阴影
box-shadow属性为盒子添加阴影
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
属性值：
h-shadow：必须，水平阴影的位置，允许负值（正数向右移动，负数反之）
v-shadow：必须，垂直阴影的位置，允许负值（正数向下移动，负数反之）
blur：可选，模糊距离（阴影的虚实）
spread：可选，阴影的尺寸（阴影的大小）
color：可选，阴影的颜色
inset：可选，将外部阴影（outset）改为内部阴影
box-shadow: 10px 10px 10px 10px rgba(0,0,0, .3) inset;
注：
1）默认为外阴影（outset），但是不可以写这个单词，否则会导致阴影失效
2）盒子阴影不占用空间，不会影响其他盒子的排列
13.文字阴影
使用text-shadow属性将阴影应用于文本
语法：
text-shadow: h-shadow v-shadow blur color;
属性值：
h-shadow：必须，水平阴影位置，允许负值
v-shadow：必须，垂直阴影位置，允许负值
blur：可选，模糊距离
color：可选，阴影的颜色
二、传统网页布局的三种方式
1.普通流（标准流/文档流）
标准流：标签按照规定好的默认方式排列
1）块级元素独占一行，从上向下顺序排列
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
2）行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
常用元素：span、a、i、em等
2.浮动float
1）浮动的典型应用：可以让多个块级元素一行内排列显示
2）网页布局的第一准则：多个块级元素纵向排列找标准流（即存在多个div，且为垂直向下排列），多个块级元素横向排列找浮动（即存在多个div保存在同一行显示）
3)网页布局的第二准则：先设置盒子大小，再设置盒子的位置
4)一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题（浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流）
float属性用于创建浮动框，将其移动一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法：
选择器 { float: 属性值}
属性值：
none：元素不浮动（默认）
left：元素向左浮动
right：元素向右浮动
2.浮动特性
1)脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
2）浮动的盒子不在保留原先的位置
3）如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
4）浮动元素具有行内块元素特性，任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性
即：
a、当行内元素添加浮动后，就可以配置宽度和高度（span）
b、如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容长度决定
c、浮动的盒子中间没有缝隙，是紧挨着一起的
注：
1）浮动的元素是相互贴靠在一起（中间不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐显示
3.浮动位置的约束
浮动元素经常和标准流父级搭配使用
为了约束浮动元素的位置，网页布局一般采取的策略是：
1）先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局的第一准则
4.清除浮动
清除浮动的本质：
1）清除浮动元素脱离标准流造成的影响
2)如果父盒子本身右高度，则不需要清除浮动
3）清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响到下面的标准流了
1)清除浮动-额外隔墙法
语法：
clear: 属性值
属性值：
left：不允许左侧有浮动（清除左侧浮动的影响）
right：不允许右侧有浮动（清除右侧浮动的影响）
both：同时清除左右侧浮动的影响
在最后一个浮动元素的后面加个空标签，并添加clear属性
<div style="clear:both">
注：空元素必须是块元素，不能是行内元素
清除浮动的策略是：闭合浮动
2）清除浮动-父级添加overflow
给父级添加overflow属性，将其属性值设置为hidden、auto或scroll
注：
1）overflow是给父级添加的
2）缺点：无法显示溢出的部分
3）清除浮动-：after伪元素法
:after方式是额外标签法的升级版，也是给父元素添加
.clearfix:after {
conten: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /*IE6、7专有 */
*zoom: 1;
}
4）清除浮动-双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix: after {
clear: both;
}
.clearfix {
*zoom: 1;
}
5）清除浮动-总结
为什么需要清除浮动
1)父级没有高度
2）子盒子浮动了
3）影响下面的布局，我们就应该清除浮动
三、ps切图
1.常见图片个数
1)jpg格式：JPEG（jpg）对色彩的信息保留较好，高清、颜色较多，产品类的图片经常用jpg格式
2）gif格式：GIF格式最多只能存储256色，所以通常用来显示简单图形及字体，但可以保存透明背景和动画效果，常用于图片小动画效果
3）png格式：结合jpg和gif的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选择png格式
4）psd格式：Photoshop专用格式，可以存放图层、通道、遮罩等
2.图层切图
3.切片切图
4.插件切图
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行书城，以替代传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程
网址：http://www.cutterman.cn/zh/cutterman/
