面试题120——140

最新推荐文章于 2024-05-15 10:59:49 发布

风瑞千行

最新推荐文章于 2024-05-15 10:59:49 发布

阅读量539

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_51349355/article/details/120589372

版权

21.如何实现水平、垂直居中？

方法一：使用position定位

<html>
   <head>
       <meta charset="utf-8" />
       <title>实现垂直水平居中方法1</title>
   </head>
   <style>
       html,body,div{
           margin:0;
           padding:0;
       }
       body{
       height:100%;
       width:100%;
       }
       #center{
           width:200px;
           height:200px;
           background:red;
           margin:0 auto;/*实现水平居中*/
           position:relative;/*设置相对定位，移动div*/
           top:50%;/*将图片移动到中间*/
           margin-top:-100px;/*关键设置，定位移动后，只是相当于将一个元素上边界中心点居中，而元素div是有
           宽高的，应减去元素的高度的一半，让元素实现中心点居中*/
       }
   </style>
   <body>
       <div id="center">垂直水平居中</div>
   </body>
</html>

方法二:使用position和transform

<html>
   <head>
       <meta charset="UTF-8">
       <title>实现水平垂直居中方法2</title>
   <style>
           html,body{
               margin:0;
               padding:0;
               height:100%;
               width:100%;
           }
           #center{
           height:200px;
           width:200px;
           background:green;
           margin:0 auto;/*实现水平居中*/
           position:relative;/*设置定位，偏移量，让元素实现上下居中*/
           top:50%;
           transform: translateY(-50%);/*使用平移使图片居中，思想与方法一一致*/
           }
       </style>
   </head>
   <body>
       <div id="center">垂直水平居中</div>
   </body>
</html>

方法三：使用弹性盒子

<html>
   <head>
       <meta charset="UTF-8">
       <title>实现水平垂直居中方法3</title>
   <style>
           html,body{
               margin:0;
               padding:0;
               height:100%;
               width:100%;
           }
           body{
               display:flex;/*打开弹性盒子（在父元素中使用）*/
               justify-content:center;/*控制水平居中*/
               align-items:center;/*控制垂直居中*/
           }
           #center{
           height:200px;
           width:200px;
           background:orange;
           }
       </style>
   </head>
   <body>
       <div id="center">垂直水平居中</div>
   </body>
</html>

22.实现左侧边栏固定，其他内容自适应?

<div id="wrap">
  <div id="content" style="height:140px;">
  <div id="contentb">
content自适应区，在前面
  </div>
  </div>
  <div id="sidebar" style="height:240px;">sidebar固定宽度区</div>
</div>

css：

#sidebar {
  width: 300px; float: right;
  }
  #content {
  margin-left: -310px; float: left; width: 100%;
  }
  #contentb {
  margin-left: 310px;
  }

23.做node用了什么框架？

1. Node.js Express

对于一个已经在使用 node.js 的开发人员来说，Express 或者"node.js express"并不是一个新鲜事。Express 框架提供了对 node.js 原生 API 的比较好的封装，从而使开发者更加容易地使用node.js。

Express 框架提供了用来开发强壮的 web/移动应用，以及 API 的所有功能。并且开发人员还能够方便地为它开发插件和扩展，从而增加 Express 的能力。下面列出了一些 Express 提供的基本的功能：

- 可以和任何的第三方数据库进行通讯

- 可以使用任何的用户认证方式

- 可以使用任何符合 Express 接口定义的模板引擎

- 可以按照需要定义工程目录

通过使用 Node Express，你可以使用更少的代码来实现功能。至少通过使用 Node Express，你可以实现中间件来响应 http 请求，可以定义路由表来定义对不同请求的响应函数，还可以使用模板引擎来输出 html 页面。

对于一个 NodeJS 开发新手来说，Express 还提供了如下的好处：1）Express的学习曲线并不陡峭，可以很快上手；2）Express 有非常庞大的社区，和组织良好的文档，新手可以很容易得到所需要的一切。

Express 根据 MIT 协议进行开源，目前 StrongLoop 对它提供支持。

2. Sail.js (node.js mvc)

Sail 作为一个非常稳固的 nodejs 框架，提供了建立任何规模的 web 应用所需要的所有功能功能。

Sail.js 在底层使用了 express框架来提供对

最低0.47元/天解锁文章

风瑞千行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题120——140

21.如何实现水平、垂直居中？方法一：使用position定位<html> <head> <meta charset="utf-8" /> <title>实现垂直水平居中方法1</title> </head> <style> html,body,div{ margin:0; padding:0;...
复制链接

扫一扫