css3常用

CSS3文本效果

text-shadow:適用于文本陰影作郭,可以指定是水平陰影還是垂直陰影鲸匿、模糊的距離以及陰影的顏色。

box-shadow:適用于盒子陰影镊绪。同上匀伏。可以在::after和::before兩個偽元素中添加陰影效果蝴韭。

text-overflow:文本溢出屬性指定應(yīng)向用戶如何顯示溢出內(nèi)容

有兩個屬性:ellipsis(以省略號的形式隱藏內(nèi)容)和clip(直接截斷內(nèi)容)

word-wrap:強制換行够颠,但是單詞中間不換行

word-break:單詞可進行拆分然后換行

CSS3 2D轉(zhuǎn)換

2D變換方法:

translate():平移

rotate():在一個給定度數(shù)順時針旋轉(zhuǎn)的元素

scale():縮放

skew():傾斜

matrix():矩陣

為了添加某種效果可以從一個樣式轉(zhuǎn)變到另一個的時候,無需使用flash動畫或JavaScript榄鉴,只需要鼠標(biāo)移動到上面就可以履磨。

我們要實現(xiàn)這樣的效果,必須規(guī)定兩項內(nèi)容:

指定要添加效果的 CSS屬性效果的持續(xù)時間

CSS3過渡

所有的過渡屬性:

transition:簡寫屬性庆尘,用于在一個屬性中設(shè)置四個過渡屬性

transition-property:規(guī)定應(yīng)用過渡的CSS屬性的名稱

transition-duration:定義過渡效果花費的時間剃诅,默認是0

transition-timing-function:規(guī)定過渡效果的時間曲線,默認是‘ease‘

transition-delay:規(guī)定過渡時間何時開始驶忌,默認是0

CSS3彈性盒子(Flex Box)

是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素擁有恰當(dāng)?shù)男袨榈牟季址绞健?/p>

彈性盒子由彈性容器和彈性子元素組成矛辕。彈性容器通過設(shè)置display屬性的值為flexinline-flex(行內(nèi)元素設(shè)置為Flex布局)將其定義為彈性容器。

注:設(shè)為了Flex布局以后位岔,子元素的float如筛、clear和virtical-align屬性將失效。

彈性容器內(nèi)包含一個或多個彈性子元素抒抬。

注意:彈性容器外及彈性子元素內(nèi)是正常渲染的杨刨,彈性盒子只定義了彈性元素的如何在彈性容器內(nèi)布局。彈性子元素通常在彈性盒子內(nèi)一行顯示擦剑,默認情況每個容器只有一行妖胀。

修改排列方式:rtl(right to left)

body { direction: rtl; }

彈性容器上的屬性共有6個:

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

  • align-content

①flex-direcion:決定了主軸的方向(即彈性子元素在父容器中的排列方向)。

語法:flex-direction: row | row-reverse | column | column-reverse

row:橫向從左到右排列惠勒。默認的排列方式赚抡。

row-reverse:反轉(zhuǎn)橫向排列(右對齊,從后往前排纠屋,最后一項排在最前面)

column:縱向排列涂臣。

column-reverse:反轉(zhuǎn)縱向排列,從后往前排,最后一項排在最上面赁遗。

②flex-wrap:默認情況下署辉,項目都排在一條線上,該屬性定義如果一條軸線排不下岩四,如何換行哭尝。

語法:flex-wrap: nowrap | wrap | wrap-reverse

③flex-flow:該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值是row nowrap剖煌。

④justify-content:定義了項目在主軸上的對齊方式材鹦,把彈性項沿著彈性容器的主軸線對齊。

語法:justify-content: flex-start | flex-end | center | space-between | space-around

flex-start:左對齊

flex-end:右對齊

center:居中

space-between:兩端對齊耕姊,項目之間的間隔都是相等的

space-around:每個項目兩側(cè)的間隔相等桶唐,所以項目之間的間隔比項目與邊框的間隔大一倍。

⑤align-items:定義項目在交叉軸上如何對齊箩做。

語法:align-items: flex-start | flex-end | center | baseline | strench

baseline:項目的第一行文字的基線對齊

strench(默認值):如果項目未設(shè)置高度或設(shè)為auto莽红,將占滿整個容器的高度。

⑥align-content:定義了多根軸線的對齊方式邦邦。如果項目只有一根軸線安吁,該屬性不起作用。

