CSS实现自适应分屏的N种方法
时间：2023-03-12 10:35:54
科技观察
分屏是网页中比较常见的一种设计。父级的数量和宽度是自适应的。偷偷看了看知乎的实现。它显然被白色背景覆盖。添加一点背景将揭示真相。我心想：知乎的前端不好吗？也许其他人的关注点不在这些。下面列举几个比较好的实现方法，先不露馅1.伪元素+transform:translateX(-100%);主要原理是设置文本居中text-align:center;，然后给定两个伪元素，分别是绝对定位的，那么伪元素这时候也是水平居中，设置足够的宽度，然后把左边的向左移动100%。请记住，父级是隐藏的。具体实现如下。html结构是我是分界线
。css样式为.title{position:relative;text-align:center;overflow:hidden;font-size:14px;color:#999;}.title::before,.title::after{content:'';显示：内联块；宽度：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;align-items:center;font-size:14px;color:#999;}.title::before,.title::after{content:'';flex:1;height: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-阴影或轮廓，因为它不支持单一方向，所以使用clip-path或clip将其裁剪掉。具体实现如下。html结构是
我是分界线 。css样式为.title{text-align:center;font-size:14px;color:#999;overflow:hidden;}.title::before,.title::after{content:'';display:inline-块；宽度：0；高度：1px；框-阴影：0009999px#ccc；垂直对齐：中间；}.title::before{margin-right：10px；剪辑路径：多边形（00，-9999px0，-9999px100%,0100%);}.title::after{margin-left:10px;clip-path:polygon(00,9999px0,9999px100%,0100%);}CSSdivider（伪元素+box-shadow/outline+clip-path)4.伪元素+right:100%这个实现需要多加一层标签，外面还是text-align:center,里面的文字加两个伪元素做绝对定位，其中左边side的设置是从右边开始100%（相对于文字标签），具体实现如下。html结构是
我是分割线 css样式是.title{text-align:center;font-size:14px;颜色：#999；溢出：隐藏；}.inner{position:relative;}.inner::before,.inner::after{position:absolute;content:'';width:9999px;height:1px;background:#ccc;top:50%;}.inner::before{right:100%;margin-right:10px;}.inner::after{margin-left:10px;}CSSdivider（伪元素+right:100%)5.不用伪元素也可以使用border+transform的思路，但是需要额外的标签，给内部文本左右足够大的1px边框。这时候line需要设置-height:1px，因为内部整体足够大（超出父级），可以使用绝对定位，transform:translateX(-50%)居中具体实现如下html结构为