8 Pure CSS Layout Techniques Worth Knowing-CSS Tutorial-php.cn

This article will share some pure CSS layout and typesetting techniques that may not be known to everyone but are super practical, to achieve some common or special layouts.

8 Pure CSS Layout Techniques Worth Knowing

Developing every web page is inseparable from layout and typesetting. Only by laying the foundation for a good layout and typesetting can we make subsequent Development is smoother. Of course, we cannot stay in the limited thinking of the IExplorer era. The layout and typesetting that cannot be solved are all implemented with JS. Today is different from the past. Modern CSS properties can better and quickly implement various layouts and layouts, saving more time to fish. However, according to the author's current understanding, most students still follow the

CSS JS

method to complete some even if they do not need to be compatible with IExplorer Common or special layout layout. From the perspective of the positioning of the three front-end Musketeers of HTML/CSS/JS, HTML maps the structure of the web page, and CSS maps the ## of the web page. #Performance, JSMap the behavior of the web page. Layout and typesetting

refers to adjusting the

position, size and other attributes of visual information elements such as graphics, text, images, and media on the page layout. The process of page layout becoming organized. Most students think that layout is just a few reasonable CSS properties put together casually, but in most cases there will be flaws even if implemented, and JS may be used to intervene. It can be seen from the characteristics of layout and typesetting

that it belongs to the

expression category, so the author believes that most layout and typesetting can use pure CSS Complete, no JS intervention required. This article adheres to the principle of giving priority to CSS

for effects that can be achieved using CSS, and explains how the author skillfully uses various pure CSS development techniques to complete some

common or special layouts typesetting. Attributes

Before entering the topic, the author summarizes Layout and typesetting

Some necessary attributes, these attributes can quickly build the overall effect, and then through Some common selectors are modified to achieve perfect results. It seems simple, but it may not be completely mastery to use.

Required attributes are some geometric attributes, mainly used to declare position

and

size .

：float##Positioning layout
position /left/right/top/bottom/z-indexFlexible layout
display:flex/inline-flex、 flex series propertiesBox model
box-sizing/margin/padding/border/width/heightThe number of selectors derived from CSS modules

The author divides the selectors into eight categories based on their functions. The selectors of each category can be combined with each other in an application scenario. If you memorize the selectors of these categories, I believe you can maximize the use of the selectors. Function, it can also be applied to some common or special layouts with ease.

Layout may only apply to certain selectors, but it does not prevent everyone from memorizing it through the following classification methods. As an important part of CSS, selectors have more ways to play than attribute combinations.

Basic selector

SelectorAlias##tagTag selector1 ID selector 1Class selector1Wildcard selector2

Hierarchical selector

Description	Commonly used
`Specify the type of` tag	`√`	id
`Specifies the identity's` tag	`√`	.class
`Specifies the` tag of the class name	`√`	*
tags of all types	`√`

##Descendant elements of 1√##elemP>elemCChildren selector elementelem1 elem2Adjacent sibling selectorSibling element##elem1~elem2 sibling elements after the Collection selector

Selector	Alias	Description	Version
`elemP elemC`	`Descendant selector`	# element
	#Children element of	2	√
	Element adjacent	2	√
Universal sibling selector# The	`## element`	3√

##Selector

AliasDescriptionVersionCommonly used##elem1,elem2Union selector elementsIntersection selector√Conditional selector


Multiple specified	1	√	##elem.class
`Specifies the` element of the class name	`1`

Selector
Description

VersionCommonly usedSpecifies the element of the markup language×##:dir()Element## that specifies the writing direction #44##4 element with non-specified conditions 4# element specifying the condition 4element4## link element of #href4 link elements that contain and are absolute addresses 4

:lang

2

× :has element that contains the specified element

× :is # element# that specifies the condition

× :not

√ :where

× :scope #Specify As a reference point

× :any-link all containing

× ##:local-link All href

Status selector

Enter the required 3√Enter legal 3√Input illegal 3√3×Input range 3×##:checked form element##:optional×##:enabled:disabled:read-only:read- writeThe 4The internal form element is in the focused state4Enter the focused 4The input is empty 4Enter valid 4Options are undetermined4##:placeholder-shownplaceholder-shownform element:current()Element## in browsing ×Browsed element ×UnbrowsedElement×Start playingMedia Elements×pausedMedia Elements×

Structure selector

