版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、line-height行高属性的使用技巧CSS中的line-hight属性是用来控制文本行之间的空隙的。它一般情况下没有单位的设定(如:line-height:1.4;)所以这是一个按字体尺寸的比例来计算。这对印刷版来说是一个很重要的属性。线条过低就会挤在一起,线条过高就会相距甚远,这两种情况都会降低可读性。不过你可能已经知道了这一点。本文中,我们将把注意力放在一些设计上。如果你知道(或可以计算出)的line-height的精确值,你可以做一些奇妙的东西!每行文本设置不同颜色很遗憾这里没有:nth-line(),我们直接使用<span>是不可靠的,因为会有很多不同的事情导致文本在不
2、同的地方被打乱。尽管是非标准的,但这里还有一种用法就是使用一个元素的背景作为文字的背景。C/C+ Code.text -webkit-background-clip: text;-webkit-text-fill-color: transparent;而这里还有另一个绝招,你可以用linear-gradient()来让颜色排列在一起就不会褪变成另一个颜色。它只是会突然的结束然后开始另一个。比方说我们知道line-height是22px,我们可以制作一个像这样的阶梯色。CSS Code.text background-image: linear-gradient(to bottombottom,
3、#9588DD,#9588DD 22px,#DD88C8 22px,#DD88C8 44px,#D3DD88 44px,#D3DD88 66px,#88B0DD 66px,#88B0DD);结合着两种技巧在不支持文本背景剪裁的浏览器里,比如Firefox,你会得到一个文本后面的实心背景颜色块。也许这很酷你会喜欢它。但也可能你只是想要得到那样的文本颜色。在这种情况下,你可以使用support去单独的支持它。此外,当你需要在各处使用line-height,把他设置成变量或许会更好。我将在这里使用SCSS,或许有一天在CSS中也可以使用变量。所以改变之后,他依旧被渲染,看起来它一直保持工作。CSS
4、Code$lh: 1.4em;body font-size: 1em;line-height: $lh;supports (-webkit-background-clip: text) p -webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(to bottombottom,#9588DD,#9588DD $lh,#DD88C8 $lh,#DD88C8 $lh*2,#D3DD88 $lh*2,#D3DD88 $lh*3,#88B0DD $lh*3,
5、#88B0DD);在元素的顶部使用这种方式是最容易的。下面是一个例子,重点是前几行被改变。CSS Code.text -webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(to bottombottom,rgba(white, 0.8),rgba(white, 0.8) $lh,rgba(white, 0.6) $lh,rgba(white, 0.6) $lh*2,rgba(white, 0.4) $lh*2,rgba(white, 0.4) $l
6、h*3,rgba(white, 0.2) $lh*3,rgba(white, 0.2);如果我们试图在任意数量的文本上对最后几行进行定位,这将变得更加困难。在这种情况下,我们需要让第一个颜色带从顶部开始向下渐变。幸运的是我们可以用calc()做到这一点。CSS Code.text -webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(to bottombottom,rgba(white, 0.8),rgba(white, 0.8) calc(100
7、% - 66px),rgba(white, 0.6) calc(100% - 66px),rgba(white, 0.6) calc(100% - 44px),rgba(white, 0.4) calc(100% - 44px),rgba(white, 0.4) calc(100% - 22px),rgba(white, 0.2) calc(100% - 22px),rgba(white, 0.2);background-position: bottombottom center;还有其他方法也可以做到这样的效果,比如覆盖伪元素梯度(用pointer-events:none;所以它并不恼人)。
8、文字之间的行线使用一个和我们上面使用的相类似的solid-color-stops的技术,我们可以建立一个1px的线在已知的line-height上重复。最简单的方法是使用repeating-linear-gradient()来确保其他元素可以正常使用(比如说padding也是基于line-height的)。CSS Code.parent padding: $lh*2;background: #082838;background-image: repeating-linear-gradient(to bottombottom,rgba(white, 0) 0,rgba(white, 0) $lh
9、/1em*16px-1,rgba(white, 0.1) $lh/1em*16px-1,rgba(white, 0.1) $lh/1em*16px);为了得到用1px的线,我们需要知道line-height的像素值是多少,然后用这个值在减去1px。我们的目标是正好在line-height的高度上进行梯度的重复,来让这个空间的最后一个像素是一条线。因为我们已经不是body字体大小的1em,而是16px了。而且line-height的设置用的是em的单位。所以我们可以通过1em划分要删除的单元,然后复制成16px并在需要的时候减1.每一行图片的位置如果你知道精确地line-height,你还可以做
10、的另一家事情是用background-size在纵轴上去匹配它。然后你把他垂直重复,他将会在每一行有一个图片的队列。CSS Code.textbackground-image: url(image.svg);background-size: $lh $lh;background-repeat: repeat-y;padding-left: $lh*2;line-height 属性的继承问题曾出现这样一个问题:CSS Code<style type="text/css">p line-height:17px;</style><div class=
11、"mdse-detail"><p><strong style="font-size:30px">品牌:XZX<br />市场价:145元<br />颜色:黑色<br />面料:棉<br />尺码:S M L<br />衣长:S 89 M 90 L 91<br />肩宽:S 35 M 36 L 37<br />胸围:S 88 M 92 L 96<br />下摆:S 104 M 108 L 112<br />袖长:S 17
12、 M 17.5 L18<br />由于测量方法不同,误差在2CM左右!</strong></p></div>你会发现上面例子的文字会重叠在一起!这是什么原因呢?由于.detail-content 中的 p 元素继承了默认设置的全局样式 line-height:17px,而自定义区块又是由商家自定义,其内字体被设置为了 font-size:30px;(可能为任意值),根据 Inline formatting model,得知该文字的 line-box 高为 17px,多出的字体部分上下溢出,所以会出现字体重叠的现象。那这个问题如何解决呢?解决方案:我们给 .mdse-detail 下的 p 元素设定样式属性 line-height:1.4。为什么解决方案里的 1.4 不带单位?元素的 line-height 属性值会继承父元素(或祖先元素)的 line-height 属性值,如果属性值有单位,则继承的值是换算后具体的 px 值而非原始的值(比如:em、%),而如果属性值没有单位,则浏览器会继承数值(无单位),然后根据该元素的 font-
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 房产投资期权合同(2篇)
- 2024年粉末冶金自润滑材料合作协议书
- 2024年辐射自动观测仪项目建议书
- 2024年中枢兴奋药项目建议书
- 2024年淡水捕捞产品项目合作计划书
- 2024年皮革化学品:浸水助剂项目建议书
- 汽车销售居间服务合同
- 2024版个人门面房出租合同
- 2024版服装订购合同范本-0
- 2024版合同管理机构
- (正式版)SHT 3551-2024 石油化工仪表工程施工及验收规范
- 企业新型学徒制试点班管理及学徒考核办法
- 四种客户类型老鹰型孔雀型鸽子型猫头鹰型-清晰归纳版讲解学习
- 材料3:国家级企业技术中心申报材料撰写要求解读
- 释放孔施工方案
- 工业设备维修报价单模板1页
- 高中生物教学仪器配备目录
- 临床试验生物样本转运的标准操作规程
- 一年级10以内加减法口算题(100道题_可直接打印)-10以内加减口算题
- 单壳油船油样品取样送检程序规定
- 福建省厦门市同安区三校七年级地理上学期期中联考试题新人教版
评论
0/150
提交评论