几道常考的前端面试题（蘑菇街）系列一

最新推荐文章于 2023-09-08 22:30:32 发布

zbhzbn

最新推荐文章于 2023-09-08 22:30:32 发布

阅读量1.6k

点赞数 1

分类专栏：网页布局

本文链接：https://blog.csdn.net/zbhzbn/article/details/47804791

版权

网页布局专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天，偶然在网上看到几道蘑菇街的笔试题，感觉这些都是前端必考必会的一些常规题，之前做阿里笔试题的时候也碰到其中几道，特此哈拿来给自己练手。

好棒啊，CSDN写博客，前面不小心关了页面，都给我自动保存了，赞一个!!!

自己写的答案，有不对的，欢迎大家指正，或者有哪些可以完善的地方，也希望小伙伴们多意见哦！！！

1. position属性值：

1)static 2) absolute 3)relative 4)fixed 5)inherit 各值的感化是个什么意思？我写一下各值的作用和区别吧。

1)static ：是一个默认值，使元素出现在正常的文档流中。left,bottom,right,top,z-index都没用，没有定位。

2) absolute ：生成绝对定位的元素，但又是相对的，相对于static定位以外的第一个父元素进行定位。脱离正常的文档流

3)relative ：生成相对定位的元素，相对于它在文档流中的正常位置进行定位。没有脱离文档流

4)fixed ：生成绝对定位的元素，是相对于浏览器窗口定位的。脱离正常的文档流

5)inherit：从父元素继承position属性的值。

2. 两列等高，左列固定宽度300px,右列宽度自适应。

方法一：采用弹性盒布局法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左列定值，右列宽度自适应（弹性盒布局法）</title>
    <style>
        .main{ width: 100%; height: 600px; display: -webkit-box;}
        .left{ width: 300px; height: 600px; border: 3px solid #FF1B79; -webkit-box-flex: 0;}
        .right{ height: 600px; border: 3px solid #02A6E0;-webkit-box-flex:1;}
    </style>
</head>
<body>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

昨天下午写的，后来去跟室友过七夕了，没有写完。这个七夕节跟我没半毛钱关系，一整天，没花，没礼物，没电话，没短信，忧伤.......

不过，有室友陪着，嘻嘻，两个好姐妹一起过的七夕也是难忘和甜蜜的，喜欢的包包，喜欢的秋冬装，惬意的晚饭，感谢有你@谊.......