AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端常见编程题一

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

CSS篇

垂直居中

方式一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>垂直居中</title>
  </head>
  <style>
    .wrapper {
      overflow: hidden;
      width: 1000px;
      height: 500px;
      background: #999;
    }
    .center {
      width: 18em;
      height: 10em;
      text-align: center;
      background-color: orange;
      color: #fff;

      margin: 50vh auto;
      transform: translateY(-50%);
    }
    
  </style>
  <body>
    <div class="wrapper">
      <div class="center">
        基于视口的垂直居中<br />
        不要求原生有固定的宽高。<br />
        但是这种居中是在整个页面窗口内居中，不是基于父元素<br />

      </div>
    </div>
  </body>
</html>

方式二

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中</title>
    <style>
        .center {
            width: 18em;
            height: 10em;
            position: absolute;
            background: orange;
            text-align: center;
            top: 50%;
            left: 50%;
            margin-left: -9em;
            margin-top: -5em;
            /* 或者
            transform: translate(-9em, -5em); */
        }
    </style>
</head>

<body>
    <div class="center">
        要求原生有固定的宽高。<br />
        position: absolute;<br />
        top和left 为 50%;<br />
        margin上为高的一半<br />
        margin左为宽的一半<br />
    </div>
</body>

</html>

方式三

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>垂直居中</title>
  </head>
  <style>
    .center {
      width: 18em;
      height: 10em;
      text-align: center;
      background-color: orange;
      color: #fff;

      position: absolute;
      top: calc(50% - 5em);
      left: calc(50% - 9em);
    }
  </style>
  <body>
    <div class="center">
        要求原生有固定的宽高。<br/>
        position: absolute;<br/>
        top 为 calc(50% 剪 一半高)
        left 为 calc(50% 剪 一半宽)
    </div>

  </body>
</html>

