主頁 > 企業開發 > 一篇文章帶你掌握Flex布局的所有用法

一篇文章帶你掌握Flex布局的所有用法

2023-02-08 07:31:25 企業開發

Flex 布局目前已經非常流行了,現在幾乎已經兼容所有瀏覽器了，在文章開始之前我們需要思考一個問題:我們為什么要使用 Flex 布局?

其實答案很簡單,那就是 Flex 布局好用，一個新事物的出現往往是因為舊事物不那么好用了,比如,如果想讓你用傳統的 css 布局來實作一個塊元素垂直水平居中你會怎么做?實作水平居中很簡單,margin: 0 auto就行,而實作垂直水平居中則可以使用定位實作:

<div >
  <div ></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: red;
}
.item {
  position: absolute;
  background: black;
  width: 50px;
  height: 50px;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

或者

.item {
  position: absolute;
  background: black;
  width: 50px;
  height: 50px;
  margin: auto;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
}

image.png

但是這樣都顯得特別繁瑣,明明可以一個屬性就能解決的事情沒必要寫這么麻煩，而使用 Flex 則可以使用 place-content 屬性簡單的實作(place-content 為 justify-content 和 align-content 簡寫屬性)

.container {
  width: 300px;
  height: 300px;
  background: red;
  display: flex;
  place-content: center;
}
.item {
  background: black;
  width: 50px;
  height: 50px;
}

接下來的本篇文章將會帶領大家一起來探討Flex布局

基本概念

我們先寫一段代碼作為示例(部分屬性省略)

html

<div >
  <div >flex專案</div>
  <div >flex專案</div>
  <div >flex專案</div>
  <div >flex專案</div>
</div>

.container {
  display: flex;
  width: 800px;
  gap: 10px;
}
.item {
  color: #fff;
}

image.png

flex 容器

我們可以將一個元素的 display 屬性設定為 flex,此時這個元素則成為flex 容器比如container元素

flex 專案

flex 容器的子元素稱為flex 專案,比如item元素

軸

flex 布局有兩個軸,主軸和交叉軸,至于哪個是主軸哪個是交叉軸則有flex 容器的flex-direction屬性決定,默認為:flex-direction:row,既橫向為主軸,縱向為交叉軸,

image.png

flex-direction還可以設定其它三個屬性,分別為row-reverse,column,column-reverse，

  • row-reverse

image.png

  • column

1675390782104.png

  • column-reverse

1675390925377.png

從這里我們可以看出 Flex 軸的方向不是固定不變的,它受到flex-direction的影響

不足空間和剩余空間

當 Flex 專案總寬度小于 Flex 容器寬度時就會出現剩余空間

image.png

當 Flex 專案總寬度大于 Flex 容器寬度時就會出現不足空間

image.png

Flex 專案之間的間距

Flex 專案之間的間距可以直接在 Flex 容器上設定 gap 屬性即可,如

<div >
  <div >A</div>
  <div >B</div>
  <div >C</div>
  <div >D</div>
</div>

.container {
  display: flex;
  width: 500px;
  height: 400px;
  gap: 10px;
}
.item {
  width: 150px;
  height: 40px;
}

image.png

Flex 屬性

flex屬性是flex-grow,flex-shrink,flex-basis三個屬性的簡寫，下面我們來看下它們分別是什么，

  • flex-basis可以設定 Flex 專案的大小,一般主軸為水平方向的話和 width 決議方式相同,但是它不一定是 Flex 專案最終大小,Flex 專案最終大小受到flex-grow,flex-shrink以及剩余空間等影響,后面文章會告訴大家最終大小的計算方式

  • flex-grow為 Flex 專案的擴展系數,當 Flex 專案總和小于 Flex 容器時就會出現剩余空間,而flex-grow的值則可以決定這個 Flex 專案可以分到多少剩余空間

  • flex-shrink為 Flex 專案的收縮系數,同樣的,當 Flex 專案總和大于 Flex 容器時就會出現不足空間,flex-shrink的值則可以決定這個 Flex 專案需要減去多少不足空間

既然flex屬性是這三個屬性的簡寫,那么flex屬性簡寫方式分別代表什么呢?

flex屬性可以為 1 個值,2 個值,3 個值,接下來我們就分別來看看它們代表什么意思

  • 一個值

如果flex屬性只有一個值的話,我們可以看這個值是否帶單位,帶單位那就是flex-basis,不帶就是flex-grow

.item {
  flex: 1;

  /* 相當于 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
? .item {
  flex: 30px;

  /* 相當于 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30px;
}
  • 兩個值

當flex屬性有兩個值的話,第一個無單位的值就是flex-grow,第一個無單位的值則是flex-shrink,有單位的就是flex-basis

.item {
  flex: 1 2;

  /* 相當于 */
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 0;
}
? .item {
  flex: 30px 2;

  /* 相當于 */
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 30px;
}
  • 三個值

當flex屬性有三個值的話,第一個無單位的值就是flex-grow,第一個無單位的值則是flex-shrink,有單位的就是flex-basis

.item {
  flex: 1 2 10px;

  /* 相當于 */
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 10px;
}
? .item {
  flex: 30px 2 1;

  /* 相當于 */
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 30px;
}

? .item {
  flex: 2 30px 1;

  /* 相當于 */
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 30px;
}

另外,flex 的值還可以為initial,auto,none，

  • initial

initial 為默認值,和不設定 flex 屬性的時候表現一樣,既 Flex 專案不會擴展,但會收縮,Flex 專案大小有本身內容決定

? .item {
  flex: initial;

  /* 相當于 */
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
  • auto

當 flex 設定為 auto 時,Flex 專案會根據自身內容確定flex-basis,既會拓展也會收縮

? .item {
  flex: auto;

  /* 相當于 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
  • none

none 表示 Flex 專案既不收縮,也不會擴展

? .item {
  flex: none;

  /* 相當于 */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

Flex 專案大小的計算

首先看一下 flex-grow 的計算方式

flex-grow

面試中經常問到: 為什么 flex 設定為 1 的時候,Flex 專案就會均分 Flex 容器? 其實 Flex 專案設定為 1 不一定會均分容器(后面會解釋),這里我們先看下均分的情況是如何發生的

同樣的我們先舉個例子

<div >
  <div >Xiaoyue</div>
  <div >June</div>
  <div >Alice</div>
  <div >Youhu</div>
  <div >Liehuhu</div>
</div>

.container {
  display: flex;
  width: 800px;
}
.item {
  flex: 1;
  font-size: 30px;
}

flex 容器總寬度為 800px,flex 專案設定為flex:1,此時頁面上顯示

image.png

我們可以看到每個專案的寬度為 800/5=160,下面來解釋一下為什么會均分:

首先

? .item {
  flex: 1;

  /* 相當于 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

因為flex-basis為 0,所有 Flex 專案擴展系數都是 1,所以它們分到的剩余空間都是一樣的，下面看一下是如何計算出最終專案大小的

這里先給出一個公式:

Flex專案彈性量 = (Flex容器剩余空間/所有flex-grow總和)*當前Flex專案的flex-grow

其中Flex專案彈性量指的是分配給 Flex 專案多少的剩余空間,所以 Flex 專案的最終寬度為

flex-basis+Flex專案彈性量，

根據這個公式,上面的均分也就很好理解了,因為所有的flex-basis為 0,所以剩余空間就是 800px,每個 Flex 專案的彈性量也就是(800/1+1+1+1+1)*1=160,那么最終寬度也就是160+0=160

剛剛說過 flex 設定為 1 時 Flex 專案并不一定會被均分,下面就來介紹一下這種情況,我們修改一下示例中的 html,將第一個 item 中換成一個長單詞

<div >
  <div >Xiaoyueyueyue</div>
  <div >June</div>
  <div >Alice</div>
  <div >Youhu</div>
  <div >Liehu</div>
</div>

此時會發現 Flex 容器并沒有被均分

image.png

因為計算出的靈活性 200px 小于第一個 Flex 專案的min-content(217.16px),此時瀏覽器會采用 Flex 專案的min-content作為最終寬度,而后面的 Flex 專案會在第一個 Flex 專案計算完畢后再進行同樣的計算

我們修改一下 flex,給它設定一個 flex-basis,看下它計算之后的情況

.item {
  text-align: center;
  flex: 1 100px;
}

因為每個專案的flex-basis都是 100px,Flex 容器剩余空間為800-500=300px,所以彈性量就是(300/5)*1=60px,最終寬度理論應該為100+60=160px,同樣的因為第一個 Flex 專案的min-content為 217.16px,所以第一個 Flex 專案寬度被設定為 217.16px,最終表現和上面一樣

image.png

我們再來看一下為什么第 2,3,4,5 個 Flex 專案寬度為什么是 145.71px

1675415296477.png

當瀏覽器計算完第一個 Flex 專案為 217.16px 后,此時的剩余空間為800-217.16-100*4=182.84,第 2 個 Flex 專案彈性量為(182.84/1+1+1+1)*1=45.71,所以最終寬度為100+45.71=145.71px,同樣的后面的 Flex 專案計算方式是一樣的,但是如果后面再遇到長單詞,假如第五個是長單詞,那么不足空間將會發生變化,瀏覽器會將第五個 Flex 專案寬度計算完畢后再回頭進行一輪計算,具體情況這里不再展開

所以說想要均分 Flex 容器 flex 設定為 1 并不能用在所有場景中,其實當 Flex 專案中有固定寬度元素也會出現這種情況,比如一張圖片等,當然如果你想要解決這個問題其實也很簡單,將 Flex 專案的min-width設定為 0 即可

.item {
  flex: 1 100px;
  min-width: 0;
}

image.png

flex-grow 為小數

flex-grow 的值不僅可以為正整數,還可以為小數,當為小數時也分為兩種情況:所有 Flex 專案的 flex-grow 之和小于等于 1 和大于 1,我們先看小于等于 1 的情況,將例子的改成

<div >
  <div >Acc</div>
  <div >Bc</div>
  <div >C</div>
  <div >DDD</div>
  <div >E</div>
</div>

.item:nth-of-type(1) {
  flex-grow: 0.1;
}
.item:nth-of-type(2) {
  flex-grow: 0.2;
}
.item:nth-of-type(3) {
  flex-grow: 0.2;
}
.item:nth-of-type(4) {
  flex-grow: 0.1;
}
.item:nth-of-type(5) {
  flex-grow: 0.1;
}

效果如圖

image.png

我們可以發現專案并沒有占滿容器,它的每個專案的彈性量計算方式為

Flex專案彈性量=Flex容器剩余空間*當前Flex專案的flex-grow

相應的每個專案的實際寬度也就是flex-basis+彈性量,首先先不設定 flex-grow,我們可以看到每個專案的 flex-basis 分別為: 51.2 , 33.88 , 20.08 , 68.56 , 16.5

image.png

所以我們可以計算出 Flex 容器的剩余空間為800-51.2 -33.88 - 20.08 - 68.56 - 16.5=609.78,這樣我們就可以算出每個專案的實際尺寸為

A: 實際寬度 = 51.2 + 609.78*0.1 = 112.178

B: 實際寬度 = 33.88 + 609.78*0.2 = 155.836

...

下面看下 flex-grow 之和大于 1 的情況,將例子中的 css 改為

.item:nth-of-type(1) {
  flex-grow: 0.1;
}
.item:nth-of-type(2) {
  flex-grow: 0.2;
}
.item:nth-of-type(3) {
  flex-grow: 0.3;
}
.item:nth-of-type(4) {
  flex-grow: 0.4;
}
.item:nth-of-type(5) {
  flex-grow: 0.5;
}

此時的效果為

image.png

可以看出 Flex 專案是占滿容器的,它的計算方式其實和 flex-grow 為正整數時一樣

Flex專案彈性量 = (Flex容器剩余空間/所有flex-grow總和)*當前Flex專案的flex-grow

所以我們可以得出一個結論: Flex 專案的 flex-grow 之和小于 1,Flex 專案不會占滿 Flex 容器

flex-shrink

flex-shrink 其實和 flex-grow 基本一樣,就是擴展變成了收縮,flex-grow 是專案比例增加容器剩余空間,而 flex-shrink 則是比例減去容器不足空間

修改一下我們的例子:

.item {
  flex-basis: 200px;
  /* 相當于 */
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: 200px;
}

此時專案的總寬度200*5=1000px已經大于容器總寬度800px,此時計算第一個專案的不足空間就是800-200*5=-200px,第二個專案的不足空間則是800-第一個專案實際寬度-200*4,依次類推

最終計算公式其實和 flex-grow 計算差不多

Flex專案彈性量 = (Flex容器不足空間/所有flex-shrink總和)*當前Flex專案的flex-shrink

只不過,所以上面例子每個專案可以計算出實際寬度為

第一個 Flex 專案: 200+((800-200x5)/5)*1 = 160px

第二個 Flex 專案: 200+((800-160-200x4)/4)*1 = 160px

第三個 Flex 專案: 200+((800-160-160-200x3)/3)*1 = 160px

第四個 Flex 專案: 200+((800-160-160-160-200x2)/2)*1 = 160px

第五個 Flex 專案: 200+((800-160-160-160-160-200x1)/1)*1 = 160px

如果 Flex 專案的min-content大于flex-basis,那么最終的實際寬度將會取該專案的min-content,比如改一下例子,將第一個 Flex 專案改成長單詞

<div >
  <div >XiaoyueXiaoyue</div>
  <div >June</div>
  <div >Alice</div>
  <div >Youhu</div>
  <div >Liehu</div>
</div>

image.png

可以看出瀏覽器最終采用的是第一個 Flex 專案的min-content作為實際寬度,相應的后面 Flex 專案的寬度會等前一個 Flex 專案計算完畢后在進行計算

比如第二個 Flex 專案寬度= 200+((800-228.75-200x4)/4)*1 = 142.81px

flex-shrink 為小數

同樣的 flex-shrink 也會出現小數的情況,也分為 Flex 專案的 flex-shrink 之和小于等于 1 和大于 1 兩種情況,如果大于 1 和上面的計算方式一樣,所以我們只看小于 1 的情況,將我們的例子改為

.item {
  flex-basis: 200px;
  flex-shrink: 0.1;
}

效果為

image.png

此時我們會發現 Flex 專案溢位了容器,所以我們便可以得出一個結論:Flex 專案的 flex-shrink 之和小于 1,Flex 專案會溢位 Flex 容器

下面看一下它的計算公式

Flex專案彈性量=Flex容器不足空間*當前Flex專案的flex-shrink

Flex專案實際寬度=flex-basis + Flex專案彈性量

比如上面例子的每個 Flex 專案計算結果為

第一個 Flex 專案寬度 = 200+(800-200x5)x0.1=180px,但是由于它本身的min-content為 228.75,所以最終寬度為 228.75

第二個 Flex 專案寬度 =200-(800-228.75-200x4)x0.1=117.125

第三個 Flex 專案寬度...

Flex 的對齊方式

Flex 中關于對齊方式的屬性有很多,其主要分為兩種,一是主軸對齊方式:justify-*,二是交叉軸對齊方式:align-*

首先改一下我們的例子,將容器設定為寬高為 500x400 的容器(部分屬性省略)

<div >
  <div >A</div>
  <div >B</div>
  <div >C</div>
</div>

.container {
  display: flex;
  width: 500px;
  height: 400px;
}
.item {
  width: 100px;
  height: 40px;
}

image.png

主軸對齊屬性

這里以橫向為主軸,縱向為交叉軸

justify-content

justify-content的值可以為:

  • flex-start 默認值,主軸起點對齊

image.png

  • flex-end 主軸終點對齊

image.png

  • left 默認情況下和 flex-start 一致
  • right 默認情況下和 flex-end 一致
  • center 主軸居中對齊

image.png

  • space-between 主軸兩端對齊,并且 Flex 專案間距相等

image.png

  • space-around 專案左右周圍空間相等

image.png

  • space-evenly 任何兩個專案之間的間距以及邊緣的空間相等

image.png

交叉軸對齊方式

align-content

align-content 屬性控制整個 Flex 專案在 Flex 容器中交叉軸的對齊方式

**注意設定 align-content 屬性時候必須將 flex-wrap 設定成 wrap 或者 wrap-reverse，**它可以取得值為

  • stretch 默認值,當我們 Flex 元素不設定高度的時候,默認是拉伸的

比如將 Flex 元素寬度去掉

.item {
  width: 100px;
}

image.png

  • flex-start 位于容器開頭,這個和 flex-direction:屬性有關,默認在頂部

image.png

  • flex-end 位于容器結尾

image.png

  • center 元素居中對齊

image.png

  • space-between 交叉軸上下對齊,并且 Flex 專案上下間距相等

此時我們改下例子中 Flex 專案的寬度使其換行,因為如果 Flex 專案只有一行,那么 space-between 與 flex-start 表現一致

.item {
  width: 300px;
}

image.png

  • space-around 專案上下周圍空間相等

image.png

  • space-evenly 任何兩個專案之間的上下間距以及邊緣的空間相等

image.png

align-items

align-items 屬性定義 flex 子項在 flex 容器的當前行的交叉軸方向上的對齊方式，它與 align-content 有相似的地方,它的取值有

  • stretch 默認值,當我們 Flex 元素不設定高度的時候,默認是拉伸的

  • center 元素位于容器的中心,每個當前行在圖中已經框起來

image.png

  • flex-start 位于容器開頭

  • flex-end 位于容器結尾

  • baseline 位于容器的基線上

比如給 A 專案一個 padding-top

.item:nth-of-type(1) {
  padding-top: 50px;
}

沒設定 baseline 的表現

image.png

設定 baseline 之后

image.png

通過上面的例子我們可以發現,如果想要整個 Flex 專案垂直對齊,在只有一行的情況下,align-items 和 align-content 設定為 center 都可以做到,但是如果出現多行的情況下 align-items 就不再適用了

align-self

上面都是給 Flex 容器設定的屬性,但是如果想要控制單個 Flex 專案的對齊方式該怎么辦呢?

其實 Flex 布局中已經考慮到了這個問題,于是就有個 align-self 屬性來控制單個 Flex 專案在 Flex 容器側交叉軸的對齊方式，

align-self 和 align-items 屬性值幾乎是一致的,比如我們將整個 Flex 專案設定為 center,第二個 Flex 專案設定為 flex-start

.container {
  display: flex;
  width: 500px;
  height: 400px;
  align-items: center;
}
.item {
  width: 100px;
  height: 40px;
}
.item:nth-of-type(2) {
  align-self: flex-start;
}

image.png

注意,除了以上提到的屬性的屬性值,還可以設定為 CSS 的關鍵詞如 inherit 、initial 等

交叉軸與主軸簡寫

place-content

place-content 為 justify-content 和 align-content 的簡寫形式,可以取一個值和兩個值,如果設定一個值那么 justify-content 和 align-content 都為這個值,如果是兩個值,第一個值為 align-content,第二個則是 justify-content

到這里關于Flex布局基本已經介紹完了,肯定會有些細枝末節沒有考慮到,這可能就需要我們在平時作業和學習中去發現了

點個贊吧~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/543241.html

標籤：其他

上一篇：記錄--實時音視頻功能簡析(live-pusher與live-player)

下一篇：JavaScript 高階函式

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