5.11心得
1、在PS里选中文字的时候怎么查看文字的高度
a.使用PS自带的标尺，快捷键Ctrrl+R,将鼠标移动到标尺上方，往下拖拽
b.PS较高的版本，在移动的时候都会出现移动距离显示。选择”矩形选框“工具框选文字，然后移动选框就可以显示文字大小了。用快捷键F8转换，出现一个对换框，然后用工具栏（编辑面版左边一坚栏）点击矩形选框工具，就可以看到字的大小了
2、行高怎么计算
顶线、中线、基线、底线
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
span
{
padding:0px;
line-height:1.5;
}
</style>
</head>
<body>
<div class="test">
<div style="background-color:#ccc;">
<span style="font-size:3em;background-color:#999;">中文English</span>
<span style="font-size:3em;background-color:#999;">English中文</span>
</div>
</div>
</body>
<html>
行高、行距与半行距
行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。
行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2
内容区、行内框、行框
内容区：底线和顶线包裹的区域
行内框，每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）
行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。
<div style="background-color:#ccc;">
<span style="font-size:1em;background-color:#666;">中文English</span>
<span style="font-size:3em;background-color:#999;">中文English</span>
<span style="font-size:3em;background-color:#999;">English中文</span>
<span style="font-size:1em;background-color:#666;">English中文</span>
</div>
line-height
基本概念搞明白了我们就可以说说本文的主角line-height属性了。
定义：line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
可能的值
值 说明
normal 默认,设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。
貌似很简单，但感觉没什么用出的样子，那就让我们看看line-height的几个应用
div文字垂直居中
div居中对齐一直是个难题，水平还好解决些，margin：0 auto; 可以解决现代浏览器，IE下text-align:center。但垂直居中就没那么简单了，默认是这样子的。
<div style="width:150px;height:100px;background-color:#ccc;">
<span>This is a test.<br/>
This is a test.
</span>
</div>元素对行高影响
行框高度是行内最高的行内框高度，通过line-height调整，内容区行高与字体尺寸有关，padding不对行高造成影响。
行高的继承
行高是可继承的，但并不是简单的copy父元素行高，继承的是计算得来的值。
非但没有变成150%，反而连100%都没有，重叠了！这就是继承计算的结果，如果父元素的line-height有单位（px、%）,那么继承的值则是换算后的一个具体的px级别的值；上例p得到的是10px*150%=15px的行高，而P的字体大小为30px，所以发生了重叠。
而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。
3、标签嵌套（span、p、div可以嵌套什么）
1.块级元素（block）与内联元素（inline）的区别：
简单地说，块级元素用来搭建网站架构、布局、承载内容，负责整体的大的方面。块级元素总是会另起一行开始，其高度、行高和边距都是可控的。内联元素负责局部和细节，在同一行显示，其高度、行高和边距不可控。
通过display：block;或者display:inline两者可以相互转化。
至于可变元素是可以根据上下文语境决定是块级元素还是内联元素，好吧，它最灵活了=。=
2.分类明细:(照搬来的）
块元素(block element) HTML标签分类明细
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单 （只能用来容纳其它块元素）
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element) 一般都是基于语义级(semantic)的基本元素，只能容纳文本或者其它内联元素。
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素是基于以上两者随环境而变化的，它的基本概念就是根据上下文关系确定该元素是块元素还是内联元素。一旦确定了它的类别，它就遵循块元素或者内联元素的规则限制。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
3.块级元素和内联元素的嵌套规则：
最基本：内联不能嵌套块级，块级可以嵌套内联元素
<div><h1></h1><p></p></div> 正确（块级并列）
<a href="#"><span></span></a> 正确（内联嵌套内联）
<span><div></div></span> 错误（内联嵌套块级）
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div，就是我犯的错误。
<p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错
特殊的<li>里面可以嵌套div（<li>可以但<p>不行）
块级元素与块级元素并列、内联元素与内联元素并列
<div><h2></h2><p></p></div> 正确
<div><a href="#"></a><span></span></div> 正确
<div><h2></h2><span></span></div> 错误（块级和内联并列了）
再跳出来看，p标签内嵌div的结果是p标签被div切成两个标签了~估计脑补的过程是这样的：
<p>sample</p><div>inline</div><p></P>
div#div1 p>span em
<div id="div1">
<p><span><em>这个可以</em></span></p>
<div><p><span><em>这个也可</em></span></p></div>
<p><em>这个不可以</em></p>
<p><a href="#"><span><em>这个也不可以</em></span></a></p>
</div>
">" 是子元素选择符
"+"是相邻兄弟选择符
实际上，是不建议这么写选择器的，太复杂而且会占用资源
span标签里面都可以嵌套其他标签的，这个要看你怎么用了，一般span都作为二级标签
例如：
<div>我是<span>初学者</span></div>
一般没什么特殊要求的话，都不在嵌套标签的了！span里面一般不再镶嵌标签，当然你非得镶嵌的话，常见的一些标签比如<a>什么的是可以的。
span里面一般不再镶嵌标签，当然你非得镶嵌的话，常见的一些标签比如<a>什么的是可以的。
