深圳市建设工程交易服务网站,一 建设网站前的市场分析,建筑工程网站开发,苏州建网站的公司一站式服务在HTML的元素中#xff0c;有一个比较特殊的元素form。我们用它来收集表单数据并提交给服务器#xff0c;并且理论上说来它是没有任何的UI被呈现的。当然如果我们在body元素后紧跟一个form#xff0c;这样一来似乎看不出来有什么UI呈现的问题#xff0c;可是当form存在于别…在HTML的元素中有一个比较特殊的元素form。我们用它来收集表单数据并提交给服务器并且理论上说来它是没有任何的UI被呈现的。当然如果我们在body元素后紧跟一个form这样一来似乎看不出来有什么UI呈现的问题可是当form存在于别的元素之中时就有问题了。 什么问题呢看下面的示例由于页面布局的需要我需要控制页面的滚动条。我把body的滚动条隐藏掉然后使用一个div元素来自制一个滚动条html代码如下 html head titleLayout Demo/title meta nameauthor contentbirdshomecnblogs.com /head body styleborder: 2px solid red; overflow: hidden; margin:0 div styleborder: 2px solid yellow; width:100%; height: 100%; overflow: auto; form div stylewidth:800; height:800; border: 2px solid blue/div /form /div /body/html 挺好的一个自制的滚动条就出来了可是如果这时把垂直滚动条拉到底会发现一个页面布局缺陷原来在form后IE会默认的加上一个br效果显示如下图 按么把div移到form里面去呢代码示例为 form div styleborder: 2px solid yellow; width:100%; height: 100%; overflow: auto; div stylewidth:800; height:800; border: 2px solid blue/div /div /form 这下显示完全乱套了见下图 产生这样的效果是为什么呢我记得我原来说过要让div在overflow为auto的情况下自动出滚动条有个条件。我当时的实验表明的结论是不能再width上使用百分比作为度量而可以在height上使用百分比后者都是指定的width和height就可以在over条件满足时出滚动条。由于当时我的实验样本有限我得到这个结论是很不确切的。 因为从第一个图中我们看到div的width和height都是百分比度量而水平和垂直滚动条都出来了。而能不能出滚动条的确切条件是能否更具其容器关系得到确切的width和height值不管是不是使用百分比来做度量。当然如果容器div使用的是指定的度量那么出滚动条是很自然的事情。可是如果是百分比怎么办呢如果百分比度量的parent容器的width和height是确定的值或是可以再通过其parent容器来确定的值那么就是可以出现滚动条的。比如示例一中由于body的width和height是确切的值所以div的width和height都是百分比度量仍然可以计算出确切的值。对于示例二中的情况由于form元素没有width和height一说所以在其内部的元素如果使用百分比度量就不能计算出确切的width和height的值所以不能正确的现实overflow的状态。 一下又扯远了继续说使用乱序html标签来控制输出效果的事情。显然通过上面的解释我们只能把div放到body的第一级child上了可是图一中那个多出来的空白怎么弄掉呢这里由于form标签本身在解析时的高优先级使得它对标签是否时well format格式不太敏感就是说只要有from和/form成对出现就行了管它位置上是否正确呢。所以我们把代码改为这样 html head titleLayout Demo/title meta nameauthor contentbirdshomecnblogs.com /head body styleborder: 2px solid red; overflow: hidden; margin:0 div styleborder: 2px solid yellow; width:100%; height: 100%; overflow: auto; form div stylewidth:800; height:800; border: 2px solid blue/div /div /form /body/html 注意div和form是相互嵌套的这样的html就能得到我们说期望的UI了如下图 关于为什么要把body的滚动条hidden掉然后自己用div来模拟有空再来说了。