語法:align-content: flex-start | flex-end | center | space-between | space-around | strench(默認值)

彈性子元素上的6個屬性:

  • order

  • flex-grow

  • flex-shrink

  • flex-basis

  • flex

  • align-self

①order :定義彈性子元素的排列順序燃辖。數(shù)值越小鬼店,排列越靠前,默認為0黔龟。

語法:order: <integer>

②flex-grow:定義項目的放大比例妇智,默認為0,即如果存在剩余空間氏身,也不放大巍棱。

語法:flex-grow: <number>

③flex-shrink:定義項目的縮小比例,默認為1蛋欣,即如果空間不足航徙,該項目將縮小。負值對該屬性無效陷虎。

語法:flex-shrink: <number>

④flex-basis:定義了在分配多余空間之前到踏,項目占據(jù)的主軸空間。默認值為auto

⑤flex屬性是flex-grow尚猿、flex-shrink窝稿、flex-basis的簡寫,默認值是 0 1 auto凿掂。建議優(yōu)先使用這個屬性伴榔。該屬性有兩個快捷值: auto(1 1 auto) 和none(0 0 auto)。

⑥align-self:允許單個彈性子元素有與其他子元素不一樣的對齊方式〕碧荩可覆蓋align-items屬性骗灶,默認值為auto惨恭,表示繼承彈性容器的align-items屬性秉馏,如果沒有父元素,則等同于strench脱羡。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末萝究,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子锉罐,更是在濱河造成了極大的恐慌帆竹,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件脓规,死亡現(xiàn)場離奇詭異栽连,居然都是意外死亡,警方通過查閱死者的電腦和手機侨舆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門秒紧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人挨下,你說我怎么就攤上這事熔恢。” “怎么了臭笆?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵叙淌,是天一觀的道長。 經(jīng)常有香客問我愁铺,道長鹰霍,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任茵乱,我火速辦了婚禮茂洒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘似将。我一直安慰自己获黔,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布在验。 她就那樣靜靜地躺著玷氏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪腋舌。 梳的紋絲不亂的頭發(fā)上盏触,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天,我揣著相機與錄音,去河邊找鬼赞辩。 笑死雌芽,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的辨嗽。 我是一名探鬼主播世落,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼糟需!你這毒婦竟也來了屉佳?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤洲押,失蹤者是張志新(化名)和其女友劉穎武花,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體杈帐,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡体箕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了挑童。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片累铅。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖炮沐,靈堂內(nèi)的尸體忽然破棺而出争群,到底是詐尸還是另有隱情,我是刑警寧澤大年,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布换薄,位于F島的核電站,受9級特大地震影響翔试,放射性物質(zhì)發(fā)生泄漏轻要。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一垦缅、第九天 我趴在偏房一處隱蔽的房頂上張望冲泥。 院中可真熱鬧,春花似錦壁涎、人聲如沸凡恍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽嚼酝。三九已至,卻和暖如春竟坛,著一層夾襖步出監(jiān)牢的瞬間闽巩,已是汗流浹背钧舌。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留涎跨,地道東北人洼冻。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像隅很,于是被迫代替她去往敵國和親撞牢。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 1外构、align-content(水平居中) 2普泡、align-items(垂直居中) 3、align-self(單獨...
    宋小菜_菜菜閱讀 328評論 0 0
  • 彈性盒是css3的一種新的布局模式审编。 css3彈性盒,是一種當(dāng)頁面需要適應(yīng)不同屏幕大小以及設(shè)備類型時確保元素擁有恰...
    槑心槑肺_45c3閱讀 890評論 0 0
  • 最近在寫項目的時候有時候用到了一些CSS3的屬性歧匈,大部分時候都是為了趕項目直接拿過來用了垒酬,用完就忘了,防止對一些組...
    suzixuan閱讀 1,845評論 0 0
  • CSS3 是 CSS 的修訂版本件炉。CSS3 的開發(fā)是朝著模塊化發(fā)展的勘究。 簡介 CSS3 被拆分為“模塊”。舊規(guī)范已...
    神齊閱讀 971評論 0 2
  • 1斟冕、CSS3 彈性盒子(Flex Box) 彈性盒子是 CSS3 的一種新的布局模式口糕。 CSS3 彈性盒( Fle...
    maskerII閱讀 441評論 0 1