CSS实现自适应分屏的N种方法

时间：2023-04-05 18:15:23 HTML5

分屏是网页中比较常见的一种设计。父级的数量和宽度是自适应的。偷偷看了看知乎的实现。它显然被白色背景覆盖。添加一点背景将揭示真相。我心想：知乎的前端不好吗？也许其他人的关注点不在这些。下面列举几个比较好的实现方法，先不露馅1.伪元素+transform:translateX(-100%);主要原理是设置文本居中text-align:center;，然后给定两个伪元素，分别是绝对定位的，那么伪元素这时候也是水平居中，设置足够的宽度，然后把左边的向左移动100%。请记住，父级是隐藏的。具体实现如下。html结构为我是分割线

，css样式为.title{position:relative;文本对齐：居中；溢出：隐藏；字体大小：14px；颜色：#999;}.title::before,.title::after{内容：'';显示：内联块；宽度：100%；高度：1px；位置：绝对；背景：#ccc；顶部：50%；}.title::before{margin-left:-10px;transform:translateX(-100%);}.title::after{margin-left:10px;}CSSdivider(伪元素+transform)2.伪元素+flex这个比较好理解，设置display:flex,然后两个伪元素填充剩余的空间。具体实现如下。html结构为我是分割线

，css样式为.title{display:flex;对齐项目：居中；字体大小：14px；颜色：#999;}.title::before,.title::after{内容：'';弹性：1；高度：1px；background:#ccc;}.title::before{margin-right:10px;}.title::after{margin-left:10px;}CSSdivider（伪元素+flex）3.伪元素+box-shadow/outline+clip-path也使用text-align:center将文字和伪元素居中，然后生成足够大的box-shadow或outline，由于不支持单一方向，所以使用clip-path或clip来剪掉它。具体实现如下。html结构为我是分界线

，css样式为.title{text-align:center;字体大小：14px；颜色：#999；溢出：隐藏；}.title::before,.title::after{内容：'';显示：内联块；宽度：0；高度：1px；框阴影：0009999px#ccc；vertical-align:middle;}.title::before{margin-right:10px;剪辑路径：多边形（00，-9999px0，-9999px100%，0100%）；}.title::after{margin-left:10px;剪辑路径：多边形（00,9999px0,9999px100%,0100%);}CSSdivider(伪元素+box-shadow/outline+clip-path)4.伪元素+right:100%这个实现需要多一层标签，外面还是text-align：center,andtheinside在文本中添加两个伪元素进行绝对定位，其中左边设置为距离右边100%（相对于文本标签），实现如下html结构：我是分割线