Selector	Description	Version	Commonly used
`:active`	Mouse activated `element`	1	×
`:hover`	`element`	1	√
`:link`	Unvisited `link element`	1	×
`:visited`	Visited `link element`	1	×
`:target`	The `element of the current anchor point`	3	×
`:focus`	Enter the focused `form element`	2	√
##:required	form elements
:valid	form elements
:invalid	form element
:in-range	form within the input range Element
:out-of-range	Form elements other than
Option selected	3	√
`Option optional`Form elements	`3`
Event enabled `form elements`	3×
Event disabled `form elements`	3√
Read-only `form elements`	3×
Readable and writable `form element`	3×		##:target-within
element within which the anchor element is activated	`×`		:focus-within
element	`√`		:focus-visible
form element	`×`		:blank
form element	`×`		:user-invalid
form elements	`×`		:indeterminate
Form elements	`×`
4	√
`#4`		:past()
`4`		:future()
`4`		:playing
`4`		:paused
`4`

#3√ element 3×##:first-child element in the 2√3√The parent element only has the 3√The 3√##tag specifying the reverse index in the tag##:first-of-type:last-of-type The parent element only has the 3Attribute Selector

Selector	Description	Version	Commonly used
`:root`	The `root element of the document`	3	×
`:empty`	`element without child elements`	3	√
`:nth-child(n)`	`element## of the specified sequential index in the element`
:nth-last-child(n)	element specifying reverse index
The first	element
:last-child `The` element that ends in the	element
:only- child	element of this element
:nth-of-type(n)	tag specifying the sequential index in the tag
:nth-last-of-type(n)	3	×
`The` tag## that is the first of the tags	#3#√
The tag is the tail`tag`	3√		##:only-of-type
tag of the tag	`√`

Selector

DescriptionVersionCommonly used[attr]The 2The 2The 3The [attr$=val]The attribute ends with the specified value The element Attributes containing elements with specified values (complete words) (deprecated) ×The element whose attribute starts with the specified value (complete word) (deprecated)×Pseudo-element


element of the specified attribute	`√`		[attr=val]
element whose attribute is equal to the specified value	`√`		[attr*=val]
element whose attribute contains the specified value	`√`		[attr^=val]
element## whose attribute starts with the specified value #3	√
3	√	##[attr~=val]
`2`		[attr\|=val]
`2`

Selector
Description

VersionCommonly usedBefore the element Inserted content√##::afterContent inserted after the element## element11×The 3×4×## placeholder for form elements√

::before

2

2√ ##::first-letter #First letter of the

× ::first-line#First line of ## element

::selection element selected by the mouse

:: backdrop elements in full screen mode

: :placeholder 4

Tips

With the above prerequisite knowledge, let’s follow the author to experience how to skillfully use various pure CSS development techniques to complete some common or special layoutsBar. In order to facilitate the browser to automatically calculate certain styles, box-sizing:border-box needs to be set globally. Before coding, please introduce reset.css organized by the author.

Main layout

Main layout refers to the placeholder layout that is common and has uniform characteristics in most situations. Mastering Main Layout is an essential front-end skill. To develop a rough plan of the overall layout by looking at design drawings, you must be familiar with the characteristics and structure of these Main Layout.

Full screen layout

Classic Full screen layout consists of top, bottom and The main body is composed of three parts, and its characteristics are the left and right full-screen stretching of the three parts, the top and bottom heights are fixed, and the main body height is adaptive. This layout is very common and is also the mainstream layout of most web application bodies. Usually three tags <header></header>, <footer></footer> and <main></main> are used for semantic typesetting, <main>## You can also insert </main>

sidebar or other semantic tags within #.

8 Pure CSS Layout Techniques Worth Knowing

<div class="fullscreen-layout">
    <header></header>
    <main></main>
    <footer></footer>
</div>

Copy after login

position left/right/top/bottom

Three-part unified statement

left:0and right:0 Stretch it to the left and right to fill the screen; declare top:0 and bottom:0 at the top and bottom respectively to suck it to the top and bottom, and Declare the two heights as fixed values; declare the top and bottom of the body as the top height and bottom height respectively. The three parts are fixed at specific positions through absolute positioning so that they do not affect each other.

.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;
    }
}

Copy after login

flex

It will be more concise to use

flex. display:flexBy default, the child nodes will be arranged horizontally, which needs to be declared flex-direction:columnChange the arrangement direction of the child nodes to vertical arrangement; the top and bottom heights are fixed, so the main body needs to be declaredflex:1Make height adaptive.

.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;
    }
}

Copy after login

