资讯专栏INFORMATION COLUMN

CSS实用技巧二

ChristmasBoy / 3173人阅读

摘要:在上一篇文章中我们知道可以通过属性可以实现首行缩进两个字符。现在我们来讲一下第二个技巧。通过设置来实现针对如果里面是标签的情况下实现更好的优化。为了实现更好的我们就可以应用这个技巧。可以实现元素的居中。

text-indent

在上一篇文章中我们知道可以通过text-indent: 2rem属性可以实现首行缩进两个字符。现在我们来讲一下第二个技巧。
通过设置text-indent: -9999px来实现针对

如果里面是标签的情况下实现更好的SEO优化。在搜索引擎优化中, h1是非常重要的标签。一般情况下,我们会把logo放在

标签中,但是我们知道搜索引擎是无法识别图片的。为了实现更好的SEO我们就可以应用这个技巧。


  
  
  
  
  
    

搜索引擎优化

text-align: center;与margin: 0 auto;的区别

text-align: center; 属性可以实现文字,inline元素,inline-block元素的居中。
margin: 0 auto; 可以实现block元素的居中。
margin: 0 auto;是在父元素中定义, 而text-align: center;是在父元素中定义。

line-height

在理解line-height属性前,我们先来了解一下下面的几个概念。


在css中,每一行文字都可以看成有这四条线存在。当我们觉得我们的文字失控的时候,就要想想这四条线是否符合我们的预期了。
在vertial-align属性中的top,middle,baseline、bottom 这四个属性分别对应的是顶线,中线,基线,底线,而line-height属性则代表两行文字间的基线距离。

取值

如果line-height的单位是百分比的情况下,line-height: (父元素的font-size)* n%
如果单位是em/rem的情况下,line-height: (父元素的font-size)*(em|rem)
如果是无单位的情况下,line-height: (当前元素的font-size)*无单位数字
要注意很重要的一点line-height属性是可以被继承的,并且被继承的

vertial-align

W3C对vertical-align有以下几方面的定义

vertical-align用于定义周围的文字,inline元素, inline-block元素相对于该元素的基线的对齐方式。其中该元素指的是设置了vertical-align属性的元素

vertical-align属性对block元素无效, td, 以及设置了table-cell属性的元素有效

vertical-align属性的取值都是相对于基线的

负值/百分比/关键字
在取百分比的时候其值是: 当前元素所继承的inline-height * 百分比

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115371.html

相关文章

  • CSS3常见技巧):如何用CSS3来实现三角形?

    摘要:站长博客如何使用来画一个三角形经常令人非常感到困惑,其实原理上是宽度相等的边距以度来连接。代码如下实现效果如图 站长博客:https://www.pipipi.net/ 如何使用CSS3来画一个三角形经常令人非常感到困惑,其实原理上是宽度相等的边距以45度来连接。 首先看第一个图showImg(https://segmentfault.com/img/bVbn3xN?w=576&h=3...

    Jonathan Shieber 评论0 收藏0
  • CSS3常见技巧):如何用CSS3来实现三角形?

    摘要:站长博客如何使用来画一个三角形经常令人非常感到困惑,其实原理上是宽度相等的边距以度来连接。代码如下实现效果如图 站长博客:https://www.pipipi.net/ 如何使用CSS3来画一个三角形经常令人非常感到困惑,其实原理上是宽度相等的边距以45度来连接。 首先看第一个图showImg(https://segmentfault.com/img/bVbn3xN?w=576&h=3...

    dantezhao 评论0 收藏0
  • CSS技巧):布局

    摘要:在我们写代码的过程中,可以养成记录一些小技巧的习惯。不到万不得已,尽量少使用或在可控范围内使用。可以在缩小浏览器窗口时等比例缩放。但此时不能加左右的,否则总宽度会超过的宽度。我们为达到目的让同一类和左右排布不同类上下排布。 在我们写CSS代码的过程中,可以养成记录一些小技巧的习惯。 1. 一般特定的元素都有自己默认的样式,但是在我们的整体布局中,可能适得其反。我们可以去掉其默认样式。 ...

    Pink 评论0 收藏0
  • CSS技巧

    摘要:技巧使你的更加专业这是上关于技巧的一篇译文,另外你也可以在本项目看到原文。列举了一些很实用的技巧,比如给空内容的标签添加内容,逗号分隔列表等等。排序算法看源码,把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。 成为专业程序员路上用到的各种优秀资料、神器及框架 成为一名专业程序员的道路上,需要坚持练习、学习与积累,技术方面既要有一定的广度,更要有自己的深度。 Java...

    DangoSky 评论0 收藏0

发表评论

0条评论

ChristmasBoy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<