htmlayout设计ui 基础篇：[13]元素与窗口同步

2024-10-13 15:56:59

1、第一，我们先来看下要实现的效果1、窗口大小可以拖动改变大小2、窗口改变大小的时候，textarea也是中着窗口大小自由变化的这个效果，需要满足上面的2个条件

2、第二，接下来，我们来看看如何实现这个效果效果就像我们经常看到的QQ聊天窗口一样，下面的文字输入框就是随窗口大小变化而变化的

3、第三，现在开始实现我们今天要做的效果先来定义整个窗口的默认大小和可以随意拖动的效果可以拖动的代码是：增加r髫潋啜缅esizeable就可以了代码如下：<html encoding="utf8" custom-frame="solid" resizeable>整个窗口的默认大小为：<style> html { width:569px; height:422px;}</style>现在窗口默认显示效果如下：

4、第五，接下来，如何让textarea来实现尺寸随窗口自由变化呢？样式代码如下：<style>textarea {display:block;size:*;}</style>也就是说，中间size:*=width:*;height:*;也就是说，宽高一致的情况下，可以直接用size:*来表示，这个*表示水平和垂直空间占满剩余空间

5、第六，接下来在<body>中写上<textarea />就可以了<body><d足毂忍珩iv>头部导航代码</div><div><textarea novalue=新建文字></textarea></div><div>底部按钮代码</div></body>效果如下：