【CSS 】resize 属性,实现拖拽分栏布局

1. CSS resize 属性的应用

效果预览

2. resize 属性的介绍

  • 看到 resize 可能比较陌生 , 但你一定用过 多行输入框(textarea) ,它的右下角是不是可以拖动 ?
  • == 所以 resize 就是 textarea 标签的一种 默认属性
  • 我们把这个 拖拽的小角 放大 , 放到其他元素上面会发生什么 ?

3. resize 拖动式分栏布局 样例

第 一 步

  • 初始化 根标签( :root ) 、body 的样式;
  • body 设置为 弹性盒子,或者再创建一个大盒子也可以;
  • 第一个盒子 , 不要设置宽度 ,内容由下一步添加的 resize 容器撑开 , 同时将超出的隐藏;
  • 第二个盒子, flex : 1占据 剩下所有宽度。
<style>
	:root,body{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
    }
    .box1{
    	background-color: red;
        overflow: hidden;
    }
    .box2{
        background-color: blue;
        flex: 1;
    }
style>
<body>
    <div class="box1">1div>
    <div class="box2">2div>
body>

第 二 步

  • 创建一个 resize 容器 div 盒子 ,设置初始宽度
  • 我们只需要,最右下角的 方块才能拖动;
  • 我们将 高度设置为 16px ,1rem的 默认大小 ,刚好没有y轴滚动条。
  • 如 :
    【CSS 】resize 属性,实现拖拽分栏布局_第1张图片
  • 代码如下
<style>
 .......
.reszie{
     overflow: scroll;
     resize: horizontal;
     width: 200px;
     height: 16px;  /*小方块的高度*/
}
style>
<body>
    <div class="box1">  1
        <div class='reszie'>div>
    div>
    <div class="box2">2div>
body>

第 三 步

  • 让小方块 y 轴 扩大,足够高 ,然后将容器 设置为透明
  • 再给父容器,设置个右边框 ,让其位置刚好吻合。
    【CSS 】resize 属性,实现拖拽分栏布局_第2张图片
  • 代码如下:
<style>
.reszie{
    overflow: scroll;
    resize: horizontal;
    width: 200px;
    height: 16px;  /*小方块的高度*/

    transform: scaleY(999);
	opacity: 0;
}
style>

注意:
. 如果改变高度 只会滚动条的高度增加 ×
. 但是修改 ::webkit-scrollbar 只有谷歌有用 ,存在兼容问题 ×
. 使用可以 让他y 轴缩放一定的倍数 (阔长后隐藏 将透明度设置为0) √ 推荐

最后 (代码整合)

  • 代码整合:
<style>
	:root,body{
        width: 100%;
        height: 100%;
        margin: 0;
        display: flex;
    }
    .box1{
    	background-color: red;
        overflow: hidden;
        border-right: 1px solid white;
    }
    .box2{
        background-color: blue;
        flex: 1;
    }
    .reszie{
    	overflow: scroll;
   		resize: horizontal;
    	width: 200px;
    	height: 16px;  /*小方块的高度*/

    	transform: scaleY(999);
		opacity: 0;
	}
style>
<body>
    <div class="box1">1
     	<div class='reszie'>div>
	div>
    <div class="box2">2div>
body>
  • 最后换上 ,美女背景, 就可以啦 !!!

【CSS 】resize 属性,实现拖拽分栏布局_第3张图片

你可能感兴趣的:(【,CSS3,】还有这种操作,?,css,css3,前端)