我的笔记本:型号

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个小时。我之前是这么写的:

 <div class="test1">
我的测试 <span style='display:inline-block; width:100%; height:0; overflow:hidden;'> </span>
</div> .test1{
padding: 5px;
border:2px solid blue;
width: 500px;
text-align: justify;
} .test1:before{
content:" ";
display: inline-block;
width:100%;
border-top: purple dashed 1px; }
.test1:after{
content:" ";
display: inline-block;
width:100%;
border-top: purple dashed 1px; } </style>

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

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

我 的 测 试

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

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

感想或者经验:

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

由css属性:vertial-align想到的。。的更多相关文章

  1. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  2. HTML CSS 属性大全

    CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...

  3. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  4. 换行的css属性

    //正常换行  word-break:keep-all;word-wrap:normal; //下面这行是自动换行  word-break:break-all;word-wrap:break-word ...

  5. jquery css属性练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. animate支持的css属性

    支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...

  7. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

  8. CSS中浏览器开发商特定的CSS属性

    浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...

  9. css学习(2)-- 常见的CSS属性和值

    1.CSS中修饰字体的属性 属    性 描    述 属  性  值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...

随机推荐

  1. IOS 'NSInternalInconsistencyException', reason: 'Invalid parameter not satisfying: URLString'

    转载自:http://i.cnblogs.com/EditPosts.aspx?postid=4012011 今天想写一个请求的天气,好的,废话不多说,先贴代码: 使用AFNetWorking 发送g ...

  2. PowerShell优化和性能测试

    measure-command -expression {$null = "abc"}  效率高于 {"abc" |out-null } foreach {$p ...

  3. Android动态加载技术初探

    一.前言: 现在,已经有实力强大的公司用这个技术开发应用了,比如淘宝,大众点评,百度地图等,之所以采用这个技术,实际上,就是方便更新功能,当然,前提是新旧功能的接口一致,不然会报Not Found等错 ...

  4. python实现的基于TCP的JSON数据通信

    用Python写的一个多线程TCP通信实例,实现了JSON数据的传输. 闲言少述,直接上代码 ​ 一.client #!/usr/bin/env python # -*- coding:utf-8 - ...

  5. cocos2dx js文件加密为jsc文件

    发布产品,脚本代码是必须要加密的 偶尔会出现编译后的jsc无法运行,或者某些jsb自定义的函数找不到, 最好将require("jsb.js")的全部内容整合到一个文件,然后编译j ...

  6. [置顶] Android开发之serviceManager分析

    Android 开发之serviceManager分析 在Android系统中用到最多的通信机制就是Binder,Binder主要由Client.Server.ServiceManager和Binde ...

  7. java_一对一自由聊天

    客户端 package cn.qianfeng.kaoti03; import java.io.BufferedReader; import java.io.IOException; import j ...

  8. ModelSim之命令行仿真入门

    下面是我们的Tcl仿真步骤:启动ModelSim SE, 首先看到在在ModelSim SE右边的窗口有ModelSim> 这样的提示符.在提示符后,顺序运行以下命令:    vlib work ...

  9. tomcat7.0 的配置

    一.安装JDK 1.7 1.添加环境变量:在 我的电脑->属性->高级->环境变量 2.新建系统变量,变量名:JAVA_HOME 变量值:C:\Program Files\Java\ ...

  10. 关于MySQL中使用LOAD DATA INFILE导入csv文件时的日期格式问题

    在使用MySQL时,常常会用到Load Data Infile来导入数据,在遇到Date类型的列时,有时会遇到格式转换的问题: 首先创建一张简单的people表,包含名字,生日,年龄三个字段: mys ...