needs to be displayed in a scrollable state, do not declare overflow:auto

 to allow the container to scroll adaptively. Doing so may cause other problems The formatting context may cause adaptive scrolling to fail or produce other unknown effects. You need to insert a

<div> within

and declare it as follows.

div {
    overflow: hidden;
    height: 100%;
}

Copy after login

Two-column layout

Classic

Two-column layout is composed of left and right columns, and its characteristics areThe width of one column is fixed, The width of the other column is adaptive and The height of the two columns is fixed and equal. The following takes the left column width as fixed and the right column width as adaptive as an example, and vice versa.

8 Pure CSS Layout Techniques Worth Knowing

<div class="two-column-layout">
    <div class="left"></div>
    <div class="right"></div>
</div>

Copy after login

float margin-left/right

Left column declaration

float:leftand fixed width, Since float causes nodes to deflow, the right column needs to declare margin-left as the width of the left column to ensure that the two columns do not overlap.

.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;
    }
}

Copy after login

overflow float

The left column declares the same as above, and the right column declares

overflow:hidden to form a BFC areawith Isolated from the outside world.

.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;
    }
}

Copy after login

flex

It will be more concise to use

flex. The left column declares a fixed width, and the right column declares flex:1adaptive width.

.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;
    }
}

Copy after login

Three-column layout

Classic

Three-column layout is composed of left, middle and right columns, and its characteristics are: The width of two consecutive columns is fixed, the width of the remaining column is adaptive and the height of the three columns is fixed and equal. The following takes the fixed width of the left middle column and the adaptive width of the right column as an example, and vice versa. The overall implementation principle is consistent with the above two-column layout.

8 Pure CSS Layout Techniques Worth Knowing

<div class="three-column-layout">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

Copy after login

In order to make the width of the right column adaptively calculated, the

float margin-left method is not used. If you use margin-left It must also be calculated based on the width of the left middle column.

overflow float

.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;
    }
}

Copy after login

flex

.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;
    }
}

Copy after login

圣杯布局/双飞翼布局

经典的圣杯布局和双飞翼布局都是由左中右三列组成，其特点为左右两列宽度固定、中间一列宽度自适应和三列高度固定且相等。其实也是上述两列布局和三列布局的变体，整体的实现原理与上述N列布局一致，可能就是一些细节需注意。

圣杯布局和双飞翼布局在大体相同下也存在一点不同，区别在于双飞翼布局中间列需插入一个子节点。在常规实现方式里也是在这个中间列里做文章，如何使中间列内容不被左右列遮挡。

float

margin负值

padding

margin

8 Pure CSS Layout Techniques Worth Knowing

圣杯布局float + margin-left/right + padding-left/right

由于浮动节点在位置上不能高于前面或平级的非浮动节点，否则会导致浮动节点下沉。因此在编写HTML结构时，将中间列节点挪到右列节点后面。

<div class="grail-layout-x">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

Copy after login

.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;
    }
}

Copy after login

双飞翼布局float + margin-left/right

HTML结构大体同上，只是在中间列里插入一个子节点<div>。根据两者区别，CSS声明会与上述圣杯布局有一点点出入，可观察对比找出不同地方。

<div class="grail-layout-y">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        <div></div>
    </div>
</div>

Copy after login

.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;
    }
}

Copy after login

圣杯布局/双飞翼布局flex

使用flex实现圣杯布局/双飞翼布局可忽略上述分析，左右两列宽度固定，中间列宽度自适应。

<div class="grail-layout">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

Copy after login

.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;
    }
}

Copy after login

均分布局

经典的均分布局由多列组成，其特点为每列宽度相等和每列高度固定且相等。总体来说也是最简单的经典布局，由于每列宽度相等，所以很易找到合适的方式处理。

8 Pure CSS Layout Techniques Worth Knowing

<div class="average-layout">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</div>

Copy after login

.one {
    background-color: #f66;
}
.two {
    background-color: #66f;
}
.three {
    background-color: #f90;
}
.four {
    background-color: #09f;
}

Copy after login

float + width

每列宽度声明为相等的百分比，若有4列则声明width:25%。N列就用公式100 / n求出最终百分比宽度，记得保留2位小数，懒人还可用width:calc(100% / n)自动计算呢。

.average-layout {
    width: 400px;
    height: 400px;
    div {
        float: left;
        width: 25%;
        height: 100%;
    }
}

Copy after login

flex

使用flex实现会更简洁。节点声明display:flex后，生成的FFC容器里所有子节点的高度都相等，因为容器的align-items默认为stretch，所有子节点将占满整个容器的高度。每列声明flex:1自适应宽度。

