概览

之前和大家分享的都是js相关的东西, 而网页前端开发, 我们都知道, 是html css js这三大件, 而这三大件也是联系紧密的, 你中有我我中有你, 只是随着业务的增加, 行业的发展, js在其中的位置也越来越重要, 因为前端要处理的逻辑的部分也越来越多了, 业内对我们前端开发的js功力的要求也是越来越高

但无论js逻辑部分是复杂还是简单, 是多还是少, 我们都不可避免地需要调整我们的页面布局, 此时就要涉及到我们的css方面的知识了, 同时个人这么几年的开发经验, 私以为有时候调起样式来比写js代码还要麻烦

这不, 前段时间遇到一个需求, 一个选举投票的小程序, 在个人页面, 姓名身份证号等选项的位置, 左侧是项目的名称, 右侧是那个项目的内容以及一个向右的小箭头, 这个在很多手机端的页面或者是APP经常能看到, 通常情况就是当内容是单行的时候, 靠右, 而有多行的时候则希望内容能够靠左, 也就是换行的时候是从左往右的

方法一: flex布局

第一种方式就是利用目前最常用的也是功能非常强大的布局方式: flex布局, 关于flex布局的有关内容, 有需要的朋友可以查看我的这篇文章聊一聊flex布局, 这里就不过多赘述了, 直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      display: flex;
      justify-content: flex-end;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">测试文字</div>
  </div>
</body>
</html>

这里我们将div.box的display属性设置为flex, 也就是给div.box设置了一个flex上下文, 它作用于div.box的所有直接子类, div.item受到这个flex上下文的影响, 原本默认的块级元素属性发生了变化, 不再占满父元素的宽, 转而变成了内容的宽, 也就是说此时div.item的宽是它的内容测试文字四个字的宽, 再加上父级元素设置的主轴的对齐方式为flex-end也就是右对齐, 那么最终的结果就是元素居右对齐:

这里为了方便查看效果, 因此选择了手机端渲染的页面, 不然不好观察多行的情形, 下面是多行的情形:

上面提到, div.item的宽度由它的内容决定, 当内容过多, 使得div.item的宽撑满父元素, 此时父元素没有多余空间, 主轴的对齐方式也就不起作用了, 以及我们的元素默认的文字 对齐方式是左对齐, 也就是text-align: left;, 此时内容换行自然也就是从左到右了, 因此也就完成了我们的需求

方法二: 行内元素

首先我们先看看代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      text-align: right;
    }
    .item{
      display: inline-block;
      text-align: left;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="item">测试文字</div>
  </div>
</body>
</html>

这里我们需要了解一下text-align的功能, 它是用来定义行内内容(例如文字)如何相对它的块父元素的对齐方式的, 它并不控制块元素自己的对齐, 只控制它的行内内容的对齐方式

从上面的文字中可以得出几个结论:

text-align只能设置在块级元素中
text-align只对块级元素的行内内容有用

了解了text-align的使用方式之后我们来看看上面的html代码, div.box默认是块级元素, 设置了text-align之后将会对它里面的行内内容起作用, 然后我们将div.item的display属性设置为inline-block, 那么此时div.item既有块级元素的特点又有行内元素的特点:

行内元素的特点使得它的宽不会撑满父元素, 会变成内容的宽, 同时还会受到父级元素的text-align影响, 也就是它会在父元素中右对齐

当内容将它撑满了, 占满整个父元素之后, 没有多余的空间了, 父元素的text-align属性失效, 而此时我们的div.item还具有块级元素的特点, 这使得它的text-align属性能生效, 能左右自己的行内内容, 也就是它里面的文字的对齐方式, 因此内容撑满并换行之后是从左到右的, 这也就完成了我们的需求

总结

我个人最终采用的是第一种方式, 也就是flex布局的方式, 因为flex布局更灵活, 通俗点说就是它能根据外部容器的变化而调整自身, 而且提供了多种对齐方式给我们, 清晰易用, text-align由于具有继承的特点, 因此我们需要在变更对齐方式的时候重新设置一下新的对齐方式, 去覆盖父类的相同的属性, 这样写起来就会有些繁琐, 而且还需要设置inline=block属性, 如果外部元素改变了它的display属性, 那么这个方式就可能失效了, 而flex布局它会使得所有直接子类的display属性都变成block, 因此就不会这方面的顾虑了, 可以放心使用

这就是这篇文章的全部内容了, 有任何问题欢迎在评论区探讨, 最后, 如果你觉得这篇文章写得还不错, 别忘了给我点个赞, 如果你觉得对你有帮助, 可以点个收藏, 以备不时之需

参考文献:

text-align

CSS文字排版, 单行靠右, 多行靠左

概览

方法一: flex布局

方法二: 行内元素

总结