CSS实用技巧二

ChristmasBoy 发布于2019-08-30 13:11 / 3089人阅读

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

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 * 百分比

服务器托管混合云 css技巧实用技巧 PHP实用技巧 js实用技巧

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

转载请注明本文地址：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 2019-08-30 15:55 评论0 收藏0
CSS3常见技巧（二）：如何用CSS3来实现三角形？

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

dantezhao 2019-08-02 14:12 评论0 收藏0
CSS3常见技巧（二）：如何用CSS3来实现三角形？

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

zhangqh 2019-08-05 16:09 评论0 收藏0
CSS小技巧（二）：布局

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

Pink 2019-08-30 15:54 评论0 收藏0
CSS技巧

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

DangoSky 2019-08-22 11:15 评论0 收藏0