主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏。
具体实现如下
html结构为
<div class="title">我是分割线</div>
css样式为
.title{
position: relative;
text-align: center;
overflow: hidden;
font-size: 14px;
color: #999;
}
.title::before,.title::after{
content: '';
display: inline-block;
width: 100%;
height: 1px;
position: absolute;
background: #ccc;
top: 50%;
}
.title::before{
margin-left: -10px;
transform: translateX(-100%);
}
.title::after{
margin-left: 10px;
}
这个比较好理解了,设置display:flex,然后两个伪元素分别铺满剩余空间。
具体实现如下
html结构为
<div class="title">我是分割线</div>
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;
}
同样利用text-align: center使文本和伪元素居中,然后生成足够大的box-shadow或者outline,由于不支持单个方向,所以用clip-path或者clip裁剪掉
具体实现如下
html结构为
<div class="title">我是分割线</div>
css样式为
.title{
text-align: center;
font-size: 14px;
color: #999;
overflow: hidden;
}
.title::before,.title::after{
content: '';
display: inline-block;
width: 0;
height: 1px;
box-shadow: 0 0 0 9999px #ccc;
vertical-align: middle;
}
.title::before{
margin-right: 10px;
clip-path: polygon(0 0, -9999px 0, -9999px 100%, 0 100%);
}
.title::after{
margin-left: 10px;
clip-path: polygon(0 0, 9999px 0, 9999px 100%, 0 100%);
}
这个实现需要多一层标签,外部仍然是text-align: center,内部文本里添加两个伪元素绝对定位,其中左边的设置距离右边100%(相对于文本标签)即可
具体实现如下
html结构为
<div class="title">
<span class="inner">我是分割线</span>
</div>
css样式为
.title{
text-align: center;
font-size: 14px;
color: #999;
overflow: hidden;
}
.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;
}
这个思路可以不用到伪元素,不过需要额外的标签,给内部文本左右足够大的1px边框,此时需要设置line-height:1px,由于内部整体以及足够大了(超过父级),可以使用绝对定位和transform: translateX(-50%)居中
具体实现如下
html结构为
<div class="title">
<span class="inner">我是分割线</span>
</div>
css样式为
.title{
position: relative;
text-align: center;
font-size: 14px;
color: #999;
overflow: hidden;
padding: .6em 0;/**把高度撑起来**/
}
.inner{
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
line-height: 1px;
border-left: 9999px solid #ccc;
border-right: 9999px solid #ccc;
padding: 0 10px;
}
这个思路只需要一个伪元素,在文本内部生成一个伪元素,利用足够大的border和相同的负值(绝对定位+left/right)还原位置
具体实现如下
html结构为
<div class="title">
<span class="inner">我是分割线</span>
</div>
css样式为
.title{
text-align: center;
font-size: 14px;
color: #999;
overflow: hidden;
}
.inner{
position: relative;
padding: 0 10px;
}
.inner::before{
content: '';
position: absolute;
height: 1px;
top: 50%;
border-left: 9999px solid #ccc;
border-right: 9999px solid #ccc;
right: -9999px;
left: -9999px;
}
主要思路为父级设置display:table,伪元素设置display:table-cell,并设置足够大的宽度即可
具体实现如下
html结构为
<div class="title">
<span class="inner">我是分割线</span>
</div>
css样式为
.title{
display: table;
font-size: 14px;
color: #999;
}
.inner{
display: table-cell;
white-space: nowrap;
padding: 0 10px;
}
.title::before,.title::after{
content: '';
display: table-cell;
width: 9999px;
overflow: hidden;
background: linear-gradient(#ccc 0,#ccc) center no-repeat;/**这里用线性渐变生成的,也可以用其他方式**/
background-size: 100% 1px;
}
利用fieldset和legend标签组合,可以天然实现分隔线效果,参考至张鑫旭的这篇文章
具体实现如下
html结构为
<fieldset class="title">
<legend class="inner">我是分割线</legend>
</fieldset>
css样式为
.title{
font-size: 14px;
color: #999;
border: 0;
border-top: 1px solid #ccc;
padding: 0;
}
.inner{
margin: 0 auto;;
padding: 0 10px;
}
上面一共列举了8中方式来实现分隔线的效果,每种方法思路各不相同,重要的是可以发散自己的想象力,可能这才是CSS与其他语言所不同的吧~
这里整理了一下,整体效果如下,可访问这里查看,大家在实际项目中可自行选取所需要的方式
在做自适应网页的时候,如果在图片中使用了热区map。图片可以通过样式实现:图片大小随页面变化,MAP中每个area的坐标也随页面等比例的变化效果。根据分辨率自适应热区坐标
有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢?以下代码可以适配大小
实现 iframe 的自适应高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。
js动态设置html的字体大小,设计稿宽度750px,设备宽度350px,此时HTML 的font-size:50px,及1rem=50px;设置html的font-size: 13.33vw,设置html的font-size并缩放页面
在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度,其中:width=device-width :表示宽度是设备屏幕的宽度,height=device-height :表示宽度是设备屏幕的宽度
利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度;利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult
最近在做大屏可视化,页面数据展示基本都是用百度的echarts,因为页面要做自适应,所以当视窗变化的时候echarts也要变化。window.onresize 可以解决这个问题。而一般一个页面不可能只引用一个表格,当你引用多个的时候,有些地方需要注意。
css实现左侧宽度固定右侧宽度自适应:定位、浮动、margin;css3弹性盒模型实现自适应:上下高度固定中间高度自适应、左侧宽度固定右侧宽度自适应
rem 是相对长度单位,是指相对于根元素(即html元素)font-size(字号大小)的倍数;vw 是相对长度单位,相对于浏览器窗口的宽度,浏览器窗口宽度被均分为100个单位的vw,rem 和 vw 结合实现WEB页面等比例缩放自适应
拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!