三、前端開發(fā)語言體系-CSS

文章目錄

• 三、前端開發(fā)語言體系-CSS
• • CSS3
  • • 瀏覽器前綴
    • 流、元素與基本尺寸
    • 盒模型四大家族
    • 流的破壞與保護(hù)
    • 層疊規(guī)則
    • 文本處理
    • 元素顯示與隱藏
    • 變形
    • 過渡
    • 動畫
    • Flex彈性盒子
    • CSS工程化
  • 參考文章

CSS3

瀏覽器前綴

為了讓 CSS3 樣式兼容，需要將某些樣式加上瀏覽器前綴：

前綴描述

-ms-	兼容IE瀏覽器
-moz-	兼容Firefox
-o-	兼容Opera
-webkit-	兼容 Chrome 和 Safari

流、元素與基本尺寸

每個元素都有兩個盒子：外在盒子和內(nèi)在盒子。外在盒子負(fù)責(zé)元素是否可以一行顯示，還是只能換行顯示；內(nèi)在盒子（容器盒子）負(fù)責(zé)寬高、內(nèi)容呈現(xiàn)等等。

• display: block實際由外在的塊級盒子和內(nèi)在的塊級容器盒子組成。
• display: inline-block實際由外在的內(nèi)聯(lián)盒子和內(nèi)在的塊級容器盒子組成。
• display: inline內(nèi)外均是內(nèi)聯(lián)。

inline-block、float、absolute（relative）均具有包裹性：尺寸由內(nèi)容決定，但永遠(yuǎn)小于外部包含塊的尺寸。

height: 100% 想要生效必須首先 html 的 body { height: 100% }，然后一層一層指定元素的高度直到該標(biāo)簽為止。當(dāng)然，絕對定位不需要這樣，因為絕對定位的寬高就是根據(jù)參照物元素計算的，在絕對定位中直接使用 height: 100% 是沒有任何問題的，前提是你的參照物元素已經(jīng)指定了height。

width: auto 可以理解為使用所有剩余的空間，而 width: 100% 就是父級 width 的100%，所以，當(dāng)父級元素剩余空間不夠時，子元素設(shè)置 auto 會占滿剩余空間，而 100% 會導(dǎo)致元素溢出。

盒模型四大家族

content

• 與 :before 及 :after 偽元素配合使用，來插入生成內(nèi)容。

padding

• 設(shè)置元素的 4 個內(nèi)邊距

margin

• 設(shè)置元素的 4 個外邊距

border

• 設(shè)置上下左右 4 個邊框的樣式

//在每個鏈接后的括號內(nèi)加上網(wǎng)址： a:after { content: " (" attr(href) ")"; }

流的破壞與保護(hù)

如果一個元素是浮動的(float:left/right)，絕對定位的(position:absolute/fixed)或者是根元素(html)，那么它被稱之為流外的元素(out-of-flow)。如果一個元素不是流外的元素，那么它被稱之為流內(nèi)的元素(in-flow)。

• float
  • float 屬性定義元素在哪個方向浮動。假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續(xù)到某一行擁有足夠的空間為止。
• absolute
  • absolute: 將對象從文檔流中拖出，使用left/right等屬性進(jìn)行絕對定位。而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補(bǔ)白和邊框
• relative
  • 對象不可層疊，但將依據(jù)left/right等屬性在正常文檔流中偏移

層疊規(guī)則

• z-index
  • z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。z-index并非只對定位元素有效，flex盒子的子元素也可以設(shè)置z-index。
• 層疊上下文
  • 層疊上下文，英文稱作”stacking context”. 是HTML中的一個三維的概念。如果一個元素含有層疊上下文，我們可以理解為這個元素在z軸上就“高人一等”。
• 層疊水平
  • 層疊水平英文稱作”stacking level”，決定了同一個層疊上下文中元素在z軸上的顯示順序。
  • 不要把層疊水平和CSS的z-index屬性混為一談。某些情況下z-index確實可以影響層疊水平，但是，只限于定位元素以及flex盒子的孩子元素；而層疊水平所有的元素都存在。
• 層疊順序
  • 層疊順序英文稱作”stacking order”，表示元素發(fā)生層疊時候有著特定的垂直顯示順序，
  • 優(yōu)先級為：層疊上下文background/border < 負(fù)z-index < block塊級盒子 < float盒子 < inline盒子 < z-index: auto或者z-index: 0 < 正z-index
