第138天:Web前端面试题总结(编程)-阿里云开发者社区

开发者社区> 半指温柔乐> 正文

第138天:Web前端面试题总结(编程)

简介: 1、如何让一个盒子水平垂直居中 1 //已知宽高 2 3 4 .div1{ 5 width:400px; 6 height:400px; 7 position:absolute; 8 left:50%; ...
+关注继续查看

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>

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
最新天猫面试题(含总结):线程池+并发编程+分布式设计+中间件
一面: HashMap实现原理,ConcurrentHashMap实现原理 红黑树,为什么允许局部不平衡 TCP,UDP区别,为什么可靠和不可靠 一次HTTP请求的全过程,包括域名解析、定位主机等 TCP三次握手 MySQL事务是什么?四大特性,四大隔离级别 Concurr...
1257 0
最全总结 JavaScript Array 方法详解--《前端那些事》
我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲染到页面当中。 二次处理的过程是 考验 `Coder` 对 `Array` 是否熟练 以及 在 何种 场景下使用哪种方法处理最优 。
77 0
反应式编程探索与总结
1.什么是反应式编程 Reactive Programming 一种以异步处理数据流为中心思想的编程范式,这个范式存在已久,不是新概念,就像面向过程、面向对象编程、函数式编程等范式。 对比一下,Reactive streams指的是一套规范,对于Java开发者来讲,Reactive Streams就是一套API,使我们可以进行Reactive programming。 Reacti
1157 0
Java性能优化之编程技巧总结
1、慎用异常 在Java软件开发中,经常使用 try-catch 进行错误捕获,但是,try-catch 语句对系统性能而言是非常糟糕的。
859 0
编程易犯毛病总结
由于程序写好,总会有bug,这些bug很大程序上来自于编写的方法和习惯有关。 本文会长期追加,我自己发现一条就会记一条。   1.是数值就要用数值型变量,不要用字符串,不要以为读文件读来的是字符串,以后就用字符串变量保存 2.检测子字符串是否存在。
497 0
WebFlux基础之响应式编程
本篇介绍了WebFlux的必备知识--java中函数式编程与响应式编程的基本写法
1631 0
+关注
半指温柔乐
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
245
文章
205
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载