三、前端開發語言體系-CSS

文章目錄

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

CSS3

瀏覽器前綴

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

前綴描述

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

流、元素與基本尺寸

每個元素都有兩個盒子：外在盒子和內在盒子。外在盒子負責元素是否可以一行顯示，還是只能換行顯示；內在盒子（容器盒子）負責寬高、內容呈現等等。

• display: block實際由外在的塊級盒子和內在的塊級容器盒子組成。
• display: inline-block實際由外在的內聯盒子和內在的塊級容器盒子組成。
• display: inline內外均是內聯。

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

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

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

盒模型四大家族

content

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

padding

• 設置元素的 4 個內邊距

margin

• 設置元素的 4 個外邊距

border

• 設置上下左右 4 個邊框的樣式

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

流的破壞與保護

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

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

層疊規則

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

文本處理

font-size設置不同的HTML元素的尺寸，瀏覽器默認font-size是16px。

font-family為段落設置字體。

文本控制：

word-break：在合適的點換行

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

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

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

text-indent：規定文本塊中首行文本的縮進

text-transform：控制字符大小寫

元素顯示與隱藏

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

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

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

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

overflow 屬性設置當內容溢出元素框時發生的事情，可選值為 visible、hidden、scroll、auto 和 inherit。

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

變形

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

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

• 轉換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軸偏移

• 旋轉rotate

transform：rotate()，默認為順時針旋轉

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

• 縮放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平面上的移動,旋轉，傾斜,縮放,現在我們來了解一下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軸上旋轉 ,z軸上的1與坐標原點連接 transform:rotate3d(0,1,0,45deg) //表示在y軸上 transform:rotate3d(1,0,0,45deg) //表示在x軸上 transform:rotate3d(1,1,1,45deg) //在坐標為1,1,1與坐標原點連接線上旋轉

介紹兩個新屬性：

透視效果

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

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

變形風格

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

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

過渡

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

transition有四個屬性值：

transition-property

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

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

transition-duration

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

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

transition-timing-function

• 定義過渡的變化函數

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

transition-delay

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

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

動畫

CSS3的animation屬性可以像Flash制作動畫一樣，通過控制關鍵幀來控制動畫的每一步，實現更為復雜的動畫效果。

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

ainimation實現動畫效果主要由兩部分組成：

用關鍵幀聲明一個動畫；

在animation調用關鍵幀聲明的的動畫。

animation動畫屬性:

屬性描述備注

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

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

一個@keyframes中的樣式規則是由多個百分比構成的，可以在這個規則上創建多個百分比，從而達到一種不斷變化的效果。另外，@keyframes必須要加webkit前綴。

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

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

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

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

值說明

animationname	必需的。定義animation的名稱。
keyframes-selector	必需的。動畫持續時間的百分比。合法值：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，他們都是隨著時間改變元素的屬性值，其主要區別在于：transition需要觸發一個事件才會隨著時間改變其CSS屬性；animation在不需要觸發任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果。

Flex彈性盒子

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

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

容器上有以下6個屬性:

• flex-direction

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

• flex-wrap

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

• flex-flow

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

• justify-content

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

• align-items

  • align-items屬性定義項目在交叉軸上如何對齊。假設交叉軸從上到下。
  • 語法：align-items: flex-start | flex-end | center | baseline | stretch;
    • flex-start：交叉軸的起點對齊。
    • flex-end：交叉軸的終點對齊。
    • center：交叉軸的中點對齊。
    • baseline: 項目的第一行文字的基線對齊。
    • stretch（默認值）：如果項目未設置高度或設為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：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
    • tretch（默認值）：軸線占滿整個交叉軸。
      

CSS工程化

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

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

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

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

這三種預處理的詳細語法請看這篇博客 CSS預處理器語法

CSS 后處理器 是對 CSS 進行處理，并最終生成 CSS 的 預處理器，它屬于廣義上的 CSS 預處理器。

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

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

原始代碼 .container { display: flex; } .item { flex: 1; }將原始的 標準 CSS，編譯為處理了兼容性的生產環境 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 是一個高效、簡單、易擴展并且模塊化的 CSS 預處理器，是 Stylus 的作者的新作。它的模塊化做的非常好，你可以按照實際需要，組合 CSS 框架。Rework 還很年輕，還需要更多的時間積累。

Rework有以下特點：

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

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

PostCSS有以下特點：

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

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

參考文章

CSS世界

CSS元素顯示與隱藏

CSS變形與動畫

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

css flex彈性布局學習總結

css預處理器

CSS 預處理器與 CSS 后處理器

Node.JS的CSS壓縮器 clean-css

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。