• 層疊的兩個黃金準(zhǔn)則
• 誰大誰上：同一個層疊上下文領(lǐng)域內(nèi)，層疊水平大的在上面
• 后來居上：當(dāng)層疊水平一致，層疊順序相同時，DOM中后面的元素會覆蓋前面的（比如兩個absolute，后面的會覆蓋前面的，除非前面的z-index比后面的大）

文本處理

font-size設(shè)置不同的HTML元素的尺寸，瀏覽器默認(rèn)font-size是16px。

font-family為段落設(shè)置字體。

文本控制：

word-break：在合適的點換行

• normal：使用默認(rèn)換行規(guī)則
• break-all：允許任意非中日韓文文本間的單詞斷行
• keep-all：行為上與normal一致

word-wrap：允許長單詞換行到下一行

• normal：正常的換行規(guī)則
• break-word：一行單詞中實在沒有其他靠譜的換行點的時候換行

text-indent：規(guī)定文本塊中首行文本的縮進(jìn)

text-transform：控制字符大小寫

元素顯示與隱藏

display屬性設(shè)置元素的顯示方式，可選值為 none、block 和 inline。

• none 隱藏元素，不保留元素顯示時的空間。
• block塊方式顯示元素。
• inline 以內(nèi)嵌方式顯示元素（默認(rèn)值）。

visibility屬性設(shè)置是否顯示該元素，可選值為 inherit、hidden 和 visible。

• inherit 繼承父元素的 visibility 屬性設(shè)置。
• hidden 隱藏元素，但保留其所占空間。
• visible 顯示元素（默認(rèn)值）。

overflow 屬性設(shè)置當(dāng)內(nèi)容溢出元素框時發(fā)生的事情，可選值為 visible、hidden、scroll、auto 和 inherit。

• visible 內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外（默認(rèn)值）。
• hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。
• scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
• auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
• inherit 繼承父元素的 overflow 屬性設(shè)置。

變形

變形（transform）屬性允許你修改CSS視覺格式模型的坐標(biāo)空間。使用它，元素可以被轉(zhuǎn)換（translate）、旋轉(zhuǎn)（rotate）、縮放（scale）、傾斜（skew）。

transform 屬性 , 只對 block 級元素生效！

• 轉(zhuǎn)換translate

transform：translate(x軸，[ y軸 ])

transform:translate(20px,50px) //中間用逗號隔開 transform:translate(-40px,20%) //可以用 px或 %做單位 transform:translate(100px) //只表示 x軸偏移 transform:translateX(20%) //只表示 x軸偏移 transform:translateY(20%) //只表示 y軸偏移

• 旋轉(zhuǎn)rotate

transform：rotate()，默認(rèn)為順時針旋轉(zhuǎn)

transform:rotate(45deg) //順時針旋轉(zhuǎn) transform:rotate(-60deg) //逆時針旋轉(zhuǎn)

• 縮放scale

transform：scale([,])

transform:scale(1.2,2) //x軸放大1.2倍 y軸放大2倍 transform:scale(1.2) // x軸 y軸都放大1.2倍 transform:scaleX(1.2) //x軸放大1.2倍 transform:scaleY(1.2) //y軸方法1.2倍

• 傾斜skew

transform:skew([,])

transform:skew(30deg) //y軸向x軸傾斜了30度 transform:skew(30deg,30deg) //y軸向x軸傾斜了30度，x軸也向y軸偏移30度 transform:skewX(45deg) //y軸向x軸傾斜了45度 transform:skewY(60deg) //x軸向y軸傾斜了60度

這些變形技巧既可以一個個地使用，也可以組合使用

transform:translate(50px) scale(1.5); transform:translate(50px) skew(120deg);

剛才我們只是對css元素在2d平面上的移動,旋轉(zhuǎn)，傾斜,縮放,現(xiàn)在我們來了解一下3d上的動作

• transform:translate3d(x, y, z)
• transform:scale3d(x, y, z)
• transform:rotate3d(,,,)

transform:translate3d(10px,20%,200px) transform:translateX(10px) transform:translateY(20%) transform:translateZ(200px)transform:scale3d(1.2,1.2,1); //x,y軸變大1.3倍,z不變 transform:scaleZ(5) //并不會影響盒子的大小transform:rotate3d(0,0,1,45deg) //0,0,1表示在z軸上旋轉(zhuǎn) ,z軸上的1與坐標(biāo)原點連接 transform:rotate3d(0,1,0,45deg) //表示在y軸上 transform:rotate3d(1,0,0,45deg) //表示在x軸上 transform:rotate3d(1,1,1,45deg) //在坐標(biāo)為1,1,1與坐標(biāo)原點連接線上旋轉(zhuǎn)

