“盒子”由宽度和高度组成

zhushican 2年前 (2022-11-02) 六六互联 862 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-aligncenter可完成普通内容的水平居中。

“盒子”由宽度和高度组成

如果为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中有内容,高度才会自适应内容的高度。

如果想让一个元素(盒子)的百分比高度height100%起作用,则需要给这个元素的所有父元素的高度设定一个有效值,通过简单案例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%的效果

效果得以实现,这里bodyhtml的高度设置为98%是因为如果设置为100%,由于bodymarginpadding的影响会出现滚动条,用户无法看到div的边框的全貌,仅此而已。


相关推荐