.average-layout {
    display: flex;
    width: 400px;
    height: 400px;
    div {
        flex: 1;
    }
}

Copy after login

居中布局

居中布局由父容器与若干个子容器组成，子容器在父容器中横向排列或竖向排列且呈水平居中或垂直居中。居中布局是一个很经典的问题，相信大家都会经常遇到。

8 Pure CSS Layout Techniques Worth Knowing

在此直接上一个目前最简单最高效的居中方式。display:flex与margin:auto的强行组合，同学们自行体会。

<div class="center-layout">
    <div></div>
</div>

Copy after login

.center-layout {
    display: flex;
    width: 400px;
    height: 400px;
    background-color: #f66;
    div {
        margin: auto;
        width: 100px;
        height: 100px;
        background-color: #66f;
    }
}

Copy after login

自适布局

自适布局指相对视窗任何尺寸都能占据特定百分比的占位布局。自适布局的容器都是根据视窗尺寸计算，即使父节点或祖先节点的尺寸发生变化也不会影响自适布局的容器尺寸。

搭建自适布局就离不开视窗比例单位。在CSS3里增加了与viewport相关的四个长度单位，随着时间推移，目前大部分浏览器对这四个长度单位都有较好的兼容性，这也是未来最建议在伸缩方案里使用的长度单位。

1vw

1%

1vh

1%

1vmin

1%

1vmax

1%

视窗宽高在JS里分别对应window.innerWdith和window.innerHeight。若不考虑低版本浏览器兼容性，完全可用一行CSS代码秒杀所有移动端的伸缩方案。

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

Copy after login

上述代码使用calc()实现font-size的动态计算。calc()是自适布局里的核心存在，无它就不能愉快地实现自适布局所有动态计算了。

calc()用于动态计算单位，数值、长度、角度、时间和百分比都能作为参数。由于执行数学表达式后返回运算后的计算值，所以可减少大量人工计算甚至无需人工计算。

calc()饥不择食，所有计量单位都能作为参数参加整个动态计算。

calc()虽然好用，但新手难免会遇到一些坑，谨记以下特点，相信就能玩转calc()了。

+

-

*

/

()

空格

第三点尤为重要，若未能遵守，浏览器直接忽略该属性。

上述font-size:calc(100vw / 7.5)其实就是根据设计图与浏览器视窗的比例动态计算<html>的font-size：100/750 = x/100vw。

在SPA里有遇过因为有滚动条或无滚动条而导致页面路由在跳转过程里发生向左或向右的抖动吗？这让强迫症患者很难受，此时可用calc()巧妙解决该问题。

.elem {
    padding-right: calc(100vw - 100%);
}

Copy after login

不直接声明padding-right为滚动条宽度是因为每个浏览器的默认滚动条宽度都可能不一致。100vw是视窗宽度，100%内容宽度，那么100vw - 100%就是滚动条宽度，声明padding-right用于保留滚动条出现的位置，这样滚动条出不出现都不会让页面抖动了。

有了calc()做保障就可迅速实现一些与视窗尺寸相关的布局了。例如实现一个视窗宽度都为50%的弹窗。

8 Pure CSS Layout Techniques Worth Knowing

<div class="modal">
    <div class="modal-wrapper"></div>
</div>

Copy after login

.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;
    }
}

Copy after login

当然使用calc()也不一定结合视窗比例单位计算。例如自适布局已知部分节点高度，不想手动计算最后节点高度但又想其填充布局剩余空间。

8 Pure CSS Layout Techniques Worth Knowing

<ul class="selfadaption-layout">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
</ul>

Copy after login

.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;
    }
}

Copy after login

吸附布局

吸附布局指相对视窗任何滚动都能占据特定位置的占位布局。视窗滚动到特定位置，布局固定在该位置，后续不随视窗滚动而滚动。该布局产生的效果俗称吸附效果，是一种常见网页效果。譬如吸顶效果和吸底效果都是该范畴，经常在跟随导航、移动广告和悬浮提示等应用场景里出现。

In the jQuery era there were many adsorption effect plug-ins, and now the three major front-end frameworks also have their own third-party adsorption effect components. They all have a common implementation principle: monitor the scroll event, determine the location range of scrollTop and target node, and if the conditions are met, target node's position is declared as fixed to position the target node relative to the window, making the user appear to be nailed to the specified position in the window.

