初始包含块

网页的窗口的结构:
最外层 浏览器窗口(视口)
初始包含块
HTML根元素
body
…………

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             
 8             /* 
 9                 网页的窗口的结构:
10                     最外层 浏览器窗口(视口)
11                           初始包含块
12                           HTML根元素
13                           body
14                           …………
15              
16              */
17             
18             
19             html{
20                 border: 1px blue solid;
21                 /* position: relative; */
22                 margin: 100px;
23             }
24             
25             body{
26                 border: 1px red solid;
27                 /* position: relative; */
28                 margin: 100px;
29             }
30             
31             .box1{
32                 width: 300px;
33                 height: 300px;
34                 background-color: #bfa;
35                 
36                 margin: 100px;
37                 
38                 /* position: relative; */
39             }
40             
41             .box2{
42                 width: 100px;
43                 height: 100px;
44                 background-color: orange;
45                 
46                 position: fixed;
47                 
48                 top: 0;
49                 left: 0;
50             }
51             
52         </style>
53     </head>
54     <body>
55         
56         <div class="box1">
57             <div class="box2"></div>
58         </div>
59         
60     </body>
61 </html>

 

 

 

1.初始包含块并不是html元素

2.当开启定位的子元素相对于初始包含块定位时,我们通常给body设置相对定位。

 

posted @ 2020-04-09 14:21  全情海洋  阅读(485)  评论(0编辑  收藏  举报