“约见”面试官系列之常见面试题第三十七篇之CSS3新属性(建议收藏)
目錄
CSS3
結(jié)構(gòu)(位置)偽類選擇器(CSS3)
目標(biāo)偽類選擇器(CSS3)
屬性選擇器(CSS3)
偽元素選擇器(CSS3,重要)
CSS3盒模型(重要)
顏色模式
盒子陰影(CSS3)
文本陰影text-shadow
漸變(放在background里用)
transition過渡效果屬性(重點(diǎn))
transform屬性(重點(diǎn))
animation動(dòng)畫(關(guān)鍵幀動(dòng)畫,重點(diǎn))
web字體(常用)
多列布局(用于文本)
伸縮布局(重點(diǎn))
1. display: flex;屬性(伸縮布局中必設(shè))
2. justify-content屬性(重要)
3. flex-flow 屬性(flex-direction 和 flex-wrap 屬性的復(fù)合屬性)
4. flex-grow 屬性(擴(kuò)展規(guī)則)
5. flex-shrink 屬性(收縮規(guī)則)
6. flew屬性(flex-grow、flex-shrink和flex-basis的簡(jiǎn)寫屬性)
align-items屬性
align-self 屬性
CSS3
css3新增的屬性大多數(shù)要添加前綴以達(dá)兼容。
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |
結(jié)構(gòu)(位置)偽類選擇器(CSS3)
- +:獲取當(dāng)前元素的相鄰的滿足條件的元素。
- ~:獲取當(dāng)前元素滿足條件的兄弟元素。
- :first-child :選取屬于其父元素的首個(gè)子元素的指定選擇器
- :last-child :選取屬于其父元素的最后一個(gè)子元素的指定選擇器
- :nth-child(n) : 匹配屬于其父元素的第 N 個(gè)子元素,不論元素的類型
- :nth-last-child(n) :選擇器匹配屬于其元素的第 N 個(gè)子元素的每個(gè)元素,不論元素的類型,從最后一個(gè)子元素開始計(jì)數(shù)。
n 可以是數(shù)字、關(guān)鍵詞或公式,even偶數(shù),odd奇數(shù) - :first-of-type :選擇屬于其父元素的首個(gè)
元素的每個(gè)
元素。
- :last-of-type :選擇屬于其父元素的最后
元素的每個(gè)
元素。
- :nth-of-type :選擇屬于其父元素第n個(gè)
元素的每個(gè)
元素。
目標(biāo)偽類選擇器(CSS3)
:target目標(biāo)偽類選擇器 :選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素
屬性選擇器(CSS3)
選取標(biāo)簽帶有某些特殊屬性的選擇器 我們成為屬性選擇器
/* 獲取到 擁有 該屬性的元素 */ div[class] {/* 查找所有擁有class屬性的div */ } div[class^=font] { /* class^=font 表示 font 開始位置就行了 */color: pink; } div[class$=footer] { /* class$=footer 表示 footer 結(jié)束位置就行了 */color: skyblue; } div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */color: green; }?
偽元素選擇器(CSS3,重要)
在E元素內(nèi)部的開始位置和結(jié)束位創(chuàng)建一個(gè)元素,該元素為行內(nèi)元素,且必須要結(jié)合content屬性使用。
?
E:after、E:before 在舊版本里是偽元素,CSS3的規(guī)范里**“:”用來表示偽類,“::”用來表示偽元素,但是在高版本瀏覽器下E:after、E:before會(huì)被自動(dòng)識(shí)別為E::after、E::before,這樣做的目的是用來做兼容處理。
":" 與 “::” 區(qū)別在于區(qū)分偽類和偽元素
之所以被稱為偽元素,是因?yàn)樗麄儾皇钦嬲捻撁嬖?#xff0c;html沒有對(duì)應(yīng)的元素,但是其所有用法和表現(xiàn)行為與真正的頁面元素一樣,可以對(duì)其使用諸如頁面元素一樣的css樣式,表面上看上去貌似是頁面的某些元素來展現(xiàn),實(shí)際上是css樣式展現(xiàn)的行為,因此被稱為偽元素。是偽元素在html代碼機(jī)構(gòu)中的展現(xiàn),可以看出無法偽元素的結(jié)構(gòu)無法審查。
注意:
偽元素:before和:after添加的內(nèi)容默認(rèn)是inline元素**;這個(gè)兩個(gè)偽元素的content屬性,表示偽元素的內(nèi)容,設(shè)置:before和:after時(shí)必須設(shè)置其content屬性,否則偽元素就不起作用。
CSS3盒模型(重要)
CSS3中可以通過box-sizing 來指定盒模型,即可指定為content-box、border-box,這樣我們計(jì)算盒子大小的方式就發(fā)生了改變。
可以分成兩種情況:
1、**box-sizing: content-box ** 盒子大小為 width + padding + border ,content-box:此值為其默認(rèn)值,其讓元素維持W3C的標(biāo)準(zhǔn)Box Mode。
2、box-sizing: border-box 盒子大小為 width ,就是說 padding 和 border 是包含到width里面的。
注:上面的標(biāo)注的width指的是CSS屬性里設(shè)置的width: length,content的值是會(huì)自動(dòng)調(diào)整的。
顏色模式
- R紅色,G綠色,B藍(lán)色,A透明度
- H色調(diào)色相,0或360表示紅色,120表示綠色,240表示藍(lán)色,取值為0~360。
- S飽和度,取值0~100%。
- L亮度,取值0~100%。
- A透明度,取值0~1。
盒子陰影(CSS3)
box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內(nèi)/外陰影;
(前兩個(gè)必寫)
文本陰影text-shadow
text-shadow:x軸 y軸 模糊半徑 顏色;
模糊半徑和顏色為可選項(xiàng)。可添加多層。
漸變(放在background里用)
linear-gradient ([[ | to <side-or-corner],] ? , [,…]);
angle漸變方向:
- to left 從右到左,相當(dāng)于279deg
- to right 從左到右,相當(dāng)于90deg
- to top 從下到上,相當(dāng)于0deg
- to bottom 從上到下,相當(dāng)于180deg(默認(rèn))
= <color起止顏色>[<length用長度指定起止色位置> | <percentage用百分比指定>]?
background:linear-gradient(to left,red 50px,blue);?
radial-gradient ([ [ || ] [at ] ?, | at ]?, [,…]);
shape漸變的形狀:
- ellipse表示橢圓形(默認(rèn))
- circle表示圓形
size大小:
- closest-side:指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
- closest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最近的角
- farthest-side:指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的邊
- farthest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的角
at 坐標(biāo):
默認(rèn)正中心,可以是top bottom left right,也可以是length用長度指定起止位置和percentage用百分比。
= <color起止顏色>[<length用長度指定起止色位置> | <percentage用百分比指定>]?
background: radial-gradient(circle closest-side at 50px 50px, red,blue);?
repeating-linear-gradient與線性漸變語法一樣。
repeating-radial-gradient與徑向漸變語法一樣,只不過只要寫要重復(fù)的部分即可。
?
transition過渡效果屬性(重點(diǎn))
transition: property duration timing-function delay;
只能為有具體值的屬性添加,從某個(gè)值到某個(gè)數(shù)值。過渡完會(huì)恢復(fù)原來的樣子。
transiton屬一個(gè)簡(jiǎn)寫屬性,有以下取值(可單設(shè)置,可多寫設(shè)置多過渡):
| transition-property | 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。(必設(shè))all代表所有樣式(少用) |
| transition-duration | 規(guī)定完成過渡效果需要多少秒或毫秒。(必設(shè)) |
| transition-timing-function | 規(guī)定速度效果的速度曲線函數(shù)。 |
| transition-delay | 定義過渡效果何時(shí)開始。 |
| linear | 規(guī)定以相同速度開始至結(jié)束的過渡效果(等于 cubic-bezier(0,0,1,1))。 |
| ease | 規(guī)定慢速開始,然后變快,然后慢速結(jié)束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。默認(rèn) |
| ease-in | 規(guī)定以慢速開始的過渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
| ease-out | 規(guī)定以慢速結(jié)束的過渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
| ease-in-out | 規(guī)定以慢速開始和結(jié)束的過渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。 |
transform屬性(重點(diǎn))
transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。參照點(diǎn)為元素左上角,個(gè)別除外。轉(zhuǎn)換完會(huì)恢復(fù)原來的樣子。
3d旋轉(zhuǎn)規(guī)律:左手法則,大拇指為當(dāng)前坐標(biāo)軸的下方向,手指環(huán)繞的方向就是正方向。
可以為一個(gè)元素添加多個(gè)transform,但添加順序要注意,因?yàn)檗D(zhuǎn)化需注意軸的變化引起的變化。
- transform: none|transform-functions;
| none | 定義不進(jìn)行轉(zhuǎn)換。 |
| matrix(n,n,n,n,n,n) | 定義 2D 轉(zhuǎn)換,使用六個(gè)值的矩陣。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉(zhuǎn)換,使用 16 個(gè)值的 4x4 矩陣。 |
| translate(x,y) | 定義 2D 移動(dòng)。可填一個(gè)值或兩個(gè)值。 |
| translate3d(x,y,z) | 定義 3D 移動(dòng)。必須三個(gè)值。 |
| translateX(x) | 定義轉(zhuǎn)換(移動(dòng)),只是用 X 軸的值。 |
| translateY(y) | 定義轉(zhuǎn)換(移動(dòng)),只是用 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉(zhuǎn)換(移動(dòng)),只是用 Z 軸的值。 |
| scale(x,y) | 定義 2D 縮放。1不會(huì)縮放,大于1.01放大,小于則縮小。只設(shè)一個(gè)值則等比例縮放 |
| scale3d(x,y,z) | 定義 3D 縮放。 |
| scaleX(x) | 通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。 |
| scaleY(y) | 通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。 |
| scaleZ(z) | 通過設(shè)置 Z 軸的值來定義 3D 縮放轉(zhuǎn)換。 |
| rotate(angle) | 定義 2D 旋轉(zhuǎn),在參數(shù)中規(guī)定角度deg。 正數(shù)順時(shí)針,負(fù)數(shù)逆時(shí)針。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉(zhuǎn)。x代表x軸方向上的一個(gè)向量值,y、z也是如此,然后求出三個(gè)向量的對(duì)角線,再要對(duì)角線旋轉(zhuǎn)。 |
| rotateX(angle) | 定義沿著 X 軸的 3D 旋轉(zhuǎn)。 rotatex的旋轉(zhuǎn)正方向是順時(shí)針。 |
| rotateY(angle) | 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。rotatey的旋轉(zhuǎn)正方向是逆時(shí)針。 |
| rotateZ(angle) | 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。rotatez的旋轉(zhuǎn)正方向是順時(shí)針 |
| skew(x-angle,y-angle) | 定義對(duì)象以其中心位置沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。會(huì)改變?cè)匦螤睢T趨?shù)中規(guī)定某軸傾斜角度deg,如果角度為正,則往當(dāng)前軸的負(fù)方向斜切,反之相反。先x軸后y軸斜切 |
| skewX(angle) | 定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。 |
| skewY(angle) | 定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。 |
| perspective(n) | 為 3D 轉(zhuǎn)換元素定義透視視圖。 |
- transform-origin: x-axis y-axis [z-axis]; 屬性允許您改變被轉(zhuǎn)換元素的位置。
x軸和y軸可設(shè)置為length數(shù)值 或 百分比 或top、left、right、bottom、center的組合。z軸只能設(shè)置為length數(shù)值。
- transform-style 使被轉(zhuǎn)化的子元素保留其3D轉(zhuǎn)換,因?yàn)閠ransform和transition變化后都會(huì)恢復(fù)原來樣子。(在父元素中設(shè)置)
| float | 子元素將不保留其3D位置——平面方式 |
| preserve-3d | 子元素將保留其3D位置——立體方式 |
- perspective: number元素距離視圖的距離,以像素計(jì) | none默認(rèn)值,與 0 相同,不設(shè)置透視; 屬性定義 3D 元素距視圖的距離,以像素計(jì)。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當(dāng)為元素定義 perspective 屬性時(shí),其子元素會(huì)獲得透視效果,而不是元素本身。
注釋:perspective 屬性只影響 3D 轉(zhuǎn)換元素。
- perspective-origin: x-axis y-axis; 屬性定義 3D 元素所基于的 X 軸和 Y 軸。該屬性規(guī)定了鏡頭在平面上的的位置,默認(rèn)放在元素中心。
可設(shè)置為length數(shù)值 或 百分比 或top、left、right、bottom、center的組合。
animation動(dòng)畫(關(guān)鍵幀動(dòng)畫,重點(diǎn))
css3中的動(dòng)畫為關(guān)鍵幀動(dòng)畫,即告訴系統(tǒng)兩個(gè)狀態(tài)的不同,中間的補(bǔ)間動(dòng)畫系統(tǒng)完成。所以設(shè)置動(dòng)畫,主要設(shè)置的是關(guān)鍵幀。
- @keyframes 規(guī)則(主要兼容添加前綴)設(shè)置關(guān)鍵幀
@keyframes animationname {keyframes-selector {css-styles;}}
| animationname | 必需。定義動(dòng)畫的名稱。 |
| keyframes-selector | 必需。動(dòng)畫時(shí)長的百分比。合法的值:0-100%;from(與 0% 相同),to(與 100% 相同) |
| css-styles | 必需。一個(gè)或多個(gè)合法的 CSS 樣式屬性。 |
?
- animation 屬性是一個(gè)簡(jiǎn)寫屬性,用于設(shè)置六個(gè)動(dòng)畫屬性:
animation: name duration timing-function delay iteration-count direction;
| animation-name | 規(guī)定需要綁定到選擇器的 keyframe 名稱。 |
| animation-duration | 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間,以秒或毫秒計(jì)。 (必設(shè)) |
| animation-timing-function | 規(guī)定動(dòng)畫的速度曲線。ease默認(rèn),低速開始然后加快,減速結(jié)束;ease-in低速開始;ease-out低速結(jié)束;ease-in-out低速開始和結(jié)束;linear勻速;cubic-bezier(n,n,n,n)自定義。 |
| animation-delay | 規(guī)定在動(dòng)畫開始之前的延遲。默認(rèn)為0,單位s或ms。 |
| animation-iteration-count | 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。默認(rèn)為1,infinite為無限次。 |
| animation-direction | 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。默認(rèn)normal正常播放,alternate 動(dòng)畫應(yīng)該輪流反向播放。 |
注釋:請(qǐng)始終規(guī)定 animation-duration 屬性,否則時(shí)長為 0,就不會(huì)播放動(dòng)畫了。
steps(數(shù)值) 可以讓過渡或動(dòng)畫(在animation-timing-function設(shè)置)分為指定的幾次完成。
- animation-play-state: paused規(guī)定動(dòng)畫已暫停 | running規(guī)定動(dòng)畫正在運(yùn)行;
animation-play-state 屬性規(guī)定動(dòng)畫正在運(yùn)行還是暫停。
- animation-fill-mode 屬性規(guī)定動(dòng)畫在播放之前或之后,其動(dòng)畫效果是否可見。
注釋:其屬性值是由逗號(hào)分隔的一個(gè)或多個(gè)填充模式關(guān)鍵詞。
animation-fill-mode : none | forwards | backwards | both;
| none | 不改變默認(rèn)行為。 |
| forwards | 當(dāng)動(dòng)畫完成后,保持最后一個(gè)屬性值(在最后一個(gè)關(guān)鍵幀中定義)。 |
| backwards | 在 animation-delay 所指定的一段時(shí)間內(nèi),在動(dòng)畫顯示之前,立即應(yīng)用開始屬性值(在第一個(gè)關(guān)鍵幀中定義)。 |
| both | 向前和向后填充模式都被應(yīng)用。 即forwords和backwards都設(shè)置。 |
web字體(常用)
字體格式:TureType(.ttf)、OpenType(.otf)、Web Open Font Format(.woff)、Embedd Open Type(.eot)、SVG(.svg)。
上網(wǎng)下載(要填寫這種字體的文字),使用類似于字體圖標(biāo)那樣要聲明。
http://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index
多列布局(用于文本)
- column-count 屬性規(guī)定元素應(yīng)該被分隔的列數(shù)。
?
- column-gap 屬性規(guī)定兩列之間的間隔。
?
- column-rule 屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則。(簡(jiǎn)寫屬性)
?
| column-rule-width | 規(guī)定列之間的間隔線寬度規(guī)則。 thin纖細(xì),medium中等,thick寬厚,length規(guī)定寬度。 |
| column-rule-style | 規(guī)定列之間的間隔線樣式規(guī)則。 none沒有,hidden隱藏,dotted點(diǎn)狀,dashed虛線,solid實(shí)線,double雙線,groove、ridge、inset,outset 定義3D**效果,該效果取決于寬度和顏色值。 。 |
| column-rule-color | 規(guī)定顏色規(guī)則 |
- column-width 屬性規(guī)定列的寬度。
?
- column-span 屬性規(guī)定元素應(yīng)橫跨多少列。
?
伸縮布局(重點(diǎn))
版心一般設(shè)有mix-width或max-width。
1. display: flex;屬性(伸縮布局中必設(shè))
display: flex; 如果一個(gè)容器設(shè)置了這個(gè)屬性,那么這個(gè)盒子里面的所有之間子元素都會(huì)自動(dòng)的變成伸縮項(xiàng)(flex item)。
2. justify-content屬性(重要)
justify-content 屬性 用于設(shè)置或檢索彈性盒子元素在主軸(橫軸)方向上的對(duì)齊方式。flex-direction設(shè)置什么排列方式,那個(gè)方向就是主軸,它的相反垂直/水平則是側(cè)軸。注意兼容。
**提示:**使用 align-content 屬性對(duì)齊交叉軸上的各項(xiàng)(垂直)。
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;?
| flex-start | 默認(rèn)值。項(xiàng)目位于容器的開頭。 |
| flex-end | 項(xiàng)目位于容器的結(jié)尾。 |
| center | 項(xiàng)目位于容器的中心。 |
| space-between | 項(xiàng)目位于各行之間留有空白的容器內(nèi)。 |
| space-around | 項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。 |
| initial | 設(shè)置該屬性為它的默認(rèn)值。 |
| inherit | 從父元素繼承該屬性。 |
3. flex-flow 屬性(flex-direction 和 flex-wrap 屬性的復(fù)合屬性)
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性,即flex-flow 為簡(jiǎn)寫屬性。
- flex-flow 屬性用于設(shè)置或檢索彈性盒模型對(duì)象的子元素排列方式。
- flex-direction 屬性規(guī)定靈活項(xiàng)目的方向。
- flex-wrap 屬性規(guī)定flex容器是單行或者多行,同時(shí)橫軸的方向決定了新行堆疊的方向。
**注意:**如果元素不是彈性盒對(duì)象的元素,則 flex-flow 屬性不起作用。
flex-flow: flex-direction flex-wrap|initial|inherit;?
| row | 默認(rèn)值。靈活的項(xiàng)目將水平顯示,正如一個(gè)行一樣。 從左到右。 |
| row-reverse | 與 row 相同,但是以相反的順序。 從右到左。 |
| column | 靈活的項(xiàng)目將垂直顯示,正如一個(gè)列一樣。 從上到下。 |
| column-reverse | 與 column 相同,但是以相反的順序。 從下到上。 |
| initital | ? |
| inherit | 從父元素繼承該屬性。 |
| nowrap | 默認(rèn)值。規(guī)定靈活的項(xiàng)目不拆行或不拆列。 |
| wrap | 規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列。 |
| wrap-reverse | 規(guī)定靈活的項(xiàng)目在必要的時(shí)候拆行或拆列,但是以相反的順序。 |
4. flex-grow 屬性(擴(kuò)展規(guī)則)
flex-grow 屬性用于設(shè)置或檢索彈性盒子的擴(kuò)展比率。
**注意:**如果元素不是彈性盒對(duì)象的元素,則 flex-grow 屬性不起作用。
?
number一個(gè)數(shù)字,規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。默認(rèn)值是 0。 越大相對(duì)擴(kuò)展越多。
5. flex-shrink 屬性(收縮規(guī)則)
flex-shrink 屬性指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮,其收縮的大小是依據(jù) flex-shrink 的值。
**注意:**如果元素不是彈性盒對(duì)象的元素,則 flex-shrink 屬性不起作用。
flex-shrink: number|initial|inherit;?
number一個(gè)數(shù)字,規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量。默認(rèn)值是 1。 越大相對(duì)收縮越多。
6. flew屬性(flex-grow、flex-shrink和flex-basis的簡(jiǎn)寫屬性)
flex 屬性用于設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫屬性。
**注意:**如果元素不是彈性盒模型對(duì)象的子元素,則 flex 屬性不起作用。可只填一個(gè)數(shù)值,則默認(rèn)只設(shè)置 flex-grow。
?
| flex-grow | 一個(gè)數(shù)字,規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。默認(rèn)是0 |
| flex-shrink | 一個(gè)數(shù)字,規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量。默認(rèn)是1 |
| flex-basis | 項(xiàng)目的長度。合法值:“auto”、“inherit” 或一個(gè)后跟 “%”、“px”、“em” 或任何其他長度單位的數(shù)字。一般為不用設(shè),取默認(rèn)值。 |
| auto | 與 1 1 auto 相同。 |
| none | 與 0 0 auto 相同。 |
| initial | 設(shè)置該屬性為它的默認(rèn)值,即為 0 1 auto。 |
| inherit | 從父元素繼承該屬性。 |
align-items屬性
align-items 屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對(duì)齊方式。
**提示:**使用每個(gè)彈性對(duì)象元素的 align-self 屬性可重寫 align-items 屬性。
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;?
| stretch | 默認(rèn)值。元素被拉伸以適應(yīng)容器。如果指定側(cè)軸大小的屬性值為’auto’,則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸,但同時(shí)會(huì)遵照’min/max-width/height’屬性的限制。 |
| center | 彈性盒子元素在該行的側(cè)軸(縱軸)上居中放置。(如果該行的尺寸小于彈性盒子元素的尺寸,則會(huì)向兩個(gè)方向溢出相同的長度)。 |
| flex-start | 彈性盒子元素的側(cè)軸(縱軸)起始位置的邊界緊靠住該行的側(cè)軸起始邊界。 |
| flex-end | 彈性盒子元素的側(cè)軸(縱軸)起始位置的邊界緊靠住該行的**側(cè)軸結(jié)束邊界。 ** |
| baseline | 元素位于容器的基線上。如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條,則該值與’flex-start’等效。其它情況下,該值將參與基線對(duì)齊。(少用) |
align-self 屬性
**align-self 屬性定義flex子項(xiàng)單獨(dú)在側(cè)軸(縱軸)方向上的對(duì)齊方式。 **
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;?
選項(xiàng)與align-self一樣,在子元素中使用。
本面試題為前端常考面試題,后續(xù)有機(jī)會(huì)繼續(xù)完善。我是歌謠,一個(gè)沉迷于故事的講述者。
歡迎一起私信交流。
“睡服“面試官系列之各系列目錄匯總(建議學(xué)習(xí)收藏)?
總結(jié)
以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第三十七篇之CSS3新属性(建议收藏)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: pk8/x509.pem转换为keyst
- 下一篇: 学会计需要学计算机应用吗,会计都要学什么