1. CSS盒模型

四部分组成：由内向外
content -> padding -> border -> margin

content : 内容

width 和 height 组成的区域

padding : 内填充

padding-left : 左边内填充
padding-right
padding-top
padding-bottom

border : 边框

margin : 外边距

margin-left : 左边外边距
margin-right
margin-top
margin-bottom
注：背景是可以填充到padding区域的，文字只会填充到content区域。padding会使盒子变大。
背景不会填充到margin区域的，margin实现两个盒子之间的距离的。

复合写法

padding和margin是一样的：
padding : 50px (上下左右都是一样的值)
padding : 30px 50px ( 上下 , 左右 )
padding : 10px 20px 30px 40px ( 上 右 下 左 )
padding : 10px 20px 30px ( 上 左右 下 )

margin的问题

1. 叠加 : 两个盒子，上下设置margin的时候会出现的问题。叠加方案取两个值的最大值。

高级解决：BFC规范。
常规解决：只给一个盒子加边距。

1. 传递 : 两个盒子嵌套的情况下。当子容器添加margin-top的时候，会让父容器也进行了margin-top的操作。

高级解决：BFC规范。
父容器添加: #box{overflow : hidden}
外层父容器如果有边框，也不会传递
padding来代替margin的操作

2. 块与内联的区别

块

1. 独占一行
2. 支持所有样式
3. 不写width的时候，width会跟父容器的width一样

div 、h1 … h6 、ul li 、p 、dl dt dd

内联

1. 在一行显示
2. 不支持宽高，在margin和padding也有一些问题(支持left right,不支持top bottom)
3. 不写width的时候，width是由内容撑开的，内容有多少，width就有多少。

4. 内联之间有一个小空隙 , 空隙的来历：标签换行产生的。

   span2{margin-left: -5px;} 可解决上述空隙问题
   span 、a、strong、em
   内联：不适合做布局，适合做修饰。
   块：适合做布局的。

   内联的块 :

   img 、input

   3. display属性：显示框类型

   display : block 、 list-item(块)
   display : inline (内联)
   display : inline-block (内联的块)
   span{ display: block;} span便具有了块的属性
   display : none (不显示元素，不占任何空间)
   visibility: hidden(不显示元素，但是占空间)

   4. 默认样式

   有
   body : margin : 8px
   p : margin上下 16px
   ul : margin上下 16px padding左 40px
   点 : list-style-type
   li
   dl : margin上下 16px
   dt :
   dd : margin左 40px
   h1、h3 : font-size 和 font-weight
   a : 下划线 和 颜色
   img : 图片会有空隙
   没有
   div
   span

<!-- *{} 通配在性能上稍微差点 
注：做一个网页之前一定要先去掉标签的默认样式。网上把这种操作，叫做reset.css -->
<style>
  * { margin:0; padding:0;}
  ul,li { list-style: none;}
  h1,h2,h3,h4 { font-size: 100%; font-weight: normal;}
    /*   (去掉h系列的原来样式，字号继承父容器的100%，正常不加粗) */
  a { text-decoration: none; color:#404040;}
  a:hover {color:#f33;}
  img { display:block; }
<style/>

5. 图片的默认空隙

首先图片 display : inline (inline-block)
图片是跟 文字的基线 进行对齐的，基线是小写x的底部位置
怎么解决？

1. img转成块
2. vertical-align(只有inline-block的元素才起作用)

vertical-align: baseline(默认)
top
middle
bottom

6. 扩展样式

overflow : 溢出隐藏
hidden(多出容器外的内容都隐藏，看不到)
scroll（无论内容多少，都会出现下拉框和左右拉框，两个都有）
auto ( 自适应,如果内容多出来的话 ，就出现下拉框或左右拉框，否则不出现，视情况而定)
visible ( 默认 ，多出来容器的内容就显示在容器外面)
overflow-x : 单独针对X轴
overflow-y : 单独针对Y轴 （x，y最好一起用，能够更好的展示效果）

opacity : 透明度
0~1 0透明 1不透明 0.5半透明
注：所有被包含的元素都会被透明操作,且如果父元素中使用了opacity，那么子元素会受其影响

<style>
#box { background:black;color:red;opacity:0.5;} 
/*   box里的背景色，字的颜色都是半透明，如果是0，则为透明，看不到 */
/*  rgba:也可以实现透明。可以只针对字体，或边框，或背景等实现透明，不会影响其他元素。 */
#box { border:5px solid rgba(255,0,0,0.8);} 
/*   只有边框透明处理 */
<style/>

rgba属性某些浏览器还不支持

7. Photoshop基本操作

划分：

1. 菜单栏 (上)

2. 工具栏 (左)

   选框工具
   移动工具
   吸管工具
   文字工具
   抓手工具
   放大镜工具

3. 面板 (右)

   窗口里放着所有的面板
   历史管理
   图层
   信息
   字符
   prtSc键：印屏幕键（截屏）
   利用chrome浏览器得到设计稿：打开控制台，shift + ctrl + p键， 输入 full 就可以了。
   快捷键：
   alt + 滚轮 : 缩放设计图
   空格 : 抓手工具
   选框 + shift : 添加区域
   选框 + alt : 删除区域
   ctrl + r : 显示隐藏标尺，标尺里有辅助线，辅助线帮我们确定一些位置的。
   切图：
   矩形选框工具
   ctrl + c : 复制
   ctrl + n : 新建
   ctrl + v : 粘贴
   保存：存储为web格式
   PSD的切图：要切哪个图，就要先选中哪个图层
   图片的格式：
   1. gif : 颜色少，适合做小图标，动图
   2. jpg : 颜色多，适合做拍照的图片，图片质量也比较大
   3. png : 颜色适中，适合做透明的图片