日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

CSS 不需要清除浮動的圣杯布局~面試可能會問

作者：庇耳拉海萊 更新時間： 2022-07-13 編程語言

不需要清除浮動的圣杯布局

網上很多關于圣杯和雙飛翼布局的教程, 我看了下實現都是需要中間的三個元素 float 布局而且需要清除浮動. 但是真的需要三個元素都 float 嗎? 不清除浮動可以嗎?

先看效果
在這里插入圖片描述

HTML 

<header>header</header>
<main>
  <aside id="left">left</aside>
  <aside id="right">right</aside>
  <div id="main">main</div>
</main>
<footer>footer</footer>

HTML 的結構很清楚, 上中下分別是 header, main 和 footer, 和常見圣杯布局的不同是, main 中間區域和兩邊區域的位置.

從下圖中可以看出來的是, 中間的 div 從 main 的第一個元素變成了最后一個元素. 這樣寫的目的是什么? 因為我們想要 div 顯示在中間, 如果 div 前面的元素為 float, 那么后面的 div 自然就會正常顯示, 即水平填滿父容器寬度且上邊界和父元素的上邊界重合.

在這里插入圖片描述

在這里插入圖片描述

但是這樣問題又來了, 因為中間的 div 被兩側的遮擋住了, 別急, 馬上用請 CSS 幫忙.

CSS

首先重置 <body> 元素的默認 padding 和 margin 為 0, 并設置其高度為 100vh, 即瀏覽器視口 viewport 的高度.

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

接著, 設置 header 和 footer 的高度, 都固定為 70px.

header {
  height: 70px;
}
footer {
  height: 70px;
}

其次, 設置中間整個元素 <main> 的高度為父元素高度減去 header 和 footer 高度. 好了, 不需要清除浮動的原因出現了, 因為父元素的高度不是由子元素撐起的, 而是手動設置的.

main {
  height: calc(100vh - 140px);
}

接下來, 設置兩個 <aside> 元素分別向左和右 float, 寬度都是 100px, 高度和父容器相同.

#left {
  float: left;
  width: 100px;
  height: 100%;
}

#right {
  float: right;
  width: 100px;
  height: 100%;
}

最后的大難題的解決就是設置 <main> 中間 div 的左右 padding 分別為左側 <aside> 和右側 <aside> 的寬度, 就保證其不會被遮擋. 當然別忘了高度和父容器保持一致.

#main {
  margin-left: 100px;
  margin-right: 100px;
  height: 100%;
}

優化一下代碼, 為了防止窗口寬度很小導致 float 布局失效, 在屏幕寬度小于等于 300px(稍大于左右側區域寬度之和) 時不顯示左右側區域并取消 <main> 中間 div 的 margin.

@media screen and (max-width: 300px) {
  #main {
    margin: 0;
  }
  #left, #right {
    display: none;
  }
}

在這里插入圖片描述

感謝你看到這里, 祝福你也順利通過面試, 找到心儀的工作??

原文鏈接：https://blog.csdn.net/broken_promise/article/details/125564785

欄目分類
最近更新