第138天：Web前端面试题总结（编程）
1、如何让一个盒子水平垂直居中
1 //已知宽高
2 <div class="div1"></div>
3 <style>
4 .div1{
5 width:400px;
6 height:400px;
7 position:absolute;
8 left:50%;
9 top:50%
10 margin:-200px 0 0 -200px;
11 }
12 </style>
13
14 //未知宽高
15 <!DOCTYPE html>
16 <html lang="en">
17 <head>
18 <meta charset="UTF-8">
19 <title>Document</title>
20 <style>
21 .div1{
22 position: absolute;
23 left: 0;
24 top: 0;
25 bottom: 0;
26 right: 0;
27 margin: auto;
28 border: 1px solid #000;
29 width: 400px;
30 height: 400px;
31 }
32 </style>
33 </head>
34 <body>
35 <div class="div1"></div>
36 </body>
37 </html>
38
39 //未知宽高方法二：
40 <!DOCTYPE html>
41 <html lang="en">
42 <head>
43 <meta charset="UTF-8">
44 <title>Document</title>
45 <style>
46 .div1{
47 position: absolute;
48 left: 50%;
49 top: 50%;
50 transform: translate(-50%,-50%);
51 border: 1px solid #000;
52 width: 400px;
53 height: 400px;
54 }
55 </style>
56 </head>
57 <body>
58 <div class="div1"></div>
59 </body>
60 </html>2、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。
1 // 方法一：
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>Document</title>
7 <style>
8 .div1{
9 width: 100px;
10 height: 200px;
11 background-color: #ccc;
12 float: left;
13 }
14 .div2{
15 background-color: #ff0;
16 margin-left: 100px;
17 height: 200px;
18 }
19 </style>
20 </head>
21 <body>
22 <div class="div1"></div>
23 <div class="div2"></div>
24 </body>
25 </html>
26
27 //方法二：
28 <head>
29 <meta charset="UTF-8">
30 <title>Document</title>
31 <style>
32 .div{
33 display: flex;
34 flex-direction: row;
35 align-items: center;
36 }
37 .div1{
38 flex-basis: 100px;
39 background-color: #ccc;
40 height: 300px;
41 }
42 .div2{
43 background-color: #ff0;
44 height: 300px;
45 flex-grow: 1;
46 }
47 </style>
48 </head>
49 <body>
50 <div class="div">
51 <div class="div1"></div>
52 <div class="div2"></div>
53 </div>
54 </body>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-01-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读