第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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍

本文为 H5EDU 机构官方 HTML5教程,主要介绍:JavaScript强化教程 —— style、currentStyle、getComputedStyl...

2176
来自专栏Golang语言社区

Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

36010
来自专栏前端知识分享

第26天:js-$id函数、焦点事件

一、函数return语句 定义函数的返回值,在函数内部用return来设置返回值,一个函数只能有一个返回值。同时,终止代码的执行。 所有自定义函数默认没有返回值...

1081
来自专栏Golang语言社区

【Golang语言社区--基础篇】Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

37911
来自专栏Python小屋

Python中的枚举类型

>>> from enum import Enum #导入模块中的类 >>> class Color(Enum): #创建自定义枚举类 red = 1...

2925
来自专栏Java帮帮-微信公众号-技术文章全总结

JS之文档对象模型DOM

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> ...

2936
来自专栏河湾欢儿的专栏

css3选择器

属性选择器 E[attr]只使用属性名,但没有确定任何属性值 E[type="text"]指定属性名,并指定了该属性的属性值 E[attr~="value...

1022
来自专栏老司机的技术博客

golang学习笔记10:数组切片Slice

862
来自专栏Golang语言社区

Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

3939
来自专栏HTML5学堂

JQuery选择器(中)

HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

3689

扫码关注云+社区

领取腾讯云代金券