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

前端常见编程题一

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

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
目录
相关文章
答神~
|
4月前
|
前端开发 JavaScript API
【第14期】一文读懂前端NueJS框架
【第14期】一文读懂前端NueJS框架
答神~
249 0
sunrr
|
3天前
|
缓存 前端开发 JavaScript
前端基础知识
【5月更文挑战第8天】前端基础知识
sunrr
15 5
可乐鸡翅kele
|
13天前
|
存储 前端开发 JavaScript
前端常见编程题二
前端常见编程题二
可乐鸡翅kele
17 2
答神~
|
4月前
|
前端开发 JavaScript API
【第15期】一文读懂前端Astro框架
【第15期】一文读懂前端Astro框架
答神~
187 0
游客762btuqu5wybw666
|
2月前
|
缓存 前端开发 JavaScript
现代Web开发中的前后端分离技术探究
本文旨在探讨现代Web开发中的前后端分离技术，包括前端框架、后端接口设计、数据交互等方面。通过深入分析，我们将了解如何优化开发流程、提高性能和用户体验，以及如何选择适合项目需求的技术栈。
游客762btuqu5wybw666
34 0
维李设论
|
12月前
|
Web App开发 前端开发 JavaScript
前端编程题
前端编程题
维李设论
121 0
乖不如野
|
前端开发 JavaScript 容器
前端bookstrap学习
前端bookstrap学习
乖不如野
121 0
小满zs
|
存储 JavaScript 前端开发
学习前端1
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
小满zs
72 0
征途黯然。
|
移动开发 前端开发 JavaScript
前端入门 前端自学路线 web开发前端如何学习
前端入门 前端自学路线 web开发前端如何学习
征途黯然。
200 0
前端入门 前端自学路线 web开发前端如何学习
bigerfe
|
设计模式 缓存 运维
前端“老油条”给初学者的一些建议
这篇文章主要是介绍下现有的一些大厂的工作模式以及使用的技术栈以及经验，如果你是高手的话那可以忽略了，如果是初学者我建议是可以看看的。可以作为一个初步了解，可以从侧面看出自己应该学习哪些技术和知识，学习更多有用的东西，目标更加的明确。
bigerfe
90 0
前端“老油条”给初学者的一些建议

热门文章

最新文章

  • 1
    Maven 中央仓库地址
  • 2
    【SSL】OV、DV和EV证书的区别
  • 3
    OLAP与OLTP介绍
  • 4
    大数据上手实战！《Elasticsearch 实战进阶营》第二季限时免费报名啦
  • 5
    tr命令
  • 6
    JavaScript理解(转载)
  • 7
    shell重定向小记
  • 8
    CentOS7 yum lamp 虚拟主机配置 lamp各组件简单影响性能的参数调整--for 一定的环境需求
  • 9
    【SICP练习】49 练习2.17
  • 10
    如何让Pl/Sql查出的某个值可编辑？
  • 1
    如何修改NFT的元数据
    36
  • 2
    【机器学习】噪声数据对贝叶斯模型有什么样的影响？
    29
  • 3
    rabbitmq插件升级-延时队列为列
    25
  • 4
    【机器学习】比较朴素贝叶斯算法与逻辑回归算法
    23
  • 5
    如何解决Linux时差问题
    21
  • 6
    rabbitmq安装erlang环境后没生效
    20
  • 7
    高性能代码如何编写？-2
    21
  • 8
    高性能代码如何编写？-1
    17
  • 9
    【机器学习】朴素贝叶斯分类器的缺点是什么？
    17
  • 10
    【机器学习】朴素贝叶斯分类器的优点是什么？
    15

    • 相关课程

    更多
  • 零基础学前端HTML+CSS
  • 网站性能前端监控课程
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • Java面向对象开发
  • 5天玩转Java面向对象编程
  • Java面向对象编程

    • 相关电子书

    更多
  • 2021前端热门技术解读
  • 富途web前端组件化实践
  • 《前端智能化实践》——逻辑代码生成

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 语言入门-1：环境构建
  • 前端开发基础1：前端开发环境的安装和配置
  • 使用Java面向对象编写网络通信程序应用
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）