由css属性：vertial-align想到的。。

我的笔记本：型号

acer4750G-2412g50mnkk

分辨率：1333*768，点距：0.25933mm;

12px下的font-size：

　　默认line-height减去font-size:为3px；（上:下=2:1）

　　浏览器版本：chrome31.0.1650.57

　　浏览器宽度减小，div中文字分两行，

　　行间的文字间实际高度是0.25933mm*3即0.77799mm，也就是行间距.

text-align：text-top指的是本inline-box的top与父元素中的font-size的text-top对齐。下面是几条线

--top

--text-top

--

--middle

--baseline

--text-bottom

--bottom

 

一些忘了的概念:

DPI or PPI:

DPI 全称是Dots Per Inch，点每英寸，PPI全称是Pixel Per Inch。他们是解析度(Resolution)的单位。也就是说，1inch的长度上能安排多少个点(像素)。举个例子，一般的，我们的显示器大概是 72ppi，也就是1英寸的长度上，有72个点(像素)。dpi/ppi越高，解析度就越高，也就是说，颗粒越小，图像越细腻。一般来说，照片的解析度在 240dpi～300dpi之间，所以为什么照片看起来，要比屏幕上看起来要细致得多。杂志印刷用133或150dpi，高品质书籍采用350－400dpi，因为大多数印刷精美的书籍印刷时用175到200dpi。所以为什么同样物理大小的文字，在书上看，要比在屏幕上看要清晰得多。也就是我们前面提到的，英文书籍印刷，为什么可以大胆得使用Sans-serif字体。

dpi和ppi之间实质上没有差别。实在要找出差别，那么唯一的差别也许在于dpi常常用于描述扫描仪和打印机，而ppi常常描述屏幕的分辨率。

ex、x-height:
常在CSS中使用。1ex = 小写字母x的高度。

text-align：

fuck：查了好久资料 想去实现text-align：justify却总是失败。

原来当设置了text-align为justify后还得去设置text-justify的属性才会有效果。。要注意当inline-box模型为最后一个linebox时是不会有效果的。。最好用伪类after填充下。。

。。。原来只有在ie下才需要上边那么做。

终于实现了。费了我3个小时。我之前是这么写的：

 1 <div class="test1">
 2 我的测试
 4 
 5 <span style='display:inline-block; width:100%; height:0; overflow:hidden;'> </span>
 6 </div>
 7 
 8 
 9 .test1{
10 padding: 5px;
11 border:2px solid blue;
12 width: 500px;
13 text-align: justify;
14 }
15 
16 .test1:before{
17 content:" ";
18 display: inline-block;
19 width:100%;
20 border-top: purple dashed 1px;
21 
22 }
23 .test1:after{
24 content:" ";
25 display: inline-block;
26 width:100%;
27 border-top: purple dashed 1px;
28 
29 }
30 
31 </style>

这样由于连着的汉字被当做一个词处理了。所以不会两端对齐

只要把中间加个空格或者回车就好啦。  

我 的 测 试

3个多小时的时间，就他妈因为1个空格啊。尼玛、、当个菜鸟容易不！

别人的demo都能自动对齐，我写的怎么不能呢？难道是上天对我的惩罚？

感想或者经验：

　　文字也好（中文，英文）图片也好。span标签也好。最终生成的都是inline-box模型、当inlinebox模型的宽度堆积(不限于个数)到一定的程度时（应该换行了），这时候排版引擎会按照css中的属性text-align去选择是怎样的怎样去对齐本行中所有的元素。最后一行除外,因为必须按左对齐（除非设置rtl，右对齐，也就是text-direction）,解决方法太多了。汉字中间没有空格的话就按照一个长的英文单词处理。。我就是栽在这上边了。

 

 

 

转载于:https://www.cnblogs.com/Yeah-come-on/p/3421630.html