介紹兩個新屬性：

透視效果

• perspective: none |
• length是用戶到z=0平面的距離。它用于將透視變換應(yīng)用于元素及其內(nèi)容。

perspective: none; perspective: 20px; perspective: 3.5em;

變形風(fēng)格

• transform-style:flat | preserver-3d
• 默認(rèn)為flat 扁平化，preserve-3d 保留3d空間

transform-style:flat transform-style:preserve-3d

過渡

過渡（transition）屬性可以在事件觸發(fā)元素的樣式變化時，讓效果更加細(xì)膩平滑。

transition有四個屬性值：

transition-property

• 用來指定哪個屬性使用過渡動畫效果。
• 語法：transition-property ： none | all | [ ] [ ‘,’ ]*
  • none:所有屬性都不應(yīng)用過渡效果。
  • all：默認(rèn)值。當(dāng)值為all時，元素產(chǎn)生任何屬性值變化時都將執(zhí)行transition效果。
  • ident：元素屬性名。通過ident指定具體哪些屬性。如果指定的多個屬性中有某個屬性不能應(yīng)用過渡效果，其他屬性還是生效的。

transition-property: none; transition-property: all; transition-property: sliding-vertically;

transition-duration

• 用來設(shè)置從舊屬性過渡到新屬性需要的時間，即持續(xù)時間。
• 語法：transtion-duration：< time> [, < time>]*
  • time表示過渡屬性從舊的值轉(zhuǎn)變到新的值所需要的時間。如果時長是 0s，表示不會呈現(xiàn)過渡動畫，屬性會瞬間完成轉(zhuǎn)變。不接受負(fù)值。
  • 可以指定多個時長，每個時長會被應(yīng)用到由 transition-property指定的對應(yīng)屬性上。如果指定的時長個數(shù)小于屬性個數(shù)，那么時長列表會重復(fù)。如果時長列表更長，那么該列表會被裁減。

transition-duration: 6s; transition-duration: 120ms; transition-duration: 1s, 15s; transition-duration: 10s, 30s, 230ms;

transition-timing-function

• 定義過渡的變化函數(shù)

transition-timing-function: ease //默認(rèn)值,兩頭慢,中間快 transition-timing-function: ease-in //開始慢 transition-timing-function: ease-out //結(jié)束慢 transition-timing-function: ease-in-out //開始結(jié)束慢,中間快 幅度大一點 transition-timing-function: linear //勻速 transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) //曲線,設(shè)置兩個點x,y transition-timing-function: step-start transition-timing-function: step-end transition-timing-function: steps(4, end) //分為4步,每步結(jié)尾動畫transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)

transition-delay

• transition-delay設(shè)置改變屬性值后多長時間開始執(zhí)行動畫
• 語法：transtion-delay:< time>#

transition-delay: 3s; transition-delay: 2s, 4ms;

動畫

CSS3的animation屬性可以像Flash制作動畫一樣，通過控制關(guān)鍵幀來控制動畫的每一步，實現(xiàn)更為復(fù)雜的動畫效果。

animation屬性到目前位置得到了大多數(shù)瀏覽器的支持，但是，需要添加瀏覽器前綴！

ainimation實現(xiàn)動畫效果主要由兩部分組成：

用關(guān)鍵幀聲明一個動畫；

在animation調(diào)用關(guān)鍵幀聲明的的動畫。

animation動畫屬性:

屬性描述備注

animation-name	用于指定關(guān)鍵幀動畫的名字	默認(rèn)值none，將沒有任何動畫效果，其可以用來覆蓋任何動畫
animation-duration	用來指定動畫播放所需的時間，一般以秒為單位	默認(rèn)值為0，意味著動畫周期為0，也就是沒有任何動畫效果
animation-timing-function	設(shè)置動畫的播放方式	與transition-timing-function一樣
animation-delay	指定動畫的開始時間，以秒為單位	在開始執(zhí)行動畫時需要等待的時間
animation-iteration-count	指定動畫的循環(huán)播放次數(shù)	定義動畫的播放次數(shù)，默認(rèn)為1。如果為infinite，則無限次循環(huán)播放
animation-direction	控制動畫的播放方向	默認(rèn)為nomal，每次循環(huán)都是向前播放，（0-100），另一個值為alternate，動畫播放為偶數(shù)次則向前播放，如果為基數(shù)詞就反方向播放
animation-play-state	設(shè)置動畫播放狀態(tài)	默認(rèn)為running，播放，paused，暫停
animation-fill-mode	定義動畫開始之前和結(jié)束之后發(fā)生的操作	默認(rèn)值為none，動畫結(jié)束時回到動畫沒開始時的狀態(tài)；forwards，動畫結(jié)束后繼續(xù)應(yīng)用最后關(guān)鍵幀的位置，即保存在結(jié)束狀態(tài)；backwards，讓動畫回到第一幀的狀態(tài)；both：輪流應(yīng)用forwards和backwards規(guī)則。