There are a lot of JS codes to achieve the adsorption effect found online, not to mention that the author likes to play with CSS, so I won’t post the relevant JS code here. Here we recommend a rarely seen and rarely used CSS property position:sticky. A simple two lines of core CSS code can complete the functions of more than ten lines of core JS code, so why not do it.

A brief reviewpositionAttribute value, I won’t go into how to use it, everyone should be familiar with it.

2222##sticky positioning

当值为sticky时将节点变成粘性定位。粘性定位是相对定位和固定定位的结合体，节点在特定阈值跨越前为相对定位，跨越后为固定定位。

8 Pure CSS Layout Techniques Worth Knowing

<div class="adsorption-position">
    <ul>
        <li>Top 1</li>
        <li>Top 2</li>
        <li>Normal</li>
        <li>Bottom 1</li>
        <li>Bottom 2</li>
    </ul>
</div>

Copy after login

.adsorption-position {
    overflow: auto;
    position: relative;
    width: 400px;
    height: 280px;
    outline: 1px solid #3c9;
    ul {
        padding: 200px 0;
    }
    li {
        position: sticky;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        &:nth-child(1) {
            top: 0;
            z-index: 9;
            background-color: #f66;
        }
        &:nth-child(2) {
            top: 40px;
            z-index: 9;
            background-color: #66f;
        }
        &:nth-child(3) {
            background-color: #f90;
        }
        &:nth-child(4) {
            bottom: 0;
            z-index: 9;
            background-color: #09f;
        }
        &:nth-child(5) {
            bottom: 40px;
            z-index: 9;
            background-color: #3c9;
        }
    }
}

Copy after login

两行核心CSS代码分别是position:sticky和top/bottom:npx。上述5个节点都声明position:sticky，但由于top/bottom赋值有所不同就产生不同吸附效果。

细心的同学可能发现这些节点在某些滚动时刻处于相对定位，在特定滚动时刻处于固定定位。

<li>

top

0px

容器顶部

<li>

top

40px

距离容器顶部40px

<li>

top/bottom

<li>

bottom

40px

距离容器底部40px

<li>

bottom

0px

容器底部

当然，换成left或right也一样能实现横向的吸附效果。

兼容性勉强还行，近2年发版的浏览器都能支持，Safari和Firefox的兼容性还是挺赞的。有吸附效果需求的同学建议一试，要兼容IExplorer就算了。期待该属性有更好的发展，毕竟吸附布局真的是一种常见布局。

8 Pure CSS Layout Techniques Worth Knowing

横向布局

横向布局指容器内节点以水平方向排列且溢出部分被隐藏的占位布局。竖向布局很常见，声明overflow:hidden;width:xpx;height:ypx就能实现，但横向布局却不能使用类似方式实现。

为了方便使用多种方式实现横向布局，以下将通用代码拆分出来。

8 Pure CSS Layout Techniques Worth Knowing

<div class="horizontal-layout">
    <ul>
        <li>Alibaba</li>
        <li>Tencent</li>
        <li>Baidu</li>
        <li>Jingdong</li>
        <li>Ant</li>
        <li>Netease</li>
        <li>Meituan</li>
        <li>ByteDance</li>
        <li>360</li>
        <li>Sina</li>
    </ul>
</div>

Copy after login

.horizontal-layout {
    overflow: hidden;
    width: 300px;
    height: 100px;
    ul {
        overflow-x: auto;
        cursor: pointer;
        &::-webkit-scrollbar {
            height: 10px;
        }
        &::-webkit-scrollbar-track {
            background-color: #f0f0f0;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #f66;
        }
    }
    li {
        overflow: hidden;
        height: 90px;
        background-color: #66f;
        line-height: 90px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        &:not(:first-child) {
            margin-left: 10px;
        }
    }
}

Copy after login

有些同学可能会使用行内元素实现横向排版，但必须声明overflow-y:hidden使容器在Y轴方向隐藏溢出部分。由于行内元素在当前行排版产生溢出会自动将其余节点排版到下一行，因此还需声明white-space:nowrap使所有行内元素在一行内排版完毕。若产生滚动条，还需对容器的height做适当的微调。

.horizontal-layout.inline {
    height: 102px;
    ul {
        overflow-y: hidden;
        white-space: nowrap;
    }
    li {
        display: inline-block;
        width: 90px;
    }
}

Copy after login

