CSS 01 基礎對齊設定

2022-03-12 04:36:04 字數 2209 閱讀 4037

css:;

1、white-space:

處理文字中的空白符,比如空格和換行符

值:normal: 預設。空白會被瀏覽器忽略。

pre:空白會被瀏覽器保留。其行為方式類似 html 中的標籤。

nowrap:文字不會換行,文字會在在同一行上繼續,直到遇到

標籤為止

例子:開票單位:

;2、display:flex

flex-wrap: wrap

讓彈性盒元素在必要的時候拆行

flex-wrap:

nowrap:預設值。規定靈活的專案不拆行或不拆列。

wrap: 規定靈活的專案在必要的時候拆行或拆列。

wrap-reverse:規定靈活的專案在必要的時候拆行或拆列,但是以相反的順序。

initial:設定該屬性為它的預設值

inherit:從父元素繼承該屬性

flex-direction:

設定 元素內彈性盒元素的方向為相反的順序:

row:預設值。靈活的專案將水平顯示,正如乙個行一樣。

row-reverse:與 row 相同,但是以相反的順序。

column:靈活的專案將垂直顯示,正如乙個列一樣

column-reverse:與 column 相同,但是以相反的順序

initial:設定該屬性為它的預設值。

inherit:從父元素繼承該屬性。

flex-flow:

讓彈性盒的元素以相反的順序顯示,且在必要的時候進行拆行:

此屬性是 flex-direction 和 flex-wrap 屬性的復合屬性。

例子:flex-flow:row-reverse wrap;

flex-grow: 屬性用於設定或檢索彈性盒子的擴充套件比率。

注意:如果元素不是彈性盒物件的元素,則 flex-grow 屬性不起作用。

number:乙個數字,規定專案將相對於其他靈活的專案進行擴充套件的量。預設值是 0。

initial:設定該屬性為它的預設值。

inherit:從父元素繼承該屬性。

例子:div:nth-of-type(1)

div:nth-of-type(2) //讓第二個元素的寬度為其他元素的三倍:

object.style.flexgrow="5"

;3、position:

屬性規定元素的定位型別

absolute:生成【絕對】定位的元素,相對於 static 定位以外的第乙個【父元素】進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed:生成【絕對】定位的元素,相對於瀏覽器【視窗】進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定

relative:生成相對定位的元素,相對於其正常位置進行定位。

因此,"left:20" 會向元素的 left 位置新增 20 畫素。

static:預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。

inherit:規定應該從父元素繼承 position 屬性的值

;4、justify-content【橫向】、align-content【縱向】

注意:使用此屬性,必須設定display: flex

用於設定或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。

flex-start:預設值。專案位於容器的開頭。

flex-end:專案位於容器的結尾。

center:專案位於容器的中心。

space-between:專案位於各行之間留有空白的容器內。

space-around:專案位於各行之前、之間、之後都留有空白的容器內

;5、align-content【縱向】、justify-content【橫向】

注意:使用此屬性,必須設定display: flex

在彈性容器內的各項沒有占用交叉軸上所有可用的空間時對齊容器內的各項(垂直)

stretch:預設值。元素被拉伸以適應容器。

center:元素位於容器的中心。

flex-start:元素位於容器的開頭

flex-end:元素位於容器的結尾。

space-between:元素位於各行之間留有空白的容器內。

space-around:元素位於各行之前、之間、之後都留有空白的容器內。

CSS 01學習筆記

css網頁美容師 讓html從樣式中脫離開來,實現html專注去做結構呈現,樣式交給css 作用 設定版面的布局和外觀顯示樣式 一 引入css樣式表 1 行內式 內聯樣式 標籤名 style 屬性1 屬性值1 屬性2 屬性值2 屬性3 屬性值3 內容style color red font size...

CSS 01內容處理篇

作為乙個前端切圖仔,一定會遇到內頁面布局的時候內容顯示,太短或者太長,看著特別不舒服的時候,直接設定寬度?下面介紹幾種常見的解決方式 1 overflow wrap css 屬性 overflow wrap 是用來說明當乙個不能被分開的字串太長而不能填充其包裹盒時,為防止其溢位,瀏覽器是否允許這樣的...

前端學習之CSS(01)概述及新增方式

html 網頁的內容 css 內容的樣式 charset utf 8 title head 天使投資指早期投資,尤其指個人早期投資。p vc,venture capital,所謂風險投資 創業投資,是相對靠前的非公開市場股權投資。p pe,private equity,所謂私募資本 非公開市場資本,...