TRY CODING FUN

重拾编程的乐趣

0%

CSS resize 属性认识

发表于 更新于 分类于
本文字数： 3.2k 阅读时长 ≈ 3 分钟

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>

相关文章