使用乱序标签来控制HTML的输出效果
生活随笔
收集整理的這篇文章主要介紹了
使用乱序标签来控制HTML的输出效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在HTML的元素中，有一個比較特殊的元素form。我們用它來收集表單數據并提交給服務器，并且理論上說來它是沒有任何的UI被呈現的。當然如果我們在body元素后緊跟一個form，這樣一來似乎看不出來有什么UI呈現的問題，可是當form存在于別的元素之中時，就有問題了。
??? 什么問題呢？看下面的示例，由于頁面布局的需要，我需要控制頁面的滾動條。我把body的滾動條隱藏掉，然后使用一個div元素來"自制"一個滾動條，html代碼如下： <html>
????<head>
????????<title>Layout?Demo</title>
????????<meta?name="author"?content="birdshome@cnblogs.com">
????</head>
????<body?style="border:?2px?solid?red;?overflow:?hidden;?margin:0">
????????<div?style="border:?2px?solid?yellow;?width:100%;?height:?100%;?overflow:?auto;">
????????????<form>
????????????????<div?style="width:800;?height:800;?border:?2px?solid?blue"></div>
????????????</form>
????????</div>
????</body>
</html>
??? 挺好的一個自制的滾動條就出來了，可是如果這時把垂直滾動條拉到底，會發現一個頁面布局缺陷，原來在form后IE會默認的加上一個<br>效果顯示，如下圖：
???
??? 按么把div移到form里面去呢？代碼示例為： ????????<form>
????????????<div?style="border:?2px?solid?yellow;?width:100%;?height:?100%;?overflow:?auto;">
????????????????<div?style="width: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>
????????<title>Layout?Demo</title>
????????<meta?name="author"?content="birdshome@cnblogs.com">
????</head>
????<body?style="border:?2px?solid?red;?overflow:?hidden;?margin:0">
????????<div?style="border:?2px?solid?yellow;?width:100%;?height:?100%;?overflow:?auto;">
????????????<form>
????????????????<div?style="width:800;?height:800;?border:?2px?solid?blue"></div>
????????????</div>
????????</form>
????</body>
</html>
??? 注意div和form是相互嵌套的，這樣的html就能得到我們說期望的UI了，如下圖：
???
??? 關于為什么要把body的滾動條hidden掉，然后自己用div來模擬？有空再來說了。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
??? 什么問題呢？看下面的示例，由于頁面布局的需要，我需要控制頁面的滾動條。我把body的滾動條隱藏掉，然后使用一個div元素來"自制"一個滾動條，html代碼如下： <html>
????<head>
????????<title>Layout?Demo</title>
????????<meta?name="author"?content="birdshome@cnblogs.com">
????</head>
????<body?style="border:?2px?solid?red;?overflow:?hidden;?margin:0">
????????<div?style="border:?2px?solid?yellow;?width:100%;?height:?100%;?overflow:?auto;">
????????????<form>
????????????????<div?style="width:800;?height:800;?border:?2px?solid?blue"></div>
????????????</form>
????????</div>
????</body>
</html>
??? 挺好的一個自制的滾動條就出來了，可是如果這時把垂直滾動條拉到底，會發現一個頁面布局缺陷，原來在form后IE會默認的加上一個<br>效果顯示，如下圖：
???
??? 按么把div移到form里面去呢？代碼示例為： ????????<form>
????????????<div?style="border:?2px?solid?yellow;?width:100%;?height:?100%;?overflow:?auto;">
????????????????<div?style="width: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>
????????<title>Layout?Demo</title>
????????<meta?name="author"?content="birdshome@cnblogs.com">
????</head>
????<body?style="border:?2px?solid?red;?overflow:?hidden;?margin:0">
????????<div?style="border:?2px?solid?yellow;?width:100%;?height:?100%;?overflow:?auto;">
????????????<form>
????????????????<div?style="width:800;?height:800;?border:?2px?solid?blue"></div>
????????????</div>
????????</form>
????</body>
</html>
??? 注意div和form是相互嵌套的，這樣的html就能得到我們說期望的UI了，如下圖：
???
??? 關于為什么要把body的滾動條hidden掉，然后自己用div來模擬？有空再來說了。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的使用乱序标签来控制HTML的输出效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python3绘图_python3绘图示
- 下一篇： 2017年html5行业报告,云适配发布