Web前端面試指導(十七)：一個滿屏 品 字布局 如何設計?

時間：2023-09-18 03:00:01 | 來源：網(wǎng)站運營

時間：2023-09-18 03:00:01 來源：網(wǎng)站運營

Web前端面試指導(十七)：一個滿屏 品 字布局 如何設計?：標簽：

品字結(jié)構布局元素水平居中元素定位元素浮動Web前端面試題

版權聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。

題目點評

這道題目有可能是筆試題，有可能面談的時候進行敘述，如果是筆試題要求對css樣式代碼非常熟練，如果是面談敘述，就需要你的表達能力非常強，要抓住要點，把需要用到的技能點講清楚就可以了。

需要用到技術

1. 元素水平居中對齊

1) 使用margin對齊(推薦)


2) 使用left：50%

3) 使用text-align

2. 元素對相對窗口定位

1) 使用filxed（推薦）


2) 使用absolute定位

3) 使用html和body的width和height填?這個窗口

3. 元素左右定位

1) 使用float左右浮動


2) 使用絕對定位進行左右定位（推薦）

具體實現(xiàn)的代碼

html代碼


[html]

view plaincopy

1. <div class="main">
2. <div class="wrapper-up">
3. <div class="div-square-up"></div>
4. </div>
5. <div class="wrapper-down">
6. <div class="div-square-left"></div>
7. <div class="div-square-right"></div>
8. </div>
9. </div>

CSS樣式

[css]

view plaincopy

1. body{
2. height: 1200px;
3. }
4. .main {
5. position: fixed;
6. left: 0;
7. top: 0;
8. height: 100%;
9. width: 100%;
10. }
11. .wrapper-up {
12. height: 50%;
13. }
14. .wrapper-down {
15. height: 50%;
16. position: relative;
17. }
18. .div-square-up {
19. width: 50%;
20. margin: 0 auto;
21. border: 2px solid red;
22. height: 96%;
23. box-sizing: border-box;
24. }
25. .div-square-left {
26. position: absolute;
27. left: 0;
28. width: 48%;
29. height: 100%;
30. box-sizing: border-box;
31. border: 2px solid red;
32. }
33. .div-square-right {
34. position: absolute;
35. right: 0;
36. width: 48%;
37. height: 100%;
38. border: 2px solid red;
39. box-sizing: border-box;
40. }