溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹CSS魔法和布局示例，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
前言：布局和樣式，是每個前端的必修課。在日常的工作中，也會碰到一些特定場景的布局需求，配合上樣式，就能實現一些神奇的效果。我搜羅了一些日常開發中遇到的布局，以及瀏覽各大網站時碰巧發現的神奇特效寫法，在此做個分享。
由于篇幅原因，會分為 2 篇。今天，會先介紹一些有趣而又實用的布局的寫法。之后的一篇，將展現樣式的神奇魔法。
懶加載占位圖自適應
在商城中展示商品圖片時，如果圖片較多，一種比較好的體驗是：會先有一個占位圖，目的是為了讓頁面無抖動，也就是所謂的圖片懶加載效果。但是，當遇到適配時就比較頭痛，特別是手機的橫豎屏切換。如果是通過 JavaScript 計算的話，就可能會出現抖動現象。
本著能用 CSS，就不用 JS 去實現的原則，就有了下面這種方案：
<div class="img-ratio">
<img src="http://via.placeholder.com/640x384">
</div>.img-ratio {
width: 100%;
position: relative;
padding-top: 75%;
}
.img-ratio > img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}可以適配不同屏幕，只要 UI 提供一張 4:3 的占位圖即可。下圖展示了不同寬高，但比例相同的 2 張圖，都能完美地居中顯示。
它的原理是：
移動端的界面，寸土寸金。有時為了控制屏幕的滾動長度，會將一些模塊橫向排列。但是，橫向排列會產生一些布局問題。
比如，移動端的滾動條樣式，依賴與手機瀏覽器，各不相同。一種解決方案是：把滾動軸隱藏掉，但不能 overflow-x:hidden;，不然就滾不動了。然后算好每一個橫向的塊的寬度，讓最右側的塊露出一部分，這樣用戶就知道右側的屏幕之外還有內容，可以橫向滑動。
又如果橫向滾動的寬度是未知的，因為可能會隨著業務的需要，改變橫向模塊的個數，那么橫向排布就沒法用 float 了。因為用了浮動，就得知道整個橫向滾動的寬度，整個的寬度要比浮動塊累加起來的寬度更寬，才能保證浮動不換行。
所以，就有了下面這樣的寫法：
<div class="wrapper">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>.wrapper {
width: 340px;
height: 80px;
overflow: hidden;
}
.wrapper ul {
height: 96px;
width: 100%;
white-space: nowrap;
overflow-x: scroll;
padding: 0;
margin: 0;
}
.wrapper li {
display: inline-block;
width: 80px;
height: 80px;
background-color: #ddd;
line-height: 80px;
text-align: center;
font-size: 20px;
margin-right: 10px;
}它的思路是：ul 設置 white-space:nowrap;，li 設置 display:inline-block;。最外層的 p 利用高度差，把橫向滾動條藏起來。
一些官網，有頂部導航欄，導航欄的內容區往往需要居中展示，兩旁則留白，導航欄的下方可能還有根線或者陰影，作為區分頂部與主體內容。
.center-float {
float: left;
position: relative;
left: 50%;
}
.center-float > ul {
position: relative;
left: -50%;
}這是居中浮動的一種做法，再配合相對定位。
當頁面主內容區高度不夠時，footer 依然顯示在最下面。這里當然不是指 position: fixed，footer是緊跟在內容區下方的。有 2 種方法。
html 結構如下：
<html>
<body>
<div id="content">....</div>
<div id="footer">....</div>
</body>
</html>html, body {
height: 100%;
}
$footer-height: 30px;
#content {
min-height: 100%;
margin-bottom: -$footer-height;
padding-bottom: $footer-height;
}
#footer {
line-height: $footer-height;
text-align: center;
}$footer-height: 30px;
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
#content {
flex: 1;
}
#footer {
line-height: $footer-height;
text-align: center;
}一些傳統的門戶網站，它們的主內容區寬度大致為 980px 或 1000px 這樣的經典寬度。有時候，會把較寬的圖片作為整體背景圖，居中放置，并且不要橫向滾動軸，可以這么做：
.wrapper {
min-width: 1000px;
height: 800px;
background: url(test.jpg) no-repeat center top;
}
.mainContent {
position: relative;
width: 1000px;
margin: 0 auto;
}偽元素也能用來實現居中么？當時看到的一感覺就覺得挺神奇的，看下面這個例子：
<div class="wrapper">
<img src="test.png">
</div>.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
text-align: center;
}
.wrapper::after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.wrapper > img {
vertical-align: middle;
}水平方向很好理解。垂直方向，可以理解為 ::after 把 img 往下拉到了中間。
以上是“CSS魔法和布局示例”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
