网页布局与定位

Posted 2020-11-20 lanyb009

（1）1列固定宽度

 1 <template>
 2   <div>
 3     <div class="layout">1列固定宽度</div>

 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: ‘Home‘
10 }
11 </script>
12 
13 <style scoped>
14   .layout{
15     background: red;
16     border: 20px solid #333;
17     width: 300px;
18     height: 300px;
19   }
20 </style>

故总宽度为 = 300px + 20px;

 （2）1列宽度自适应

 1 <template>
 2   <div>
 3     <div class="layout">1列固定宽度</div>

 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: ‘Home‘
10 }
11 </script>
12 
13 <style scoped>
14   .layout{
15     background: blue;
16     border: 20px solid #333;
17     width: 80%;
18     height: 300px;
19   }
20 </style>

采用百分比进行宽度自适应，总宽度为=80%窗口大小 + 20px；

 （3）1列固定宽度居中

 1 <template>
 2   <div>
 3     <div class="layout">1列固定宽度</div>

 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: ‘Home‘
10 }
11 </script>
12 
13 <style scoped>
14   .layout{
15     background: blue;
16     border: 20px solid #333;
17     width: 300px;
18     height: 300px;
19     margin: 0px auto;
20   }
21 </style>

（4）2列固定宽度

 1 <template>
 2   <div>
 3     <div class="left">左列</div>
 4     <div class="right">右列</div>

 

 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10   name: ‘Home‘
11 }
12 </script>
13 
14 <style scoped>
15   .left{
16     background: blue;
17     border: 20px solid #333;
18     width: 300px;
19     height: 300px;
20     float: left;
21   }
22   .right{
23     background: red;
24     border: 20px solid #333;
25     width: 300px;
26     height: 300px;
27     float: left;
28   }
29 </style>

 border没有重叠，故中间黑色部分宽度为=20px + 20px；

（5） 2列宽度自适应

 1 <template>
 2   <div>
 3     <div class="left">左列</div>
 4     <div class="right">右列</div>

 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10   name: ‘Home‘
11 }
12 </script>
13 
14 <style scoped>
15   .left{
16     background: blue;
17     border: 20px solid #333;
18     width: 20%;
19     height: 300px;
20     float: left;
21   }
22   .right{
23     background: red;
24     border: 20px solid #333;
25     width: 70%;
26     height: 300px;
27     float: left;
28   }
29 </style>

之所以右栏不设置80%，是因为存在border，若设置为80%，则会撑到下1行中。【注：实际效果是80%并不会到撑到下1栏，而设置80%以上才会撑到下1栏】

后面可以根据border来使得两列的布局占满整个屏幕。

（6）2列中左侧固定，右列宽度自适应

 1 <template>
 2   <div>
 3     <div class="left">左列</div>
 4     <div class="right">右列</div>

 

 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10   name: ‘Home‘
11 }
12 </script>
13 
14 <style scoped>
15   .left{
16     background: blue;
17     border: 20px solid #333;
18     width: 100px;
19     height: 300px;
20     float: left;
21   }
22   .right{
23     background: red;
24     border: 20px solid #333;
25     height: 300px;
26   }
27 </style>

 左栏设置固定宽度且向左浮动，右栏不设置宽度并且不浮动；

（7）2列固定宽度居中

 1 <template>
 2   <div class="layout">
 3     <div class="left">左列</div>
 4     <div class="right">右列</div>

 

 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10   name: ‘Home‘
11 }
12 </script>
13 
14 <style scoped>
15   .layout{
16     margin: 0px auto;
17     width: 680px;
18   }
19   .left{
20     background: blue;
21     border: 20px solid #333;
22     width: 300px;
23     height: 300px;
24     float: left;
25   }
26   .right{
27     background: red;
28     border: 20px solid #333;
29     height: 300px;
30     width: 300px;
31     float: left;
32   }
33 </style>

 layout容器的宽度需要 >= 300px + 300px + 20px + 20px + 20px + 20px，故这里设置为680是可以的。

（8）3列浮动中间列宽度自适应

 1 <template>
 2   <div>
 3     <div class="left">左列</div>
 4     <div class="center">中间列</div>
 5     <div class="right">右列</div>

 

 6   </div>
 7 </template>
 8 
 9 <script>
10 export default {
11   name: ‘Home‘
12 }
13 </script>
14 
15 <style scoped>
16   .center{
17     background: #fff;
18     border: 20px solid #333;
19     height: 300px;
20     margin-left: 104px;
21     margin-right: 104px;
22   }
23   .left{
24     background: blue;
25     border: 20px solid #333;
26     width: 100px;
27     height: 300px;
28     position: absolute;
29     top: 0px;
30     left: 0px;
31   }
32   .right{
33     background: red;
34     border: 20px solid #333;
35     height: 300px;
36     width: 100px;
37     position: absolute;
38     top: 0px;
39     right: 0px;
40   }
41 </style>