方式四

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>垂直居中</title>
  </head>
  <style>
    .center {
      width: 18em;
      height: 10em;
      text-align: center;
      background-color: orange;
      color: #fff;

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div class="center">
        不要求原生有固定的宽高。<br/>
        position: absolute;<br/>
        top和left 为 50%;<br/>
        transform: translate(-50%, -50%);
    </div>

  </body>
</html>

方式五

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>垂直居中</title>
  </head>
  <style>
    .wrapper {
      width: 1000px;
      height: 600px;
      background: #999;

      display: flex;
    }
    .center {
      width: 18em;
      height: 10em;
      text-align: center;
      background-color: orange;
      color: #fff;

      margin: auto;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="center">
        使用flex居中<br/>
        父元素 display: flex; <br/>
        居中块： margin: auto;
      </div>
    </div>
  </body>
</html>

方式六

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>垂直居中</title>
  </head>
  <style>
    .wrapper {
      width: 1000px;
      height: 600px;
      background: #999;

      display: flex;
      justify-content: center;
      align-items: center;
    }
    .center {
      width: 18em;
      height: 10em;
      text-align: center;
      background-color: orange;
      color: #fff;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="center">
        使用flex居中<br/>
        父元素 display: flex; <br/>
        justify-content: center;<br/>
        align-items: center;<br/>
      </div>
    </div>
  </body>
</html>

水平居中

方式一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中</title>
    <style>
        .wrapper {
            text-align: center;
            height: 200px;
            background: orange;
        }

        .center {
            display: inline-block;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="center">如果需要居中的元素为常规流中 inline / inline-block 元素，为父元素设置 text-align: center;</div>
    </div>
</body>

</html>

方式二

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>水平元素居中</title>
  </head>
  <style>
    .wrapper {
      width: 100%;
      height: 500px;

      text-align: center; /* 3 */
    }
    .center {
      width: 500px;
      text-align: left; 
      margin: 0 auto; 

      background-color: orange;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="center">
          父元素上设置 text-align: center;<br />
          居中元素上margin 为 auto。
      </div>
    </div>
  </body>
</html>

方式三

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>水平元素居中</title>
  </head>
  <style>
    .wrapper {
      width: 80%;
      height: 500px;
      background: #888;
      
      position: relative;
    }
    .center {
      width: 500px;
      position: absolute;
      left: 50%;
      margin-left: -250px;

      background-color: orange;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="center">如果元素positon: absolute; 那么 0）设置父元素postion: relative 1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以-1</div>
    </div>
  </body>
</html>

方式四

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>水平元素居中</title>
  </head>
  <style>
    .wrapper {
      width: 80%;
      height: 500px;
      background: #888;
    }
    .center {
      width: 500px;
      position: relative;
      left: 50%;
      margin-left: -250px;

      background-color: orange;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="center">如果元素positon: relative。 那么 1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以-1</div>
    </div>
  </body>
</html>

布局

绝对定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        * {
            margin: 0;
            padding: 0;
        }

        aside {
            position: absolute;
            width: 300px;
            min-height: 100px;
        }

        left {
            left: 0;
            background-color: red;
        }

        .right {
            right: 0;
            background-color: blue;
        }

        .center {
            position: absolute;
            left: 300px;
            right: 300px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <aside class="left"></aside>
    <aside class="right"></aside>
    <main class="center">
        <h1>绝对定位解决方案</h1>
        <p>左右区域分别postion：absolute，固定到左右两边</p>
        <p>中间区域postion：absolute；left：300px; right: 300px</p>
        <p>给总的宽度加一个min-width，不然缩小窗口会有毛病</p>
    </main>
</body>

</html>

三栏-表格布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格布局</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            display: table;
            width: 100%;
        }

        .left,
        .main,
        .right {
            min-height: 100px;
            display: table-cell;
        }

        .left {
            width: 100px;
            background-color: red;
        }

        .main {
            background-color: orange;
        }

        .right {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <aside class="left"></aside>
        <main class="main">
            <h1>表格布局</h1>
            <p>父元素display：table并且宽度为100%</p>
            <p>每一个子元素display：table-cell</p>
            <p>左右两侧添加宽度，中间不加宽度</p>
        </main>
        <aside class="right"></aside>
    </div>
</body>

</html>

三栏-浮动方案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动方案</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .left,
        .right,
        .main {
            height: 200px;
        }

        .left {
            float: left;
            width: 100px;
            background-color: blue;
        }

        .main {
            background-color: seagreen;
            width: 100%;
        }

        .right {
            float: right;
            width: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <aside class="left"></aside>
    <aside class="right"></aside>
    <main class="center">
        <h1>浮动解决方案</h1>
        <p>方法：left和right都写在center前面，并且分别左右浮动</p>
        <p>中间的这个div因为是块级元素，所以在水平方向按照他的包容快自动撑开</p>
        <p>简单，但是中心部分过长下面会溢出，然后文字就会跑到两边去。</p>
    </main>
</body>

</html>

三栏-网格布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网格布局</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            display: grid;
            width: 100%;
            grid-template-columns: 100px 1fr 100px;
        }

        .left {
            background-color: red;
        }

        .center {
            background-color: orange;
        }

        .right {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <aside class="left"></aside>
        <main class="center">
            <h1>网格布局</h1>
            <p>父元素display：grid</p>
        </main>
        <aside class="right"></aside>
    </div>
</body>

</html>

三栏-flex布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            display: flex;
            height: 200px;
        }

        .left {
            width: 100px;
            background-color: seagreen;
        }

        .right {
            width: 200px;
            background-color: sienna;
        }

        .main {
            flex: 1;
            background-color: springgreen;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <aside class="left"></aside>
        <main class="main">
            <h1>flex布局</h1>
        </main>
        <aside class="right"></aside>
    </div>
</body>

</html>

圣杯布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .left {
            width: 100px;
            background-color: springgreen;
        }

        .right {
            width: 200px;
            background-color: steelblue;
        }

        .main {
            width: 100%;
            background-color: red;

        }



        /* 关键代码 */
        .left,
        .right,
        .main {
            float: left;
            position: relative;
            height: 200px;

        }

        .left {
            margin-left: -100%;
            left: -100px;
        }

        .container {
            padding-left: 100px;
            padding-right: 200px;
        }

        .right {
            margin-left: -200px;
            right: -200px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .left,
        .right,
        .main {
            min-height: 200px;
        }

        .left {
            width: 200px;
            background-color: thistle;
        }

        .main {
            background: #999;
            width: 100%;
        }

        .right {
            width: 300px;
            background-color: violet;
        }

        /*关键代码*/
        .left,
        .right,
        .main {
            float: left;
        }

        .main-inner {
            margin-left: 200px;
            margin-right: 300px;
        }

        .left {
            margin-left: -100%;
        }

        .right {
            margin-left: -300px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="main-inner">中心区</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

</html>


前端常见编程题二https://developer.aliyun.com/article/1494959

文章标签：
前端开发
关键词：
前端编程
可乐鸡翅kele
目录
相关文章
前端技术栈
|
7月前
|
缓存 前端开发 JavaScript
【面试题】4月面经 前端常考JS编程题
【面试题】4月面经 前端常考JS编程题
前端技术栈
47 1
祈澈菇凉
|
前端开发 JavaScript
常见的8个前端防御性编程方案
常见的8个前端防御性编程方案
祈澈菇凉
158 0
MrRobot
|
存储 前端开发 JavaScript
GIS前端编程-Leaflet插件发布
GIS前端编程-Leaflet插件发布
MrRobot
109 0
MrRobot
|
前端开发 JavaScript 定位技术
GIS前端编程-Leaflet插件扩展
GIS前端编程-Leaflet插件扩展
MrRobot
167 0
MrRobot
|
前端开发 JavaScript 定位技术
GIS前端编程-地理事件动态模拟
GIS前端编程-地理事件动态模拟
MrRobot
90 0
MrRobot
|
存储 前端开发 定位技术
GIS前端编程 地图常用操作
GIS前端编程 地图常用操作
MrRobot
196 0
前端徐徐
|
2月前
|
设计模式 前端开发 JavaScript
前端编程的异步解决方案有哪些？
本文首发于微信公众号“前端徐徐”，介绍了异步编程的背景和几种常见方案，包括回调、事件监听、发布订阅、Promise、Generator、async/await和响应式编程。每种方案都有详细的例子和优缺点分析，帮助开发者根据具体需求选择最合适的异步编程方式。
前端徐徐
88 1
土木林森
|
4月前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界！】VSCode + ESLint + Prettier：一键拯救Vue代码于水深火热之中，打造极致编程体验之旅！
【8月更文挑战第9天】随着前端技术的发展，保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误，Prettier保证风格统一。首先需安装VSCode插件及Node.js包，然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后，VSCode将自动应用规则，提升编码效率和代码质量。
土木林森
583 1
叫个什么名字
|
6月前
|
机器学习/深度学习 人工智能 前端开发
未来趋势下的前端开发：可视化编程的崛起
随着人工智能和机器学习技术的不断发展，前端开发领域也在逐渐迎来变革。本文探讨了未来趋势下前端开发的发展方向，重点介绍了可视化编程在前端开发中的应用和优势，以及对传统前端开发方式的影响。
叫个什么名字
137 4
你都不懂
|
6月前
|
前端开发 JavaScript 开发工具
Web网页前端教程免费：引领您踏入编程的奇幻世界
Web网页前端教程免费：引领您踏入编程的奇幻世界
你都不懂
60 3

热门文章

最新文章

  • 1
    前端分页插件pagination
  • 2
    [前端]jekyll+markdown+github搭建个人博客
  • 3
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 4
    前端程序员入门：先学Vue3还是Vue2？
  • 5
    前端 时间个性化 插件 jquery.timeago.js
  • 6
    GitHub Actions自动化部署前端项目指南
  • 7
    未读消息（小红点），前端与 RabbitMQ实时消息推送实践，贼简单~
  • 8
    你用过的网站前端优化的技术有哪些？
  • 9
    合格前端系列第四弹-如何监听一个数组的变化
  • 10
    wordpress页面前端添加编辑按钮
  • 1
    前端架构师需要具备什么能力以及代码能力？
    194
  • 2
    java中本地路径写成接口传输到前端
    53
  • 3
    前端框架与库 - jQuery基础与DOM操作
    36
  • 4
    前端如何学习Node.js及Node.js的主要用途
    78
  • 5
    前端框架与库 - Angular模块与依赖注入
    68
  • 6
    前端工程化：Webpack配置全攻略
    57
  • 7
    前端框架与库 - Angular基础：组件、模板、服务
    69
  • 8
    前端实现打字机的效果 -- typed库的使用
    161
  • 9
    手把手教你写一个简易的微前端框架​
    42
  • 10
    前端常见的性能优化方案？
    78

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 前端开发基础3：CSS3常见显示属性
  • 语言入门-1：环境构建
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解