亚洲综合在线一区,日韩欧美偷情高潮,久久伊人精品青青草原高清,中文字幕av解说

“盒子”由寬度和高度組成

zhushican 2年前 (2022-11-02) 六六互聯 3383 0

word; clear: both; text-indent: 2em; color: rgb(24, 30, 51); font-family: PingFangSC, 微軟雅黑, 黑體, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">寬度與高度

word; clear: both; text-indent: 2em; color: rgb(24, 30, 51); font-family: PingFangSC, 微軟雅黑, 黑體, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">本節內容主要討論的是關于寬度和高度都設置為100%的情況，為一個div盒子設置其寬度為100%，這樣寬度就會隨著瀏覽器的寬度調整進行自動適應，同時通過設置text-align：center可完成普通內容的水平居中。

“盒子”由寬度和高度組成

如果為div盒子設置高度，div的實際高度是否會隨著瀏覽器的高度變化而自適應？

通過簡單案例4-2,example02.html來體驗,效果如圖4-4所示。

例4-2   example02.html

 

<!DOCTYPE html>

 

<html>

 

<head>

 

         <meta  charset="utf-8">

 

         <title>盒子的高度與寬度</title>

 

         <style>

 

             div{width:  100%;height: 100%;

 

                  border:  solid 2px red;

 

             }

 

         </style>

 

</head>

 

<body>

 

    <div></div>

 

</body>

 

</html>

 
                                                                

“盒子”由寬度和高度組成


圖4-4 高度自適應的效果

可以看到，頁面的寬度是自適應整個瀏覽器的寬度的，但是高度卻并沒有自適應整個瀏覽器的高度，只能看到一條線，這條線是因為為div設置邊框而已。通過測試知道高度是無法通過設置百分比來進行自適應，如果div中有內容，高度才會自適應內容的高度。

如果想讓一個元素（盒子）的百分比高度height：100%起作用，則需要給這個元素的所有父元素的高度設定一個有效值，通過簡單案例4-3,example03.html來體驗,效果如圖4-5所示。

例4-3   example03.html

 

<!DOCTYPE html>

 

<html >

 

<head>

 

         <meta  charset="utf-8">

 

         <title>盒子的寬度</title>

 

         <style>

 

      body,html{ /*為div的父窗口body和html都設置高度值*/

 

                  height: 98%;

 

             }

 

         div{width:  100%;height: 100%;border: solid 2px red;}

 

         </style>

 

</head>

 

<body>

 

         <div></div>

 

</body>

 

</html>

 

“盒子”由寬度和高度組成

圖4-5 高度設置為100%的效果

效果得以實現，這里body和html的高度設置為98%是因為如果設置為100%，由于body的margin和padding的影響會出現滾動條，用戶無法看到div的邊框的全貌，僅此而已。


相關推薦

熱門文章