前言：
学程序都是常学常忘，所以把思路和心得都记录下来，那怕是很简单的东西，所以就有了这篇文章
需求：
因项目需要一个可填可写的DropDownList ；
原理：
任何ASP.NET Server Control呈现在Client的都是HTML代码，所以我从HTML角度分析，可填可写的DropDownList是由一个INPUT控件和SELECT控件经过剪切叠加组合而成；
分析：
先运行下面一段HTML代码，这段HTML演示了一个可填可写的HTML SELECT控件:
<html>
2
<body>
3
<input id="txtTest" type="test" style="width:200px;POSITION: absolute">
4
<select id="ddlTest" onchange="document.getElementById('txtTest').value=this.options[this.selectedIndex].text" style="width:217px;CLIP: rect(auto auto auto 200px); POSITION: absolute">
5
<option>tt</option>
6
<option>dd</option>
7
</select>
8
</body>
9
</html>
10
这段代码的关键是CSS2的rect ( number number number number )元素，理解了这个元素整个控件就OK啦，CSS2 handbook的解释：
| rect ( number number number number ) | : |
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切；必须将 position 属性的值设为 absolute ，此属性方可使用。
当我看到这段文字的时候，我还是不能感性地认识这段文字的含义，如果你有和我一样的感觉，不妨按下面的方式测试一下:
做两个select控件，一个有rect css标记，一个没有，对有rect(number number number number )标记的，对其中的一个number设置某个值，其余为auto,然后比对一下就很直观了
也很容易知道，要做这个控件，只需对rect(number number number number )最后一个number设置一个值，其余都为auto,那么这个number的设置有什么规则呢 ？先看下图：
我测试发现有向下的箭头部分的长度大约17px，所以就有这样一个规律：
select控件的长度＝input textbox控件的长度+17px
也就是说，如果我希望在页面上呈现一个217px的可填可写的select控件，就可以设置如下：
input textbox : 200px
select控件 : 217px
rect设置 ：rect(auto auto auto 200px )
封装：
把上面的HTML封装成一个server control，这样使用方便，而且可以复用，我把控件代码和调用测试代码都打包，有兴趣的可以下载看看，当然了，封装的不是很好，但既然知其所以然了，知其然还不容易，本来这个东西也不复杂
down:http://www.cnblogs.com/Files/kwklover/StudyCaseProject.rar
70
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
