一、盒子模型

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属性


注：空元素必须是块元素，不能是行内元素
清除浮动的策略是：闭合浮动

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/