@keyframes就是關(guān)鍵幀。這個幀與Flash里的幀類似，一個動畫中可以有很多個幀。

一個@keyframes中的樣式規(guī)則是由多個百分比構(gòu)成的，可以在這個規(guī)則上創(chuàng)建多個百分比，從而達(dá)到一種不斷變化的效果。另外，@keyframes必須要加webkit前綴。

使用@keyframes規(guī)則，你可以創(chuàng)建動畫。創(chuàng)建動畫是通過逐步改變從一個CSS樣式設(shè)定到另一個。在動畫過程中，您可以更改CSS樣式的設(shè)定多次。

指定的變化時發(fā)生時使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。0％是開頭動畫，100％是當(dāng)動畫完成。

使用animation屬性來控制動畫的外觀，還需使用選擇器綁定動畫。為了獲得最佳的瀏覽器支持，應(yīng)該始終定義為0％和100％的選擇器。

@keyframes語法：@keyframes animationname {keyframes-selector {css-styles;}}

值說明

animationname	必需的。定義animation的名稱。
keyframes-selector	必需的。動畫持續(xù)時間的百分比。合法值：0-100%。from(和0%相同)，to (和100%相同)
css-styles	必需的。一個或多個合法的CSS樣式屬性

@keyframes mymove { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} }@-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} }

animation屬性類似于transition，他們都是隨著時間改變元素的屬性值，其主要區(qū)別在于：transition需要觸發(fā)一個事件才會隨著時間改變其CSS屬性；animation在不需要觸發(fā)任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達(dá)到一種動畫的效果。

Flex彈性盒子

flex（ flexible box：彈性布局盒模型）,是2009年w3c提出的一種可以簡潔、快速彈性布局的屬性。主要思想是給予容器控制內(nèi)部元素高度和寬度的能力。

flex只能在IE10及以上版本使用。

容器上有以下6個屬性:

• flex-direction

  • flex-direction屬性決定主軸的方向（即項目的排列方向）。
  • 語法：flex-direction: row | row-reverse | column | column-reverse;
    • row（默認(rèn)值）：主軸為水平方向，起點在左端。
    • row-reverse：主軸為水平方向，起點在右端。
    • column：主軸為垂直方向，起點在上沿。
    • column-reverse：主軸為垂直方向，起點在下沿。
      

• flex-wrap

  • 默認(rèn)情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
  • 語法：flex-wrap: nowrap | wrap | wrap-reverse ;
    • nowrap（默認(rèn)值）：不換行。
    • wrap：換行，第一行在上方。
    • wrap-reverse：換行，第一行在下方。

• flex-flow

  • flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。
  • 語法：flex-flow: < flex-direction > || < flex-wrap >;

• justify-content

  • justify-content屬性定義了項目在主軸上的對齊方式。假設(shè)主軸為從左到右。
  • 語法：justify-content: flex-start | flex-end | center | space-between | space-around;
    • flex-start（默認(rèn)值）：左對齊
    • flex-end：右對齊
    • center： 居中
    • space-between：兩端對齊，項目之間的間隔都相等。
    • space-around：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

• align-items

  • align-items屬性定義項目在交叉軸上如何對齊。假設(shè)交叉軸從上到下。
  • 語法：align-items: flex-start | flex-end | center | baseline | stretch;
    • flex-start：交叉軸的起點對齊。
    • flex-end：交叉軸的終點對齊。
    • center：交叉軸的中點對齊。
    • baseline: 項目的第一行文字的基線對齊。
    • stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
      

• align-content

  • align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
  • 語法：align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    • flex-start：與交叉軸的起點對齊。
    • flex-end：與交叉軸的終點對齊。
    • center：與交叉軸的中點對齊。
    • space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
    • space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
    • tretch（默認(rèn)值）：軸線占滿整個交叉軸。
      

CSS工程化

CSS 層疊樣式表是一門標(biāo)記語言，并不是編程語言，因此不可以自定義變量，不可以引用等，換句話說就是不具備任何語法支持，它還是有很多缺陷，這就導(dǎo)致了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發(fā)人員會使用一種稱之為 “CSS 預(yù)處理器” 的工具，提供 CSS 缺失的樣式層復(fù)用機(jī)制、減少冗余代碼，提高樣式代碼的可維護(hù)性，大大提高了前端在樣式上的開發(fā)效率。

