css滑动门技术原理
滑动门出现的背景
制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不- -样多,咋办
微辣十个钟特殊形状的背景能够自适应元素中文本内容的多少,出现了css滑动门技术,他从新的角度侯建网页,是各种特殊性状的背景能够自由的拉伸滑动以适应元素内部的内容,可用性更强,追常见于各种导航栏的滑动门
核心技术
是用来css精灵技术以及padding的自动撑开技术
<a><span>导航男篮作用</span></a> a负责左边的圆角,span负责右边的圆角
总结
a设置背景左侧,padding撑开合适宽度
span设置北京右侧,padding撑开合适款年度,剩下的文字 继续撑开宽度
之所以a包含span就是因为整个导航栏是可以点击的
相应代码
div {
width: 200px;
height: 200px;
background-color: pink;
/transform: translate(100px);水平向左移动100px/
/transform: translate(50%);也是同样的100px因为是200的一半,如果是百分比不是以父类宽度为准,而是以自己宽度为准/
/以前我们让定位的盒子居中对齐/
position: absolute;
left: 50%;
top: 50%;
/margin-left: -100px;需要计算不合适/
transform: translate(-50%,-50%);/走自己盒子的50%和上满的结果一样,而且不用计算/
}