博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
2013/2/20CSS属性学习
阅读量:5742 次
发布时间:2019-06-18

本文共 1648 字,大约阅读时间需要 5 分钟。

hot3.png

示例: .content{ font-size:14px; color:#000000; line-height:28px;/设置行高/ font-weight:bold;/设置文字的粗体样式/ text-indent:24px;/* 文字的首行缩进*/ background-color:#867D6A; width:380px; vertical-align:top;/内容的垂直对齐方式/ text-align:left;/内容的水平对齐方式/ padding:10px; margin-top:110px; margin-left:60px; border:6px double #EDEDED;}

详解: 1 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的,同时也受字号的影响

line-height属性的具体定义:    1). 语法:line-height:normal|
<实数>
|
<长度>
|
<百分比>
|inherit 2).说明:设置元素中行的高度 3).值:normal:默认行高,一般为1到1.2; 实数:实数值,缩放因子; 长度:合法的长度值,可为负数; 百分比:百分比取值基于元素的字体尺寸 4).初始值:normal 5).继承性:继承 6).适用于:所有元素 7).媒体:视觉 8).计算值:长度和百分比为绝对值;其他同指定值。 **行高指的是文本本行的基线间距离。而基线(Base line),指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x色下端沿,同时还要文字的顶线(Top line),中线(Middle line)和底线(Bottom line),用以确定文字行的位置。 行高与字体尺寸的差称为行距** 详情见:http://www.tonjay.com/line-height.html

2 font-weight: 指定字体显示的浓淡程度。 属性值:normal(正常)或bold(加粗)。有些浏览器甚至支持采用100到900之间地热数字(以百位单位)来衡量字体的浓淡

3 text-indent:表示首行缩进

注意:text-indent不能用于display:inline-block的元素,可以用于display:block.           text-indent不能用于表单

4 vertical-align:

属性值有:baseline , sub , supper , top , text-top , bottom , text-bottom , middle以及各种长度值(%,em,ex等等)    按照W3C的定义,当内联元素的vertical-align设置为:        baseline,top,bottom时都是该元素的baseline(或middle,top,bottom)对其周围元素的相同位置,如图片的top和周围文字的top对齐        text-top和text-bottom的时候,是该元素的top(或bottom)对齐周围元素的text-top(或text-bottom)        middle的时候,是该元素的中心对齐周围元素的中心。这里“中心”的定义是:图片当然就是height的一半的位置,而文字应该是基于baseline往上移动0.5ex,亦即 小写字母“x”的正中心 。但是很多浏览器往往把ex这个单位定义为0.5em,以至于其实不一定是x的正中心(以上图为例,x的高度应该是10px,而em是18px,所以两个值不一样)。

转载于:https://my.oschina.net/syc2013/blog/109432

你可能感兴趣的文章
AutoCAD2010/2012去掉搜索框
查看>>
项目规模估算失准 软件开发成空中楼阁(转载)
查看>>
SQL 多个表之间联合查询
查看>>
Html Agility Pack基础类介绍及运用
查看>>
Sereja and Suffixes(思维)
查看>>
cassandra ABC
查看>>
将现有的sql脚本导入 Oracle 数据库,中文乱码问题
查看>>
WebSocket 和 Socket 的区别
查看>>
LTTNG 使用
查看>>
web.py使用要点
查看>>
js操作DOM在父元素中的结尾添加子节点注意
查看>>
JVM调优总结 -Xms -Xmx -Xmn -Xss
查看>>
WPS Word表格转成文字或文字制成表格的快捷方法
查看>>
「科普」几十部以程序员为主角的影片
查看>>
日上防盗门:消费者买门一定要注意5个问题
查看>>
家长必读:不想逼孩子跳楼,应该这样做
查看>>
如何保障微服务架构下的数据一致性?
查看>>
双十一京东战报详解:小米仅存硕果三颗 对阵荣耀全系列产品
查看>>
助社区跨越文化障碍 华裔心理学家获澳大利亚日表彰
查看>>
住建部:对存在配套幼儿园缓建等问题住宅小区追责
查看>>