上述方式在笔者在开发认知里觉得太繁琐，实质上将所有节点当成文本排列，也是醉了。笔者推荐使用flex布局完成上述布局，flex布局作为目前最常见的布局方式，相信也不用笔者多说。以下实现方式不知大家是否见过呢？在移动端上体验会更棒喔！

.horizontal-layout.flex {
    ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    li {
        flex-shrink: 0;
        flex-basis: 90px;
    }
}

Copy after login

凸显布局

凸显布局指容器内节点以同一方向排列且存在一个节点在某个方向上较突出的占位布局。该布局描述起来可能比较拗口，直接看以下效果吧，这是一个横向列表，节点从左往右排列，最右边的节点特别突出。这就是凸显布局的特征，凸显的节点可在凸显布局任意位置，上下左右，左上左下右上右下都行。

18 Pure CSS Layout Techniques Worth Knowing

这里巧妙运用margin-*:auto实现了凸显布局。相信大家实现水平居中固定宽度的块元素都会使用margin:0 auto。

在此同样原理，当节点声明margin-*:auto时，浏览器会自动计算剩余空间并将该值赋值给该节点。在使用该技巧时必须基于flex布局。

18 Pure CSS Layout Techniques Worth Knowing

<ul class="highlight-layout">
    <li>Alibaba</li>
    <li>Tencent</li>
    <li>Baidu</li>
    <li>Jingdong</li>
    <li>Ant</li>
    <li>Netease</li>
</ul>

Copy after login

.highlight-layout {
    display: flex;
    align-items: center;
    padding: 0 10px;
    width: 600px;
    height: 60px;
    background-color: #3c9;
    li {
        padding: 0 10px;
        height: 40px;
        background-color: #3c9;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
    }
    &.left li {
        &:not(:first-child) {
            margin-left: 10px;
        }
        &:last-child {
            margin-left: auto;
        }
    }
    &.right li {
        &:not(:last-child) {
            margin-right: 10px;
        }
        &:first-child {
            margin-right: auto;
        }
    }
    &.top {
        flex-direction: column;
        width: 120px;
        height: 400px;
        li {
            &:not(:first-child) {
                margin-top: 10px;
            }
            &:last-child {
                margin-top: auto;
            }
        }
    }
    &.bottom {
        flex-direction: column;
        width: 120px;
        height: 400px;
        li {
            &:not(:last-child) {
                margin-bottom: 10px;
            }
            &:first-child {
                margin-bottom: auto;
            }
        }
    }
}

Copy after login

在此还有一个小技巧，那就是:not()与:first-child和:last-child的巧妙运用。这样组合让特殊位置的节点直接减少属性覆盖的问题，不仅易读还能装逼。

:not(:first-child)：排除首节点，其他节点都使用某些样式
:not(:last-child)：排除尾节点，其他节点都使用某些样式

间距布局

间距布局指容器内节点从左往右从上往下排列且以特定间距间隔的占位布局。间距布局常见于各大列表，是笔者认为最重要的布局之一。为何如此简单的布局还是花费一些篇幅讲解呢？最近笔者查看了Github上很多与间隔布局相关的CSS代码，虽然整体效果看上去无大碍，但margin/padding和结构选择器却乱用，因此笔者想从零到一纠正间距布局的正确编码方式。

在进入编码环节前，笔者想重点讲解:nth-child()的点睛之笔。大部分同学可能只认得:nth-child(n)、:nth-child(2n-1)、:nth-child(2n)和:nth-child(xn)的日常用法，但其实还有一些你可能未见过的用法。在此笔者借这次机会将:nth-child()所有用法总结下，n/x/y代表正整数，最小值为1。

:nth-child(n)：选择第n个元素
:nth-child(odd)：选择奇数位置元素，相当于:nth-child(2n-1)
:nth-child(even)：选择偶数位置元素，相当于:nth-child(2n)
:nth-child(xn)：选择第x*n个元素
:nth-child(x-n)：选择前x个元素
:nth-child(y-n):nth-child(n+x)：选择第x~y个元素

分析间距布局的一切特点，捕获特征很有利于将特征转换成CSS代码。

margin

padding

background-color

padding

margin

margin-left/margin-right

margin-left:0

margin-right:0

margin-top

border-top/border-bottom

padding-top/padding-bottom

全部步骤串联起来理解可能会产生混乱，但结合以下代码理解相信就能很快熟悉。以一行排列3个节点总共8个节点为例，最终效果为三行三列。

18 Pure CSS Layout Techniques Worth Knowing

8 Pure CSS Layout Techniques Worth Knowing

<ul class="spacing-layout">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

Copy after login

