0%

CSS resize 属性认识

resize 这个属性可以调整窗口大小,特别棒,但也有一些局限性

https://developer.mozilla.org/en-US/docs/Web/CSS/resize

然后附上一个特别厉害的代码,只可意会不可言传。

Html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<!-- saved from url=(0030)http://43.154.27.149/test.html -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

html,
body,
div.box {
height: 100%;
width: 100%;
}

div {
box-sizing: border-box;
}

div.box {
display: flex;
}

div.side {
position: relative;
height: 100%;
outline: 1px solid greenyellow;
}

div.content {
flex: 1;
height: 100%;
padding: 0 10px;
}

/* 侧边栏文本样式 */
div.text {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
padding: 0 5px;
background: #ffffff;
}

/*拖动按钮样式*/
/*拖动bar盒时,父级盒side会被bar盒撑开,又因为text盒的宽高都设为100%,所以改变bar盒就是在改变text盒*/
div.bar {
width: 300px;
height: 100%;
margin-right: -2px;
/* 因为bar盒子和text盒子是重合的所以必须设置一个负值才能看到我们的拖动按钮*/
overflow: scroll;
/* 可设置其他值来进行对别,只可意会,不可言传*/
resize: horizontal;
/*水平拖放*/
}

/*因为拖动按钮属于滚动条系列,所以可通过改变滚动来间接改变拖动按钮的样式*/
div.bar::-webkit-scrollbar {
width: 10px;
height: 9999px;
/*可设为100%或者其他数值来查看展示效果,只可意会,不可言传*/
}

div.bar::-webkit-resizer {
/* 设置拖放按钮的背景颜色 */
background: skyblue;
}
</style>
</head>

<body>
<div class="box">
<div class="side">
<div class="bar" style="width: 257px"></div>
<div class="text">
对酒当歌1,人生几何2! 譬如朝露,去日苦多3。 慨当以慷4,忧思难忘。
何以解忧?唯有杜康5。 青青子衿,悠悠我心6。 但为君故,沉吟至今7。
呦呦鹿鸣,食野之苹。 我有嘉宾,鼓瑟吹笙8。 明明如月,何时可掇9?
忧从中来,不可断绝。 越陌度阡10,枉用相存11。 契阔谈宴12,心念旧恩。
月明星稀,乌鹊南飞。 绕树三匝13,何枝可依? 山不厌高,海不厌深14。
周公吐哺,天下归心15。 [1]
</div>
</div>
<div class="content">
滕王阁序1
豫章故郡,洪都新府2。星分翼轸,地接衡庐3。襟三江而带五湖4,控蛮荆而引瓯越5。物华天宝,龙光射牛斗之墟6;人杰地灵,徐孺下陈蕃之榻7。雄州雾列8,俊采星驰9。台隍枕夷夏之交10,宾主尽东南之美11。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻12。十旬休假13,胜友如云;千里逢迎14,高朋满座。腾蛟起凤,孟学士之词宗15;紫电清霜,王将军之武库16。家君作宰,路出名区;童子何知,躬逢胜饯17。
时维九月,序属三秋18。潦水尽而寒潭清,烟光凝而暮山紫。俨骖騑于上路19,访风景于崇阿。临帝子之长洲,得天人之旧馆20。层峦耸翠,上出重霄;飞阁流丹,下临无地21。鹤汀凫渚,穷岛屿之萦回;桂殿兰宫,即冈峦之体势22。
披绣闼,俯雕甍23,山原旷其盈视,川泽纡其骇瞩24。闾阎扑地,钟鸣鼎食之家;舸舰弥津,青雀黄龙之舳25。云销雨霁,彩彻区明26。落霞与孤鹜齐飞,秋水共长天一色。渔舟唱晚,响穷彭蠡之滨27,雁阵惊寒,声断衡阳之浦28。
遥襟甫畅,逸兴遄飞29。爽籁发而清风生,纤歌凝而白云遏30。睢园绿竹,气凌彭泽之樽31;邺水朱华,光照临川之笔32。四美具33,二难并。穷睇眄于中天34,极娱游于暇日。天高地迥,觉宇宙之无穷;兴尽悲来,识盈虚之有数35。望长安于日下,目吴会于云间36。地势极而南溟深,天柱高而北辰远37。关山难越,谁悲失路之人;萍水相逢,尽是他乡之客。怀帝阍而不见,奉宣室以何年38?
嗟乎!时运不齐39,命途多舛40。冯唐易老,李广难封41。屈贾谊于长沙,非无圣主42;窜梁鸿于海曲,岂乏明时43?所赖君子见机,达人知命44。老当益壮,宁移白首之心45?穷且益坚,不坠青云之志46。酌贪泉而觉爽,处涸辙以犹欢47。北海虽赊,扶摇可接48;东隅已逝,桑榆非晚49。孟尝高洁,空余报国之情50;阮籍猖狂,岂效穷途之哭51!
勃,三尺微命52,一介书生。无路请缨,等终军之弱冠53;有怀投笔,慕宗悫之长风54。舍簪笏于百龄,奉晨昏于万里55。非谢家之宝树,接孟氏之芳邻56。他日趋庭,叨陪鲤对57;今兹捧袂,喜托龙门58。杨意不逢,抚凌云而自惜59;钟期既遇,奏流水以何惭60?
呜乎!胜地不常,盛筵难再61;兰亭已矣62,梓泽丘墟63。临别赠言,幸承恩于伟饯;登高作赋,是所望于群公64。敢竭鄙怀,恭疏短引65;一言均赋,四韵俱成66。请洒潘江,各倾陆海云尔67。
滕王高阁临江渚,佩玉鸣鸾罢歌舞。 画栋朝飞南浦云,珠帘暮卷西山雨。
闲云潭影日悠悠,物换星移几度秋。 阁中帝子今何在?槛外长江空自流。 [2]
</div>
</div>
<script></script>
</body>
</html>