北京知道創宇前端筆試(一) Flexible Box(可伸縮框屬性)

時間 2019-11-30

標籤北京知道前端筆試 flexible box 可伸縮屬性欄目快樂工作简体版

原文原文鏈接

　　可伸縮框屬性 boxhtml

　　自誇大白一隻，昨天筆試了創宇的前端，天一直下着雨，趕到的時候，整我的都很差了，成都七月的天氣哇......前端

　　廢話很少說，大體說一下這道題，考察的是CSS3.0中的 box-flex屬性，自適應性，因爲以前只是簡單的看了CSS3.0 因此當時，仍是用CSS2.0作的。。。。。。
web

回來以後感受應該和小夥伴們共勉一下，順便補全下知識。瀏覽器

　　題目要求以下圖所示：（ps：本身用附件中的picture畫，勉強能夠看吧 \(^o^)/~）ide

要求：實現下面的HTML與CSS 用FLexbox，不用考慮IE6的兼容性，right部分大小是自適應的，left：width=100px。題目大體的意思就是這些。flex

須要知道了解的知識：spa

CSS3 box-flex 屬性瀏覽器支持

目前沒有瀏覽器支持 box-flex 屬性。3d

Firefox 支持替代的 -moz-box-flex 屬性。code

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 屬性。htm

注意：可伸縮元素可以隨着框的縮小或擴大而縮寫或放大。只要框中有多餘的空間，可伸縮元素就會擴展來填充這些空間。

功能實現:

HTML Code：

1 <html>
2 <body>
3      <div id="top"></div>
4      <div class="wrap">
5     <div id="left"></div>
6     <div id="right"></div>
7 </div>
8 </body>
9 </html>

View Code

CSS Code:

 1   <style>
 2         *
 3         {
 4             margin: 0px;
 5             padding:0px;
 6         }
 7         #top
 8         {
 9             width:700px;
10             height:100px;
11             background:yellow;
12 
13         }
14         .wrap
15         {
16             width:700px;
17             height:200px;
18             display:box;
19             display:-moz-box;
20             display:-webkit-box;
21         }
22 
23         #left
24         {
25             background:#ff0000;
26             width:100px;
27         }
28         #right
29         {
30             background:green;
31             -moz-box-flex:1;
32             -webkit-box-flex:1;
33             box-flex:1;
34         }
35     </style>