本篇文章將分享一些大家未必知道且超級實用的純CSS佈局排版技巧，實現一些常見或特殊的佈局排版。
開發每一張網頁都離不開佈局排版，基於良好佈局排版打下基礎，才能讓後續的開發更順利。當然不能停留在IExplorer時代那種限制思維上，沒辦法解決的佈局排版都用JS實作。今時不同往日，現代CSS屬性能更好地快速實現各種佈局排版，節約更多時間去摸魚。
不過按照筆者目前了解的情況來看，大部分同學即使在無需兼容IExplorer的情況下還是遵循CSS JS的方式完成一些常見或特殊的佈局排版。從HTML/CSS/JS前端三劍客的定位來看，HTML映射網頁的結構，CSS映射網頁的表現，JS映射網頁的行為。
佈局排版指將圖形、文字、圖像、媒體等視覺化資訊元素在頁面佈局上調整位置、尺寸等屬性使頁面佈局變得條理化的過程。大部分同學認為佈局排版就是幾個合理的CSS屬性隨便拼湊在一起，但多數情況即使實現也會有瑕疵，此時就可能使用JS介入。
從佈局排版的特徵可知它屬於表現範疇，因此筆者認為大部分佈局排版都能使用純CSS 完成，無需JS介入。
本文秉承能使用CSS實現的效果都優先使用CSS的原則，為大家講解筆者如何巧妙運用各種純CSS開發技巧完成一些常見或特殊的佈局排版。
在進入主題前，筆者總結出佈局排版一些必備屬性，這些屬性能快速搭建整體效果，再通過一些常用選擇器加以修飾達到完美效果。看似簡單，但使用起來不一定完全駕馭。
必備屬性都是一些幾何屬性，主要用於宣告位置和尺寸。
float
position /left/right/top/bottom/z-index
display:flex/inline-flex、 flex系列屬性
box-sizing/margin/padding/border/width/height
選擇器因CSS模組眾多而派生出的數量也眾多，若無特別方式記熟這些選擇器對應的功能，也很難將其發揮到最大作用。
筆者根據選擇器的功能劃分出八大類，每個類別的選擇器都能在一個應用場景裡互相組合，記熟這些類別的選擇器，相信就能將選擇器發揮到最大作用，也能游刃有餘將其應用到一些常見或特殊的佈局排版裡。
佈局排版可能只應用在某些選擇器，但也不妨礙大家透過以下歸類方式記憶。選擇器作為CSS的重要組成部分，比起屬性組合會有更多的玩法。
基礎選擇器
| 選擇器 | 別名 | ##說明#版本 | 常用 | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
tag | 標籤選擇器#指定類型的 | 標籤 | 1√ | |||||||||||||||||||
##id | ID選擇器指定身分的 | 標籤 | 1√ | |||||||||||||||||||
|
指定類別名稱的 | 標籤
|
√ | |||||||||||||||||||
|
所有類型的 | 標籤
|
#√ |
| 選擇器 | #說明 | #版本 | 常用 | |
|---|---|---|---|---|
elemP elemC |
後位選擇器 |
元素的後代元素
|
1 | √ |
elemP>elemC |
|
|
||
|
|
子代選擇器 | 元素的子代元素 | 2 |
| #elem1 elem2 | 相鄰同胞選擇器
| 同胞元素2 |
elem1~elem2
| 元素後面的 | 同胞元素3 | #√ | ||
|---|---|---|---|---|
|
|
# #集合選擇器 |
選擇器 | |
##版本 |
|
elem1,elem2 |
並集選擇器 | # #多個指定的 |
1√
| elem.class | #交集選擇器 | 指定類別名稱的 | |
|---|---|---|---|
√ |
| #條件選擇器||
##說明 |
|
說明 | 版本 |
|
|
||
常用 |
| :lang#指定標記語言的 | 元素|
#2 |
| :dir()#指定寫方向的 | 元素|
4 |
| :has包含指定元素的 | 元素|
4 |
| :is指定條件的 | 元素|
4 |
:not
|
非指定條件的 | 元素|
√ |
#:where | 元素4 |
狀態選擇器
| 選擇器 | 說明 | 版本 | #常用 |
|---|---|---|---|
:active |
#滑鼠啟動的元素
|
1 | × |
:hover |
#滑鼠懸浮的元素
|
1 | √ |
:link |
#未造訪的連結元素
|
1 | × |
:visited |
#已造訪的連結元素
|
1 | × |
:target |
#目前錨點的元素
|
3 | × |
:focus |
#輸入聚焦的表單元素
|
2 | √ |
:required |
輸入必填的表單元素
|
3 | √ |
:valid |
輸入合法的表單元素
|
3 | √ |
:invalid |
.輸入非法的表單元素 |
3 | √ |
:in-range |
輸入範圍以內的表單元素
|
3 | × |
#:out-of-range |
輸入範圍以外的表單元素
|
3 | × |
#:checked |
選項選取的表單元素
|
3 | √ |
#:optional |
|
||
表單元素 | 3× |
#:enabled | |
表單元素 | 3× |
:disabled | |
表單元素 | 3√ |
:read-only | |
表單元素 | 3#× |
##:read- write | |
| ##× |
#:target-within | |
元素 | 4##× |
:focus-within | |
##4 | √ |
:focus-visible | 輸入聚焦的 |
##4 |
| :blank輸入為空的 | 表單元素|
4 |
| :user-invalid#輸入合法的 | 表單元素|
4 |
| :indeterminate選項未定的 | 表單元素|
4 |
| :placeholder-shown##佔位顯示的 | 表單元素 |
√ |
|
瀏覽中的 | 元素 |
× |
|
已瀏覽的 | 元素 |
× |
|
未瀏覽的 | 元素 |
× |
|
開始播放的 | 媒體元素 |
× |
|
##暫停播放的 | 媒體元素
結構選擇器
| 選擇器 | 說明 | 版本 | #常用 |
|---|---|---|---|
:root |
#文件的根元素
|
3 | × |
:empty |
#無子元素的元素
|
3 | √ |
:nth-child(n) |
元素中指定順序索引的元素
|
3 | √ |
:nth-last-child(n) |
在元素中指定逆序索引的元素
|
3 | × |
:first-child | 元素中為首的元素
|
2 | √ |
:last-child |
元素中為尾的元素
|
#3 | √ |
##:only- child | 父元素只有該元素的元素 | #3##√ | |
| 標籤
| ##√||
#標籤中指定逆序索引的標籤 |
3 | ×||
標籤中為首的標籤 |
3 | √||
標籤中為尾標籤 |
3 | √||
父元素僅有該標籤的標籤 |
3 | √
| #版本 | 常用 | ||
|---|---|---|---|
#指定屬性的元素 |
2##√ | [attr=val] | |
屬性等於指定值的元素
| ##2 #√ |
[attr*=val] | |
元素 | 3√ |
[attr^=val] | |
元素 | 3√ |
[attr$=val] | |
元素 | 3√ |
[attr~=val] | |
元素(不建議使用)
| 2× |
[attr|=val] | |
元素(不建議使用)
| 2× |
偽元素 |
#選擇器
| 常用 | ||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
內容 | 2√ |
::after | ||||||||||||||||||||
內容 | 2√ |
#::first-letter | ||||||||||||||||||||
首字母 | 1× |
::first-line | ||||||||||||||||||||
頭行 | 1× |
##::selection | ||||||||||||||||||||
|
#× |
##:: backdrop | 全螢幕模式的 | |||||||||||||||||||
##4##×
|
|
表單元素的 | 佔位 | |||||||||||||||||||
##√ |
技巧有了上述前置知識，接下來跟著筆者體驗一次如何巧妙運用各種純CSS開發技巧完成一些 主體佈局主體佈局指大部分情況下通用且具備統一特徵的佔位佈局。掌握 全螢幕佈局經典的全螢幕佈局由 <div class="fullscreen-layout">
<header></header>
<main></main>
<footer></footer>
</div>登入後複製
三部分統一宣告 .fullscreen-layout {
position: relative;
width: 400px;
height: 400px;
header,
footer,
main {
position: absolute;
left: 0;
right: 0;
}
header {
top: 0;
height: 50px;
background-color: #f66;
}
footer {
bottom: 0;
height: 50px;
background-color: #66f;
}
main {
top: 50px;
bottom: 50px;
background-color: #3c9;
}
}登入後複製
使用 .fullscreen-layout {
display: flex;
flex-direction: column;
width: 400px;
height: 400px;
header {
height: 50px;
background-color: #f66;
}
footer {
height: 50px;
background-color: #66f;
}
main {
flex: 1;
background-color: #3c9;
}
}登入後複製 若 div {
overflow: hidden;
height: 100%;
}登入後複製 兩列佈局經典的兩列佈局由 <div class="two-column-layout">
<div class="left"></div>
<div class="right"></div>
</div>登入後複製
左列宣告 .two-column-layout {
width: 400px;
height: 400px;
.left {
float: left;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
margin-left: 100px;
height: 100%;
background-color: #66f;
}
}登入後複製
左列宣告同上，右列宣告 .two-column-layout {
width: 400px;
height: 400px;
.left {
float: left;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
overflow: hidden;
height: 100%;
background-color: #66f;
}
}登入後複製 登入後複製
使用 .two-column-layout {
width: 400px;
height: 400px;
.left {
float: left;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
overflow: hidden;
height: 100%;
background-color: #66f;
}
}登入後複製 登入後複製 三列佈局經典的三列佈局由 <div class="three-column-layout">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>登入後複製 為了讓右列寬度自適應計算，就不使用
.three-column-layout {
width: 400px;
height: 400px;
.left {
float: left;
width: 50px;
height: 100%;
background-color: #f66;
}
.center {
float: left;
width: 100px;
height: 100%;
background-color: #66f;
}
.right {
overflow: hidden;
height: 100%;
background-color: #3c9;
}
}登入後複製
.three-column-layout {
display: flex;
width: 400px;
height: 400px;
.left {
width: 50px;
background-color: #f66;
}
.center {
width: 100px;
background-color: #66f;
}
.right {
flex: 1;
background-color: #3c9;
}
}登入後複製 圣杯布局/双飞翼布局经典的圣杯布局和双飞翼布局都是由
float和margin负值将其拉回与中间列处在同一水平线上
padding为左右列留出空位，将左右列固定在空位上<li>双飞翼布局：中间列插入子节点并声明margin为左右列让出空位，将左右列固定在空位上
由于浮动节点在位置上不能高于前面或平级的非浮动节点，否则会导致浮动节点下沉。因此在编写HTML结构时，将中间列节点挪到右列节点后面。 <div class="grail-layout-x">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>登入後複製 .grail-layout-x {
padding: 0 100px;
width: 400px;
height: 400px;
.left {
float: left;
margin-left: -100px;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
float: right;
margin-right: -100px;
width: 100px;
height: 100%;
background-color: #66f;
}
.center {
height: 100%;
background-color: #3c9;
}
}登入後複製
HTML结构大体同上，只是在中间列里插入一个子节点 <div class="grail-layout-y">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<div></div>
</div>
</div>登入後複製 .grail-layout-y {
width: 400px;
height: 400px;
.left {
float: left;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
float: right;
width: 100px;
height: 100%;
background-color: #66f;
}
.center {
margin: 0 100px;
height: 100%;
background-color: #3c9;
}
}登入後複製
使用flex实现 <div class="grail-layout">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>登入後複製 .grail-layout {
display: flex;
width: 400px;
height: 400px;
.left {
width: 100px;
background-color: #f66;
}
.center {
flex: 1;
background-color: #3c9;
}
.right {
width: 100px;
background-color: #66f;
}
}登入後複製 均分布局经典的均分布局由 <div class="average-layout">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>登入後複製 .one {
background-color: #f66;
}
.two {
background-color: #66f;
}
.three {
background-color: #f90;
}
.four {
background-color: #09f;
}登入後複製
每列宽度声明为相等的百分比，若有4列则声明 .average-layout {
width: 400px;
height: 400px;
div {
float: left;
width: 25%;
height: 100%;
}
}登入後複製
使用flex实现会更简洁。节点声明 .average-layout {
display: flex;
width: 400px;
height: 400px;
div {
flex: 1;
}
}登入後複製 居中布局居中布局由
在此直接上一个目前最简单最高效的居中方式。 <div class="center-layout">
<div></div>
</div>登入後複製 .center-layout {
display: flex;
width: 400px;
height: 400px;
background-color: #f66;
div {
margin: auto;
width: 100px;
height: 100px;
background-color: #66f;
}
}登入後複製 自适布局自适布局指相对视窗任何尺寸都能占据特定百分比的占位布局。 搭建
1vw表示1%视窗宽度<li>1vh表示1%视窗高度<li>1vmin表示1%视窗宽度和1%视窗高度里最小者<li>1vmax表示1%视窗宽度和1%视窗高度里最大者视窗宽高在JS里分别对应 /* 基于UI width=750px DPR=2的网页 */
html {
font-size: calc(100vw / 7.5);
}登入後複製 上述代码使用
+、-、*、/作为运算符号<li>运算顺序：遵循加减乘除运算顺序，可用()提升运算等级<li>符号连接：每个运算符号必须使用空格间隔起来<li>混合计算：可混合不同计量单位动态计算第三点尤为重要，若未能遵守，浏览器直接忽略该属性。 上述 在SPA里有遇过因为有滚动条或无滚动条而导致页面路由在跳转过程里发生向左或向右的抖动吗？这让强迫症患者很难受，此时可用 .elem {
padding-right: calc(100vw - 100%);
}登入後複製 不直接声明 有了
<div class="modal">
<div class="modal-wrapper"></div>
</div>登入後複製 .modal {
display: flex;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, .5);
&-wrapper {
width: 50vw;
height: 200px;
background-color: #f66;
}
}登入後複製 当然使用
<ul class="selfadaption-layout">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</ul>登入後複製 .selfadaption-layout {
width: 200px;
height: 567px;
.box-1 {
height: 123px;
background-color: #f66;
}
.box-2 {
height: 15%;
background-color: #3c9;
}
.box-3 {
height: calc(100% - 123px - 15%);
background-color: #09f;
}
}登入後複製 吸附布局吸附布局指相对视窗任何滚动都能占据特定位置的占位布局。视窗滚动到特定位置，布局固定在该位置，后续不随视窗滚动而滚动。该布局产生的效果俗称 在 JS實現吸附效果的程式碼在網路上一搜一大堆，更何況筆者喜歡耍CSS，在此就不貼相關的JS程式碼了。在此推薦一個很少見很少用的CSS屬性 簡單回顧
|
以上是8個值得了解的純CSS版排版技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
