008 HTML+CSS(Class062 - 077)
[A] 标签分类
按照类型划分：
1. block：div，p，ul，ol，hi......
【特点】：1. 独占一行
2. 支持所有样式
3. 不写宽的时候，宽度跟父元素相同
4. 所有区域为一个矩形
2. inline：span，a，em，strong，img......
【特点】：1. 不独占一行，从左向右排列
2. 有些样式不支持，如width，hieght，margin，padding......
3. 不写宽的时候，宽度由内容决定
4. 所占区域不一定为矩形(由内容决定)
5. 内联标签之间由空隙，原因：由换行引起的，若两个标签之间没有换行，则不会有空隙。
3. inline-block：input，select...... 这些和表单元素相关
【特点】：同时兼有 块 和 内联 的特点
【注】布局一般用块，修i是文本一般用内联。
按照内容划分：
内容查看：https://html.spec.whatwg.org/multipage/dom.html
按显示划分：
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容，如img，input,.......
非替换元素：将内容直接告诉浏览器，将其显示出来, 如 div，span，hi,........
[B] display显示框类型：
【注】display属性用于实现标签的 块，内联，内联块的变换
可选值： block 将元素转换为块进行显示
inline 将元素转换为内联进行显示
inline-block 将元素转换为内联块进行显示
none 将元素隐藏
【注】display：none 与 visibility：hidden的区别
display：none 彻底隐藏，跟删除一样，既看不到也不占内存
visibility：hidden 仅仅是看不到，跟变得无色一样，但实际上存在，也占内存
[C] 标签的嵌套规范
1. 组合使用的标签
ul，li
ol，li
dl，dt，dd
table，tr，td
2. 块能够嵌套内联
3. 块不一定能嵌套块
错误写法，如：<p>
<div></div>
</p>
4. 内联不能嵌套块
唯一特例，a标签可以嵌套块，使得某一个区域成为链接。
[D] overflow溢出操作
在标签被设置宽和高时，其内部填充的内容可能溢出标签，此时用 overflow 属性可用于设置溢出内容的显示效果
可选值： overflow：visible 依然可见，自动溢出盒子
overflow：hidden 不再可见，溢出部分自动隐藏
overflow：scroll 右侧出现滚动条，滑动可查看
overflow：auto 自动适应内容，不溢出时无反应，溢出时出现滚动条
overflow-x 和 overflow-y 分别针对 x 轴 和 y 轴进行操作
[E] 透明度与手势
opacity属性用于定义标签的透明度
可选值：opacity：0(透明) ~ 1(不透明)
【注】占用空间 和内存，所有其子标签也会变透明
解决办法：用rgba方式设置背景颜色，如 rgba(255, 0, 0, 0.5)，在设置背景颜色的同时设置透明度，该透明度不会继承给子元素
cursor属性用于定义手势
可选值：default 默认值，为箭头
pointer 手指
......
自定义手势：
cursor: url(图片地址) .auto; 注图片必须为 .cur .ico 格式
[F] 最大最小宽度和高度
min-width：200px 标签的最小宽度为200px，当内容未溢出时，宽度为200px，当内容溢出时，标签自动撑大
max-width：200px 标签的最大宽度为200px，当内容未溢出时，标签根据内容自适应，当内容达到200px时，宽度不在撑大
类似的还有 min-width, max-height
[G] CSS 默认样式
CSS中有些标签有默认样式，有些没有
没有默认标签的：div，span
有默认标签的：
body -> margin: 8px
h1 -> margin: 上下 21.440px
p -> margin: 上下 16px
ul -> margin: 上下 16px padding：左 16px
。。。。。可在页面进行查看，不在赘述
[H] CSS 重置样式
CSS中，绝大部分标签有默认的样式，这些样式不一定是我们需要的，此时我们需要修改默认样式
1. 通配符方法修改所有标签的样式
*{margin:0, padding: 0,.......}
优点：不用考虑哪些标签有默认的margin，padding等属性
缺点：稍微有点影响性能，若不嫌麻烦，可单独设置如下：
body，p，h1，ul{......}
2. 修改列表显示方式
ul{ list-style: none;} 默认列表前面有实现原点，可以通过此设置消除
3. 修改链接显示方式
a{text-decoration: none; color: blue} 默认链接有下划线，可以通过此设置消除下环线，或者修改显示方式
4. 修改图片显示方式
图片放在容器中会有一个问题，即图片底部跟容器有一定的间隙，这是因为图片默认是一个内联，内联元素的对齐方式时按照文字基线对齐的，而不是文字的底线对齐
两种方式解决：
1. 将图片修改为块 img{ display: block}
2. 将托片对齐方式改为基线对齐 img{ vertical-align: bottom} 默认为：vertical-align: baseline
[I] PS切图 class72 - 77
组成：菜单项，工具栏，辅助面板
下载：
https://pan.baidu.com/share/init?surl=LVa5R_btSjczLBwskCZidQ 提取码：sc3v
快捷键：
ctrl + r ：显示和隐藏标尺
在标尺上可以拉去辅助线
alt + 滚轮：放大缩小视图
图片格式：
jpg(jpeg) 适合做色彩丰富的图片
PNG 适合做透明图，一部分是透明的，一部分不透明
gif 适合做动图
注：psd是设计稿的原始文件