CSS預(yù)處理器是一種專門的編程語言，用來為CSS增加一些編程特性。不需要考慮瀏覽器兼容問題，因為CSS預(yù)處理器最終編譯和輸出的仍是標(biāo)準(zhǔn)的CSS樣式。可以在CSS預(yù)處理器中：使用變量、簡單邏輯判斷、函數(shù)等基本編程技巧。

CSS預(yù)處理器種類繁多，常用的 CSS 預(yù)處理器有 Sass、Less、Stylus。

• Sass：以 .sass 為擴(kuò)展名。基于 Ruby，通過服務(wù)端處理，功能強(qiáng)大。解析效率高。需要學(xué)習(xí) Ruby 語言，上手難度高于 LESS。
• Less：以 .less 為擴(kuò)展名。基于 NodeJS，通過客戶端處理，使用簡單。功能比 SASS 簡單，解析效率也低于SASS，但在實際開發(fā)中足夠了，所以后臺人員如果需要的話，建議使用 LESS。
• Stylus，以 .styl 為擴(kuò)展名。來自Node.js社區(qū)，主要用來給Node項目進(jìn)行CSS預(yù)處理支持，在此社區(qū)之內(nèi)有一定支持者，在廣泛的意義上人氣還完全不如SASS和LESS。

這三種預(yù)處理的詳細(xì)語法請看這篇博客 CSS預(yù)處理器語法

CSS 后處理器 是對 CSS 進(jìn)行處理，并最終生成 CSS 的 預(yù)處理器，它屬于廣義上的 CSS 預(yù)處理器。

這里主要介紹兩個有名的后處理器：AutoPrefixer、clean-css，和兩個有名的后處理器框架：Rework 和 PostCss。

Autoprefixer 只做語法 Prefix 層面的兼容，處理CSS代碼之后能提高對瀏覽器的兼容性。

原始代碼 .container { display: flex; } .item { flex: 1; }將原始的 標(biāo)準(zhǔn) CSS，編譯為處理了兼容性的生產(chǎn)環(huán)境 CSS：.container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .item { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }

clean-css 是一個非常簡單的 CSS 壓縮程序，可以刪除 CSS 中一些無用的空格、評論以及每個選擇器后面的分號等。

clean-css可以在命令行中使用，也可以在Node.js中使用。在Node.js中使用為：

# Get the clean-css package var cleanCSS = require('clean-css');# Read in the source of a file or use hard-coded CSS... var source = "body { color: red; font-weight: bold; }";# Minify! var minifiedCSS = cleanCSS.process(source);

Rework 是一個高效、簡單、易擴(kuò)展并且模塊化的 CSS 預(yù)處理器，是 Stylus 的作者的新作。它的模塊化做的非常好，你可以按照實際需要，組合 CSS 框架。Rework 還很年輕，還需要更多的時間積累。

Rework有以下特點：

• JavaScript 中直接操作 CSS 解析對象，擴(kuò)展方便
• 可以自由組合模塊，按需定制 CSS 工具庫
• CSS 后處理器 的模型決定它的模塊傾向 CSS 未來標(biāo)準(zhǔn)
• 除服務(wù)器端外，也支持在瀏覽器環(huán)境運行

PostCSS 是一個 CSS 后處理器 框架，允許你通過 JavaScript 對 CSS 進(jìn)行修，是從 Autoprefixer 項目中抽象出的框架。

PostCSS有以下特點：

• 它和 Rework 非常相似，但提供了更高級的 API，更易擴(kuò)展
• 它可以在現(xiàn)有 Source Map 的基礎(chǔ)上生成新的 Source Map
• 在原有 CSS 格式的保留方面做的更好，便于開發(fā)編輯器插件
• 比 Rework 更年輕，還只有 Autoprefixer 一個成功案例

CSS 后處理器 的出現(xiàn)讓 CSS 工作流 更清晰，但現(xiàn)在他們還遠(yuǎn)未成熟，還有很多地方能夠做的更好。

參考文章

CSS世界

CSS元素顯示與隱藏

CSS變形與動畫

css3中的變形（transform）、過渡（transition）、動畫（animation）屬性講解

css flex彈性布局學(xué)習(xí)總結(jié)

css預(yù)處理器

CSS 預(yù)處理器與 CSS 后處理器

Node.JS的CSS壓縮器 clean-css

總結(jié)

以上是生活随笔為你收集整理的三、前端开发-CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。