由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个小时。我之前是这么写的:
<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想到的。。的更多相关文章
- IE7浏览器下CSS属性选择器二三事
一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...
- HTML CSS 属性大全
CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- 换行的css属性
//正常换行 word-break:keep-all;word-wrap:normal; //下面这行是自动换行 word-break:break-all;word-wrap:break-word ...
- jquery css属性练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- animate支持的css属性
支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...
- css属性的选择对动画性能的影响
现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...
- CSS中浏览器开发商特定的CSS属性
浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...
- css学习(2)-- 常见的CSS属性和值
1.CSS中修饰字体的属性 属 性 描 述 属 性 值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...
随机推荐
- IOS 'NSInternalInconsistencyException', reason: 'Invalid parameter not satisfying: URLString'
转载自:http://i.cnblogs.com/EditPosts.aspx?postid=4012011 今天想写一个请求的天气,好的,废话不多说,先贴代码: 使用AFNetWorking 发送g ...
- PowerShell优化和性能测试
measure-command -expression {$null = "abc"} 效率高于 {"abc" |out-null } foreach {$p ...
- Android动态加载技术初探
一.前言: 现在,已经有实力强大的公司用这个技术开发应用了,比如淘宝,大众点评,百度地图等,之所以采用这个技术,实际上,就是方便更新功能,当然,前提是新旧功能的接口一致,不然会报Not Found等错 ...
- python实现的基于TCP的JSON数据通信
用Python写的一个多线程TCP通信实例,实现了JSON数据的传输. 闲言少述,直接上代码 一.client #!/usr/bin/env python # -*- coding:utf-8 - ...
- cocos2dx js文件加密为jsc文件
发布产品,脚本代码是必须要加密的 偶尔会出现编译后的jsc无法运行,或者某些jsb自定义的函数找不到, 最好将require("jsb.js")的全部内容整合到一个文件,然后编译j ...
- [置顶] Android开发之serviceManager分析
Android 开发之serviceManager分析 在Android系统中用到最多的通信机制就是Binder,Binder主要由Client.Server.ServiceManager和Binde ...
- java_一对一自由聊天
客户端 package cn.qianfeng.kaoti03; import java.io.BufferedReader; import java.io.IOException; import j ...
- ModelSim之命令行仿真入门
下面是我们的Tcl仿真步骤:启动ModelSim SE, 首先看到在在ModelSim SE右边的窗口有ModelSim> 这样的提示符.在提示符后,顺序运行以下命令: vlib work ...
- tomcat7.0 的配置
一.安装JDK 1.7 1.添加环境变量:在 我的电脑->属性->高级->环境变量 2.新建系统变量,变量名:JAVA_HOME 变量值:C:\Program Files\Java\ ...
- 关于MySQL中使用LOAD DATA INFILE导入csv文件时的日期格式问题
在使用MySQL时,常常会用到Load Data Infile来导入数据,在遇到Date类型的列时,有时会遇到格式转换的问题: 首先创建一张简单的people表,包含名字,生日,年龄三个字段: mys ...