目录
1. ps切图
1.1 常见的图片格式
1.jpg图像格式：jpeg（jpg）对色彩图像信息保留比较好，高清，颜色较多，产品类的图片常用jpg格式
2.gif图像格式：gif格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际用于一些图片小动画效果。
3.png图像格式是一种新兴的网络图形格式，结合了gif和jpeg的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选择png格式。
4.psd图像格式 PSD格式是photoshop的专用格式，里面可以存放图层，通道，遮罩等多种设计稿，对我们前端人员来说，最大的优点，我们可以直接从上面复制文字，获取图片，还可以测量大小和距离
1.2 图层切图
最简单的切图方式：右击图层->快速导出为PNG
但很多情况下，我们需要合并图层再导出：
1.选中需要的图层：图层菜单->合并图层（ctrl+e）
2.右击->快速导出为PNG
最好的方法 ：沟通（py美工小姐姐）
1.3 切片切图
1.利用切片选中图片
利用切片工具手动划出
2.导出选中的图片
文件菜单->导出->存储为web设备所以格式->选择我们要的图片格式->存储
1.4 插件切图
Cutterman 是一款允许在Photoshop中的插件，能够自动将你需要的图层进行输出，以代替传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程。
1.5 像素大厨
省去ps的烦恼
ps因为各种原因，安装完整版非常麻烦，开发前端测量主要使用蓝符，慕客，像素大厨等等。
2. css属性书写顺序
建议遵循以下顺序
1.布局定位属性：display / position / float /clear / visibility / overflow（建议display第一个写）
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 / background
3.页面布局的整体思路
为了提高网页制作的效率，布局时通常有以下的整体思路:
1.必须确定也没得版心（可视区），我们测量可知。
2.分析页面中的行模块，以及每个行模块中的列模块。其实网页布局第一准则
3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则
4.制作Html结构。我们还要遵循，先有结构，后有样式的原则。结构永远最为重要
5.所以，先理清楚布局结构，再写代码尤为重要，这需要我们多谢多积累。
4. 导航栏注意点：
实际开发中，我们不会直接用链接a，而是用li，包含链接（li+a）的做法。
1. li+a语义更清晰，一看这就是有条理的列表型内容。
2.如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站的排名。
注意：
1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。
2.这个nav导航栏可以不给宽度，将来可以继续添加其余文字
3.因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度。
5.定位
5.1为什么需要定位
某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
以上情况，标准流或者浮动无法快速实现，此时需要定位来实现。
所以：
1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
5.2 定位组成
定位:将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
5.3 定位模式
定位模式决定元素的定位方式，它通过css的position属性来设置，其值可以分为4个
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
5.4 边偏移
边偏移就是定位的盒子移动到最终为止。有top，bottom，left，和right 4个属性
| top | 顶端偏移量，定义元素相对于父元素的上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相当于其父元素右边线的距离 |
5.5 静态定位（static）
静态定位是元素的默认定位方式，无定位的意思
语法：
选择器 { position ： static； }
注意：
- 静态定位按照标准流特性摆放位置，它没有边偏移
- 静态定位在布局时很少用到
5.6 相对定位（relative）（重要）
相对定位是元素在移动位置的时候，是相对于他原来的位置来说的（自恋型）。
语法
选择器 { position ： relative；}
相对定位的特点：
- 他是相对于自己原理的位置来移动（移动位置的时候参照点是自己原来的位置）。
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他。（不脱标，继续保留原来位置）
因此，相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。
5.7 绝对定位 absolute（重要）
绝对定位是元素在移动位置的时候，是相当于它祖先元素来说的(拼爹型)。
语法：
选择器 { position : absolute ; }
绝对定位的特点：（务必记住）
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级有定位的祖先元素为参考点移动位置。
5.8 子绝父相的由来
弄清楚这个口诀，就明白绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了 ，是我们学习定位的口诀，是定位中最常用的一种方式，这句话的意思是：子级是绝对定位的话，父级要用相对定位。
1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
2.父盒子需要加定位限制子盒子在父盒子内显示。
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。
5.9 固定定位 fixed （重要）
固定定位是元素固定于浏览器可视区域的位置。主要使用场景：可以在浏览器页面滚动时元素位置不会改变。
语法：
选择器 { position：fixed；}
固定定位的特点：
1.以浏览器的可是窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动
2.固定定位不在占有原先的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
固定定位小技巧：固定在版心右侧位置
小算法：
1.让固定定位的盒子left：50%。走到浏览器可视区（也可以看做版心）的一半位置。
2.让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置。
就可以让固定定位的盒子贴着版心右侧对齐了。
5.10 粘性定位（sticky）
粘性定位可以被认为是相对定位和固定定位的混合。Sticky粘性的
语法：
选择器 { position ： sticky ； top：10px}
粘性定位的特点：
1.浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位的特点）
3. 必须添加top，left，right，bottom其中一个才有效。
4.跟页面滚动搭配使用。兼容交叉，ie不支持。
5.11 定位的总结
| 定位模式 | 时候脱标 | 移动位置 | 时候常用 |
| static静态定位 | 否（占有位置） | 不能使用边偏移 | 很少 |
| relative相对定位 | 否（占有位置） | 相对于自身位置移动 | 常用 |
| absolute绝对定位 | 是（不占有位置） | 带有定位的父级 | 常用 |
| fixed固定定位 | 是（不占有位置） | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否（占有位置） | 浏览器可视区 | 当前阶段少 |
5.12 定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）
语法：
选择器 { z-index：1；}
- 数值可以使正整数，负整数或0，默认是auto，数值越大，盒子越靠上。
- 如果属性相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子采用z-index属性。
5.13 定位的扩展
1.绝对定位的盒子居中
加了绝对定位的盒子不能通过margin：0 auto来实现水平居中，但是可以通过一下计算机方法实现水平和垂直居中。
1.left：50%；让盒子的左侧移动到父级元素的水平中心位置。
2.margin-left：-100px；让盒子向左移动自身宽度的一半
2.定位的特殊性
绝对定位和固定定位也和浮动类似
1.行内元素添加或者固定定位，可以直接设置高度和宽度
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小事内容的大小。
3.脱标的盒子不会触发外边距塌陷
浮动元素，绝对定位（固定定位）元素都不会触发外边距合并的问题
4.绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面的标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位）会压住下面标准流所以内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。
1576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
