几道简单的面试题

你干嘛哎呀

已于 2023-03-02 20:58:59 修改

阅读量74

点赞数 2

于 2023-03-02 20:47:17 首次发布

本文链接：https://blog.csdn.net/dai_0907/article/details/129308721

版权

懒得进行整理,直接复制粘贴用HTML打开

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .hr {
               width: 300px;
               background-color: #000;
           }

           .hr.half-px {
               height: 0.5px;
           }

           .hr.one-px {
               height: 1px;
           }

           .hr.scale-half {
               height: 1px;
               transform: scaleY(0.5);
           }

           .hr.gradient {
               height: 1px;
               background: linear-gradient(0deg, #fff, #000);
           }

           .hr.boxshadow {
               height: 1px;
               background: none;
               box-shadow: 0 0.5px 0 #000;
           }

           .hr.svg {
               background: none;
               height: 1px;
               background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
           }

           .box {
               width: 0;
               height: 0;
               border-top: 0px solid transparent;
               border-bottom: 100px solid #f00;
               border-left: 100px solid transparent;
               border-right: 100px solid transparent;
               transform: scale(1, 1.732);
           }

           .fu {
               width: 400px;
               height: 400px;
               background-color: pink;
               /* position: relative; */
               /* 4.弹性布局,子元素可以不用设置宽高 */
               /* display: flex; */
               /* 主轴居中 */
               /* justify-content: center; */
               /* 侧轴居中 */
               /* align-items: center; */
               /* 5.table布局子元素可以不用设置宽高 */
               /* display: table-cell; */
               /* 垂直方向上居中对齐 */
               /* vertical-align: middle; */
               /* 文本对齐方式 */
               /* text-align: center; */
               /* 6.网格布局 */
               display: grid;
               align-items: center;
               justify-content: center;
           }

.zi {
               /* width: 100px;
               height: 100px; */
               background-color: #f00;
               /* position: absolute;
               left: 50%;
               top: 50%; */
               /* 1.需要给子元素设置宽高 */
               /* margin-left: -50px;
               margin-top: -50px; */
               /* 2.不需要给子元素设置宽高 */
               /* transform: translate(-50%, -50%); */
               /* 3.子元素需要宽高 */
               /* left: 0;
               top: 0;
               right: 0;
               bottom: 0;
               margin: auto; */
               display: inline-block;
           }
       </style>
   </head>
   <body>
       
       
       <p>0.5px</p>
       <div class="hr half-px"></div>
       <p>1px</p>
       <div class="hr one-px"></div>
       
       <p>1px + scaleY(0.5)</p>
       <div class="hr scale-half"></div>
       
       <p>linear-gradient</p>
       <div class="hr gradient"></div>
       
       <p>box-shadow</p>
       <div class="hr boxshadow"></div>
       
       <p>svg</p>
       <div class="hr svg"></div><br><br><br>

<div class="box">
           
       </div>

<div class="fu">
           <div class="zi">子元素</div>
       </div>

<!-- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效-->

<!-- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
} -->

</body>
</html>

第一种

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>This is title</title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

           html,
           body {
               height: 100%;
           }

           .container {
               display: flex;
               height: 100%;
               flex-direction: column;
           }

           .top {
               height: 100px;
               background-color: #a9ff29;
           }

           .middle {
               flex: 1;
               overflow: auto;
               background-color: #ffb91b;
           }

.bottom {
               height: 50px;
               background-color: #40c3ff;
           }
       </style>
   </head>
   <body>
       
       <div class="container">
           <div class="top">上</div>
           <div class="middle">中</div>
           <div class="bottom">下</div>
       </div>
   </body>
</html>

第二种

<!doctype html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>This is title</title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

           html,
           body {
               height: 100%;
           }

           .container {
               display: grid;
               height: 100%;
               grid-template-rows: 100px auto 50px;
           }

           .top {
               background-color: #a9ff29;
           }

           .middle {
               background-color: #ffb91b;
           }

           .bottom {
               background-color: #40c3ff;
           }
       </style>
   </head>

第三种

<!doctype html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>This is title</title>
       <style>
           * {
               margin: 0;
               padding: 0;
           }

           .top {
               height: 100px;
               background-color: #a9ff29;
           }

           .middle {
               height: calc(100vh - 150px);
               background-color: #ffb91b;
           }

.bottom {
               height: 50px;
               background-color: #40c3ff;
           }
       </style>
   </head>
   <body>
       
       <div class="container">
           <div class="top">上</div>
           <div class="middle">中</div>
           <div class="bottom">下</div>
       </div>
   </body>
</html>