美文网首页
css新手向的知识点<二>

css新手向的知识点<二>

作者: Nelson_sylar | 来源:发表于2018-11-12 15:14 被阅读0次

如何实现如下所示文字的对齐

  • &nbsp;隔开是不行的,因为&nbsp;由字体设计者决定,换字体会有区别.
  • 可用text-align:justify方法,但是要注意该方法要多行才能实现左右对齐,所以我们要凑成多行
    的形式.于是想到了用伪元素来凑成多行
  • 我们让伪元素设为inline-block后才能设置width:100%
  • 为了隐藏伪元素的内容,我们要设置span的高度,并且设置overflow:hidden,这样就看不到伪元素内容了.

如何写一个宽高1:1的div

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        div{
          padding-top:100%;
          border:1px solid red;
        }
      </style>
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

相关文章

网友评论

      本文标题:css新手向的知识点<二>

      本文链接:https://www.haomeiwen.com/subject/fmpqfqtx.html