.spacing-layout {
    display: flex;
    overflow: auto;
    flex-wrap: wrap;
    margin-top: 20px; // 对应A
    padding: 20px; // 对应B和C
    // padding-top: 0; // 对应G
    // padding-bottom: 0; // 对应G
    // border-top: 20px solid #f66; // 对应G
    // border-bottom: 20px solid #f66; // 对应G
    width: 700px; // 稍微留空用于显示滚动条
    height: 400px;
    background-color: #f66;
    li {
        width: 200px;
        height: 200px;
        background-color: #66f;
        line-height: 200px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        &:not(:nth-child(3n)) {
            margin-right: 20px; // 对应D和E
        }
        &:nth-child(n+4) {
            margin-top: 20px; // 对应F
        }
    }
}

Copy after login

空载布局

空载布局指容器内无任何节点时使用其他形式代替的占位布局。还有使用JS判断列表集合为空时显示占位符吗？相信很多使用MVVM框架开发的同学都会使用条件判断的方式渲染虚拟DOM，若列表长度不为0则渲染列表，否则渲染占位符。

<div>
    <ul v-if="list.length">...</ul>
    <div v-esle>Empty</div>
</div>

Copy after login

然而CSS提供一个空判断的选择器:empty，这应该很少同学会注意到吧。

:empty作用于无子节点的节点，该子节点也包括行内匿名盒(单独的文本内容)。以下三种情况均视为非空状态，若不出现这三种状态则视为空状态，此时:empty才会触发。

仅存在节点：<div>CSS
仅存在文本：<div>CSS
同时存在节点和文本：<div>Hello CSS

8 Pure CSS Layout Techniques Worth Knowing

<ul class="empty-layout">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<ul class="empty-layout"></ul>

Copy after login

$empty: "https://yangzw.vip/img/empty.svg";
.empty-layout {
    overflow: auto;
    width: 200px;
    height: 150px;
    outline: 1px solid #3c9;
    &:empty {
        display: flex;
        justify-content: center;
        align-items: center;
        background: url($empty) no-repeat center/100px auto;
        &::after {
            margin-top: 90px;
            font-weight: bold;
            content: "没钱就没数据";
        }
    }
    li {
        padding: 0 10px;
        height: 30px;
        background-color: #09f;
        line-height: 30px;
        color: #fff;
        &:nth-child(even) {
            background-color: #f90;
        }
    }
}

Copy after login

另外还存在一种特殊的空载布局，就是不做任何处理。这样最终渲染的DOM只有容器，若已声明margin/padding/border但未声明width/height的情况下，就会出现以下占位效果。无任何子节点的容器还声明着margin/padding/border，看着都尴尬。

8 Pure CSS Layout Techniques Worth Knowing

没事，:empty帮你搞掂！对于无任何子节点的容器直接声明display:none解决所有无效占位，当然也可作用于指定节点。一招制敌，劲！

// 作用于所有节点
:empty {
    display: none;
}
// 作用于指定节点
.empty-layout:empty {
    display: none;
}

Copy after login

多格布局

多格布局指容器内节点以动态数量的格子形式排列的占位布局。微信朋友圈的相册就是最常见的多格布局了，当单张照片排列、两张照片排列、三张照片排列等等，每种情况下照片的尺寸都可能不一致。笔者制作了一个动态多格相册怀念我家狗狗AB。大家感受下纯CSS实现动态数量的多格布局吧。

在此留个悬念，不讲解如何实现，看看大家能不能根据笔者列出的提示尝试将该效果复原。主要原理是根据结构选择器限制节点范围实现，在本文也可找到原理的答案喔！记得实现完再看以下源码哈！

28 Pure CSS Layout Techniques Worth Knowing

