點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

在日常項目開發中，在佈局方面有遇到哪些問題了？今天來一起看看CSS佈局有哪些小技巧，後續開發更輕鬆。本文主要通過簡單的示例，講述開發中遇到的佈局等問題，但不僅限於佈局相關，會有其他相關知識點。

CSS實用技巧第二講：佈局處理

rem自適應佈局

移動端使用rem佈局需要通過JS設置不同屏幕寬高比的font-size，結合vw單位和calc()可脫離JS的控制，代碼如下：

/* 基於UI width=750px DPR=2的頁面 */
html {
 font-size: calc(100vw / 7.5);
}

rem 頁面佈局, 不兼容低版本移動端，使用需謹慎。

overflow-x排版橫向列表

通過flexbox或inline-block的形式橫向排列元素，對父元素設置overflow-x:auto橫向滾動查看。注意場景： 橫向滾動列表、元素過多但位置有限的導航欄。

CSS實用技巧第二講：佈局處理

 

 
web秀

 
阿里巴巴

 
字節跳動

 
騰訊

 
百度

 
美團

 



 

 
web秀

 
阿里巴巴

 
字節跳動

 
騰訊

 
百度 

 
美團

 

scss樣式

.horizontal-list {
\twidth: 300px;
\theight: 100px;
\tul {
\t\toverflow-x: scroll;
\t\tcursor: pointer;
 margin: 0;
 padding: 0;
\t\t&::-webkit-scrollbar {
\t\t\theight: 6px;
\t\t}
\t\t&::-webkit-scrollbar-track {
\t\t\tbackground-color: #f0f0f0;
\t\t}
\t\t&::-webkit-scrollbar-thumb {
\t\t\tborder-radius: 5px;
\t\t\tbackground: linear-gradient(to right, #32bbff, #008cf4);
\t\t}
\t}
\tli {
\t\toverflow: hidden;
\t\tmargin-left: 10px;
\t\theight: 90px;
\t\tbackground-color: #00b7a3;
\t\tline-height: 90px;
\t\ttext-align: center;
\t\tfont-size: 16px;
\t\tcolor: #fff;
\t\t&:first-child {
\t\t\tmargin-left: 0;
\t\t}
\t}
}
.flex {
\tul {
\t\tdisplay: flex;
\t\tflex-wrap: nowrap;
\t\tjustify-content: space-between; 

\t}
\tli {
\t\tflex-shrink: 0;
\t\tflex-basis: 90px;
\t}
}
.inline {
\tmargin-top: 10px;
\theight: 102px;
\tul {
\t\toverflow-y: hidden;
\t\twhite-space: nowrap;
\t}
\tli {
\t\tdisplay: inline-block;
\t\twidth: 90px;
\t}
}

知識點解析：

1、display: flex佈局：又名“彈性佈局”，任何一個容器都可以指定為Flex佈局。詳細內容請點擊

2、滾動條樣式美化。

如何自定義滾動條樣式了？ 掌握這3個選擇器即可。

（1）、::-webkit-scrollbar 定義了滾動條整體的樣式；

（2）、::-webkit-scrollbar-thumb 滑塊部分；

（3）、::-webkit-scrollbar-track 軌道部分；

所以上面scss代碼中，我們書寫了這3個選擇器的樣式，改變了滾動條的樣式。

3、linear-gradient線性漸變。語法如下：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction用角度值指定漸變的方向（或角度）, color-stop1, color-stop2,...用於指定漸變的起止顏色。

to right的意思就是從左到右，從一個顏色過渡到另外一個顏色。

請看示例：

CSS實用技巧第二講：佈局處理

移動端1px邊框解決方案

在retina屏中，像素比為2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的邊框看起來比真的1px更寬。

我們可以通過偽類加transform的方式解決。

CSS實用技巧第二講：佈局處理

transform：用於元素進行旋轉、縮放、移動或傾斜，和設置樣式的動畫並沒有什麼關係，就相當於color一樣用來設置元素的“外表”。

詳細transform瞭解，請點擊：

左重右輕導航欄佈局

非常簡單的方式，flexbox橫向佈局時，最後一個元素通過margin-left:auto實現向右對齊。

請看示例：

 
HTML5

 
CSS3

 
JAVASCRIPT

 
TYPESCRIPT

 
THREE.JS

 
NODE


css樣式
.nav-list {
 display: flex;
 align-items: center;
 padding: 0 10px;
 width: 700px;
 height: 60px;
 background-color: #00b7a3;
}
.nav-list li {
 padding: 0 10px; 

 height: 40px;
 line-height: 40px;
 font-size: 16px;
 color: #fff;
 list-style: none;
}
.nav-list li + li {
 margin-left: 10px;
}
.nav-list li:last-child {
 margin-left: auto;
}
CSS實用技巧第二講：佈局處理
純CSS摺疊面板
 

 
 
 
 <article>
 <label>web秀/<label>
 
html
javascript
css
uni app

 /<article>
 <article>
 <label>今日頭條/<label>
 
新聞
圖片
視頻
養生

 /<article>
 <article>
 <label>阿里巴巴/<label>
 
淘寶
阿里雲
閒魚
天貓

 /<article>

scss樣式
.accordion {
\twidth: 300px;
\tarticle {
\t\tmargin-top: 5px;
\t\tcursor: pointer;
\t\t&:first-child {
\t\t\tmargin-top: 0;
\t\t}
\t}
\tinput {
\t\tdisplay: none; 

 padding: 0;
 margin: 0;
\t\t&:nth-child(1):checked ~ article:nth-of-type(1) p,
\t\t&:nth-child(2):checked ~ article:nth-of-type(2) p,
\t\t&:nth-child(3):checked ~ article:nth-of-type(3) p {
\t\t\tborder-bottom-width: 1px;
\t\t\tmax-height: 600px;
\t\t}
\t}
\tlabel {
\t\tdisplay: block;
\t\tpadding: 0 20px;
\t\theight: 40px;
\t\tbackground-color: #00b7a3;
\t\tcursor: pointer;
\t\tline-height: 40px;
\t\tfont-size: 16px;
\t\tcolor: #fff;
\t}
\tp {
\t\toverflow: hidden;
\t\tpadding: 0 20px;
 margin: 0;
\t\tborder: 1px solid #00b7a3;
\t\tborder-top: none;
\t\tborder-bottom-width: 0;
\t\tmax-height: 0;
\t\tline-height: 30px;
\t\ttransition: all 500ms;
\t}
}
 
CSS實用技巧第二講：佈局處理
純CSS Tabbar切換效果

 
 
 
 
 
 <main>
 

 
首頁

 
列表

 
其他

 
我的

 

 /<main>

scss樣式
*{
 padding: 0;
 margin: 0;
} 

.active {
\tbackground-color: #00b7a3;
\tcolor: #fff;
}
.tab-navbar {
\tdisplay: flex;
\toverflow: hidden;
\tflex-direction: column-reverse;
\tborder-radius: 10px;
\twidth: 300px;
\theight: 400px;
 margin: 100px auto;
\tinput {
\t\tdisplay: none;
\t\t&:nth-child(1):checked {
\t\t\t& ~ nav label:nth-child(1) {
\t\t\t\t@extend .active;
\t\t\t}
\t\t\t& ~ main ul {
\t\t\t\tbackground-color: #f13f84;
\t\t\t\ttransform: translate3d(0, 0, 0);
\t\t\t}
\t\t}
\t\t&:nth-child(2):checked {
\t\t\t& ~ nav label:nth-child(2) {
\t\t\t\t@extend .active;
\t\t\t}
\t\t\t& ~ main ul {
\t\t\t\tbackground-color: #44bb44;
\t\t\t\ttransform: translate3d(-25%, 0, 0);
\t\t\t}
\t\t}
\t\t&:nth-child(3):checked {
\t\t\t& ~ nav label:nth-child(3) {
\t\t\t\t@extend .active;
\t\t\t}
\t\t\t& ~ main ul {
\t\t\t\tbackground-color: #ff7632;
\t\t\t\ttransform: translate3d(-50%, 0, 0);
\t\t\t}
\t\t}
\t\t&:nth-child(4):checked {
\t\t\t& ~ nav label:nth-child(4) {
\t\t\t\t@extend .active;
\t\t\t}
\t\t\t& ~ main ul {
\t\t\t\tbackground-color: #00bbdd;
\t\t\t\ttransform: translate3d(-75%, 0, 0);
\t\t\t}
\t\t} 

\t}
\tnav {
\t\tdisplay: flex;
\t\theight: 40px;
\t\tbackground-color: #f0f0f0;
\t\tline-height: 40px;
\t\ttext-align: center;
\t\tlabel {
\t\t\tflex: 1;
\t\t\tcursor: pointer;
\t\t\ttransition: all 300ms;
\t\t}
\t}
\tmain {
\t\tflex: 1;
\t\tul {
\t\t\tdisplay: flex;
\t\t\tflex-wrap: nowrap;
\t\t\twidth: 400%;
\t\t\theight: 100%;
\t\t\ttransition: all 300ms;
\t\t}
\t\tli {
\t\t\tdisplay: flex;
\t\t\tjustify-content: center;
\t\t\talign-items: center;
\t\t\tflex: 1;
\t\t\tfont-weight: bold;
\t\t\tfont-size: 20px;
\t\t\tcolor: #fff;
\t\t}
\t}
}
 
CSS實用技巧第二講：佈局處理
最後推薦一個專欄文章，感謝小夥伴們多多支持，謝謝大家！