<ul class="multigrid-layout">
    <li class="item"><img  src="https://static.yangzw.vip/codepen/ab-3.jpg" alt="8 Pure CSS Layout Techniques Worth Knowing" ></li>
    <li class="item"><img  src="https://static.yangzw.vip/codepen/ab-3.jpg" alt="8 Pure CSS Layout Techniques Worth Knowing" ></li>
    <li class="item"><img  src="https://static.yangzw.vip/codepen/ab-3.jpg" alt="8 Pure CSS Layout Techniques Worth Knowing" ></li>
    <li class="item"><img  src="https://static.yangzw.vip/codepen/ab-3.jpg" alt="8 Pure CSS Layout Techniques Worth Knowing" ></li>
    <li class="item"><img  src="https://static.yangzw.vip/codepen/ab-3.jpg" alt="8 Pure CSS Layout Techniques Worth Knowing" ></li>
    <li class="item"><img  src="https://static.yangzw.vip/codepen/ab-3.jpg" alt="8 Pure CSS Layout Techniques Worth Knowing" ></li>
    <li class="item"><img  src="https://static.yangzw.vip/codepen/ab-3.jpg" alt="8 Pure CSS Layout Techniques Worth Knowing" ></li>
    <li class="item"><img  src="https://static.yangzw.vip/codepen/ab-3.jpg" alt="8 Pure CSS Layout Techniques Worth Knowing" ></li>
    <li class="item"><img  src="https://static.yangzw.vip/codepen/ab-3.jpg" alt="8 Pure CSS Layout Techniques Worth Knowing" ></li>
</ul>

Copy after login

@mixin square($count: 2) {
    $length: calc((100% - #{$count} * 10px) / #{$count});
    width: $length;
    height: $length;
}
.multigrid-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 400px;
    height: 400px;
    li {
        display: flex;
        overflow: hidden;
        justify-content: center;
        margin: 5px;
        background-color: #f0f0f0;
        @include square(3);
    }
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
// 一个元素
.item:only-child {
    border-radius: 10px;
    width: auto;
    max-width: 80%;
    height: auto;
    max-height: 80%;
}
// 两个元素
.item:first-child:nth-last-child(2),
.item:first-child:nth-last-child(2) ~ .item:nth-child(2) {
    @include square(2);
}
.item:first-child:nth-last-child(2) {
    border-radius: 10px 0 0 10px;
}
.item:first-child:nth-last-child(2) ~ .item:nth-child(2) {
    border-radius: 0 10px 10px 0;
}
// 三个元素
.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item:nth-child(2),
.item:first-child:nth-last-child(3) ~ .item:nth-child(3) {
    @include square(2);
}
.item:first-child:nth-last-child(3) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(3) ~ .item:nth-child(2) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(3) ~ .item:nth-child(3) {
    border-bottom-left-radius: 10px;
}
// 四个元素
.item:first-child:nth-last-child(4),
.item:first-child:nth-last-child(4) ~ .item:nth-child(2),
.item:first-child:nth-last-child(4) ~ .item:nth-child(3),
.item:first-child:nth-last-child(4) ~ .item:nth-child(4) {
    @include square(2);
}
.item:first-child:nth-last-child(4) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(2) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(3) {
    border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(4) ~ .item:nth-child(4) {
    border-bottom-right-radius: 10px;
}
// 五个元素
.item:first-child:nth-last-child(5) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(5) ~ .item:nth-child(3) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(5) ~ .item:nth-child(4) {
    border-bottom-left-radius: 10px;
}
// 六个元素
.item:first-child:nth-last-child(6) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(3) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(4) {
    border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(6) ~ .item:nth-child(6) {
    border-bottom-right-radius: 10px;
}
// 七个元素
.item:first-child:nth-last-child(7) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(7) ~ .item:nth-child(3) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(7) ~ .item:nth-child(7) {
    border-bottom-left-radius: 10px;
}
// 八个元素
.item:first-child:nth-last-child(8) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(8) ~ .item:nth-child(3) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(8) ~ .item:nth-child(7) {
    border-bottom-left-radius: 10px;
}
// 九个元素
.item:first-child:nth-last-child(9) {
    border-top-left-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(3) {
    border-top-right-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(7) {
    border-bottom-left-radius: 10px;
}
.item:first-child:nth-last-child(9) ~ .item:nth-child(9) {
    border-bottom-right-radius: 10px;
}

Copy after login

总结

很多同学可能觉得CSS很简单，但真正玩起来也能与JS有得一比。笔者从事前端领域多年，一直致力于CSS技术的研究与应用，当然真的不是为了玩，而是在玩的过程里将实践到的知识充分应用于工作上。

JS重要但CSS同样重要，希望喜欢CSS的同学多多关注笔者，相信你一定会有更多CSS方面的收获。

原文地址：https://juejin.cn/post/6986873449721364510

作者：JowayYoung

更多编程相关知识，请访问：编程入门！！

Value	Function	Version
inherit	`Inherit`	2
##static	Standard flow
relative	Relative positioning
absolute	Absolute positioning
fixed	Fixed positioning
sticky	3

The above is the detailed content of 8 Pure CSS Layout Techniques Worth Knowing. For more information, please follow other related articles on the PHP Chinese website!