CSS3

時間 2019-12-01

標籤 css3 css 欄目 CSS 简体版

原文原文鏈接

CSS3 新增選擇器

結構(位置)僞類選擇器（CSS3)

:first-child :選取屬於其父元素的首個子元素的指定選擇器css

:last-child :選取屬於其父元素的最後一個子元素的指定選擇器html

:nth-child(n) ：匹配屬於其父元素的第 N 個子元素，不論元素的類型html5

:nth-last-child(n) ：選擇器匹配屬於其元素的第 N 個子元素的每一個元素，不論元素的類型，從最後一個子元素開始計數。n 能夠是數字、關鍵詞或公式瀏覽器

li:first-child { /* 選擇第一個孩子 */
            color: pink;
        }
li:last-child { /* 最後一個孩子 */
            color: purple;
        }
li:nth-child(4) { /* 選擇第4個孩子 n 表明第幾個的意思 */
                color: skyblue;
        }佈局

目標僞類選擇器(CSS3)

:target目標僞類選擇器 :選擇器可用於選取當前活動的目標元素學習

:target {
color: red;
font-size: 30px;
}測試

屬性選擇器

選取標籤帶有某些特殊屬性的選擇器咱們成爲屬性選擇器flex

/* 獲取到擁有該屬性的元素 */
div[class^=font] { /* class^=font 表示 font 開始位置就好了 */
            color: pink;
        }
div[class$=footer] { /* class$=footer 表示 footer 結束位置就好了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置均可以 */
            color: green;
        }動畫

<div class="font12">屬性選擇器</div>
   <div class="font12">屬性選擇器</div>
   <div class="font24">屬性選擇器</div>
   <div class="font24">屬性選擇器</div>
   <div class="font24">屬性選擇器</div>
   <div class="24font">屬性選擇器123</div>
   <div class="sub-footer">屬性選擇器footer</div>
   <div class="jd-footer">屬性選擇器footer</div>
   <div class="news-tao-nav">屬性選擇器</div>
   <div class="news-tao-header">屬性選擇器</div>
   <div class="tao-header">屬性選擇器</div>url

僞元素選擇器（CSS3)

E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）

E::first-line 文本第一行；

E::selection 可改變選中文本的樣式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}
/* 首行特殊樣式 */
p::first-line {
  color: skyblue;
}
p::selection {
  /* font-size: 50px; */
  color: orange;
}

四、E::before和E::after

在E元素內部的開始位置和結束位建立一個元素，該元素爲行內元素，且必需要結合content屬性使用。

div::befor {
content:"開始";
}
div::after {
content:"結束";
}

E:after、E:before 在舊版本里是僞元素，CSS3的規範裏「:」用來表示僞類，「::」用來表示僞元素，可是在高版本瀏覽器下E:after、E:before會被自動識別爲E::after、E::before，這樣作的目的是用來作兼容處理。

":" 與 "::" 區別在於區分僞類和僞元素

之因此被稱爲僞元素，是由於他們不是真正的頁面元素，html沒有對應的元素，可是其全部用法和表現行爲與真正的頁面元素同樣，能夠對其使用諸如頁面元素同樣的css樣式，表面上看上去貌似是頁面的某些元素來展示，其實是css樣式展示的行爲，所以被稱爲僞元素。是僞元素在html代碼機構中的展示，能夠看出沒法僞元素的結構沒法審查

注意

僞元素:before和:after添加的內容默認是inline元素**；這個兩個僞元素的content屬性，表示僞元素的內容,設置:before和:after時必須設置其content屬性，不然僞元素就不起做用。

背景縮放(CSS3)

經過background-size設置背景圖片的尺寸，就像咱們設置img的尺寸同樣，在移動Web開發中作屏幕適配應用很是普遍。

其參數設置以下：

a) 能夠設置長度單位(px)或百分比（設置百分比時，參照盒子的寬高）

b) 設置爲cover時，會自動調整縮放比例，保證圖片始終填充滿背景區域，若有溢出部分則會被隱藏。咱們平時用的cover 最多

c) 設置爲contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域。

background-image: url('images/gyt.jpg');
            background-size: 300px 100px;
            /* background-size: contain; */
            /* background-size: cover; */

多背景(CSS3)

以逗號分隔能夠設置多背景，可用於自適應佈局作法就是用逗號隔開就行了。

一個元素能夠設置多重背景圖像。

每組屬性間使用逗號分隔。

若是設置的多重背景圖之間存在着交集（即存在着重疊關係），前面的背景圖會覆蓋在後面的背景圖之上。

爲了不背景色將圖像蓋住，背景色一般都定義在最後一組上，

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
       url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
       url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

凹凸文字

<head>
   <meta charset="utf-8">
   <style>
   body {

   }
        div {
            color: #ccc;
            font: 700 80px "微軟雅黑";
        }
        div:first-child {
            /* text-shadow: 水平位置垂直位置模糊距離陰影顏色; */
            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
        }
        div:last-child {
            /* text-shadow: 水平位置垂直位置模糊距離陰影顏色; */
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }

   </style>
   </head>
   <body>
   <div>我是凸起的文字</div>
   <div>我是凹下的文字</div>
   </body>

CSS3盒模型

CSS3中能夠經過box-sizing 來指定盒模型，便可指定爲content-box、border-box，這樣咱們計算盒子大小的方式就發生了改變。

能夠分紅兩種狀況：

一、box-sizing: content-box 盒子大小爲 width + padding + border content-box:此值爲其默認值，其讓元素維持W3C的標準Box Mode

二、box-sizing: border-box 盒子大小爲 width 就是說 padding 和 border 是包含到width裏面的

注：上面的標註的width指的是CSS屬性裏設置的width: length，content的值是會自動調整的。

div:first-child {
            width: 200px;
            height: 200px;

            box-sizing: content-box; /* 就是之前的標準盒模型 w3c */
            padding: 10px;
            border: 15px solid red;
            /* 盒子大小爲 width + padding + border content-box:此值爲其默認值，其讓元素維持W3C的標準Box Mode */
        }
        div:last-child {
            width: 200px;
            height: 200px;
            background-color: purple;
            padding: 10px;
            box-sizing: border-box; /* padding border 不撐開盒子 */
            border: 15px solid red;
            /* margin: 10px; */
            /* 盒子大小爲 width 就是說 padding 和 border 是包含到width裏面的 */
}

過渡(CSS3)

過渡（transition)是CSS3中具備顛覆性的特徵之一，咱們能夠在不使用 Flash 動畫或 JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。

幀動畫：經過一幀一幀的畫面按照固定順序和速度播放。如電影膠片

在CSS3裏使用transition能夠實現補間動畫（過渡效果），而且當前元素只要有「屬性」發生變化時即存在兩種狀態(咱們用A和B代指），就能夠實現平滑的過渡，爲了方便演示採用hover切換兩種狀態，可是並不只僅侷限於hover狀態來實現過渡。

語法格式:

transition: 要過渡的屬性花費時間運動曲線什麼時候開始;

若是有多組屬性變化，仍是用逗號隔開。

屬性	描述	CSS
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。	3
transition-property	規定應用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費的時間。默認是 0。	3
transition-timing-function	規定過渡效果的時間曲線。默認是 "ease"。	3
transition-delay	規定過渡效果什麼時候開始。默認是 0。	3

若是想要全部的屬性都變化過渡，寫一個all 就能夠

transition-duration 花費時間單位是秒 s 好比 0.5s 這個s單位必須寫 ms 毫秒

運動曲線默認是 ease

什麼時候開始默認是 0s 立馬開始

運動曲線示意圖：

div {
            width: 200px;
            height: 100px;

            /* transition: 要過渡的屬性花費時間運動曲線什麼時候開始; */
            transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
            /* transtion 過渡的意思這句話寫到div裏面而不是 hover裏面 */


}
div:hover { /* 鼠標通過盒子，咱們的寬度變爲400 */

            width: 600px;
            height: 300px
}

transition: all 0.6s; /* 全部屬性都變化用all 就能夠了後面倆個屬性能夠省略 */

2D變形(CSS3) transform

transform是CSS3中具備顛覆性的特徵之一，能夠實現元素的位移、旋轉、傾斜、縮放，甚至支持矩陣方式，配合過渡和即將學習的動畫知識，能夠取代大量以前只能靠Flash才能夠實現的效果。

變形轉換 transform transform 變換變形的意思《 transformers 變形金剛》

移動 translate(x, y)

translate 移動平移的意思

translate(50px,50px);

使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。

能夠改變元素的位置，x、y可爲負值；

translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）

translateX(x)僅水平方向移動（X軸移動）

translateY(Y)僅垂直方向移動（Y軸移動）

.box {
  width: 499.9999px;
  height: 400px;
  background: pink;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%); /* 走的本身的一半 */
}

讓定位的盒子水平居中

縮放 scale(x, y)

transform:scale(0.8,1);

能夠對元素進行水平和垂直方向的縮放。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。

scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）

scaleX(x)元素僅水平方向縮放（X軸縮放）

scaleY(y)元素僅垂直方向縮放（Y軸縮放）

scale()的取值默認的值爲1，當值設置爲0.01到0.99之間的任何值，做用使一個元素縮小；而任何大於或等於1.01的值，做用是讓元素放大

旋轉 rotate(deg)

能夠對元素進行旋轉，正值爲順時針，負值爲逆時針；

transform:rotate(45deg);

注意單位是 deg 度數

transform-origin能夠調整元素轉換變形的原點

div{transform-origin: left top;transform: rotate(45deg); } /* 改變元素原點到左上角，而後進行順時旋轉45度 */

案例旋轉楚喬傳

div {
            width: 250px;
            height: 170px;
            border: 1px solid pink;
            margin: 200px auto;
            position: relative;

        }
        div img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.6s;
            transform-origin: top right;

        }
        div:hover img:nth-child(1) { /* 鼠標通過div 第一張圖片旋轉 */
            transform: rotate(60deg);
        }
        div:hover img:nth-child(2) {
            transform: rotate(120deg);
        }
        div:hover img:nth-child(3) {
            transform: rotate(180deg);
        }
        div:hover img:nth-child(4) {
            transform: rotate(240deg);
        }
        div:hover img:nth-child(5) {
            transform: rotate(300deg);
        }
        div:hover img:nth-child(6) {
            transform: rotate(360deg);
        }

傾斜 skew(deg, deg)

transform:skew(30deg,0deg);

該實例經過skew方法把元素水平方向上傾斜30度，處置方向保持不變。

可使元素按必定的角度進行傾斜，可爲負值，第二個參數不寫默認爲0。

3D變形(CSS3) transform

2d x y

3d x y z

左手座標系

伸出左手，讓拇指和食指成「L」形，大拇指向右，食指向上，中指指向前方。這樣咱們就創建了一個左手座標系，拇指、食指和中指分別表明X、Y、Z軸的正方向。以下圖

CSS3中的3D座標系與上述的3D座標系是有必定區別的，至關於其繞着X軸旋轉了180度，以下圖

座標：

x左邊是負的，右邊是正的

y 上面是負的，下面是正的

z 裏面是負的，外面是正的

rotateX()

就是沿着 x 立體旋轉.

img {
transition:all 0.5s ease 0s;
}
img:hove {

transform:rotateX(180deg);
}

rotateY()

沿着y軸進行旋轉

img {
transition:all 0.5s ease 0s;
}
img:hove {

transform:rotateX(180deg);
}

rotateZ()

沿着z軸進行旋轉

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

透視(perspective)

電腦顯示屏是一個2D平面，圖像之因此具備立體感（3D效果），其實只是一種視覺呈現，經過透視能夠實現此目的。

透視能夠將一個2D平面，在轉換的過程中，呈現3D效果。

透視原理：近大遠小。

瀏覽器透視：把近大遠小的全部圖像，透視在屏幕上。

perspective：視距，表示視點距離屏幕的長短。視點，用於模擬透視效果時人眼的位置

注：並不是任何狀況下須要透視效果，根據開發須要進行設置。

perspective 通常做爲一個屬性，設置給父元素，做用於全部3D轉換的子元素

理解透視距離原理：

ateX(x)

僅水平方向移動**（X軸移動）

主要目的實現移動效果

translateY(y)

僅垂直方向移動（Y軸移動）

translateZ(z)

transformZ的直觀表現形式就是大小變化，實質是XY平面相對於視點的遠近變化（說遠近就必定會說到離什麼參照物遠或近，在這裏參照物就是perspective屬性）。好比設置了perspective爲200px;那麼transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不到了，由於至關於跑到後腦勺去了，我相信你正常狀況下，是看不到本身的後腦勺的。

translate3d(x,y,z)

[注意]其中，x和y能夠是長度值，也能夠是百分比，百分比是相對於其自己元素水平方向的寬度和垂直方向的高度和；z只能設置長度值

開門案例

body {
}
.door {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  border: 1px solid gray;
  perspective: 1000px;
  background: url('images/dog.gif') no-repeat cover;
  position: relative;
}
.door > div {
  box-sizing: border-box;
  border: 1px solid black;
}
.left {
  float: left;
  width: 50%;
  height: 100%;

  transform-origin: left center;
  transition: 1s;
  position: relative;
}
.left::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  right: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.right {
  width: 50%;
  height: 100%;
  float: left;
  background-color: brown;
  transform-origin: right center;
  transition: 1s;
  position: relative;
}
.right::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  left: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.door:hover .left {
  transform: rotateY(-130deg);
}
.door:hover .right {
  transform: rotateY(130deg);
}

backface-visibility

backface-visibility 屬性定義當元素不面向屏幕時是否可見。

翻轉盒子案例

div {
            width: 224px;
            height: 224px;
            margin: 100px auto;
            position: relative;
        }
        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden; /* 不是正面對象屏幕，就隱藏 */
        }
        div:hover img {
            transform: rotateY(180deg);
}

動畫(CSS3) animation

動畫是CSS3中具備顛覆性的特徵之一，可經過設置多個節點來精確控制一個或一組動畫，經常使用來實現複雜的動畫效果。

語法格式：

animation:動畫名稱動畫時間運動曲線什麼時候開始播放次數是否反方向;

關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意r

@keyframes 動畫名稱 {
from{ 開始位置 } 0%
to{ 結束 } 100%
}

animation-iteration-count:infinite; 無限循環播放

animation-play-state:paused; 暫停動畫"

小汽車案例

body {
  background: white;
}
img {
  width: 200px;
}
.animation {
  animation-name: goback;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes goback {
  0%{}
  49%{
   transform: translateX(1000px);
  }
  55%{
   transform: translateX(1000px) rotateY(180deg);
  }
  95%{
   transform: translateX(0) rotateY(180deg);
  }
  100%{
   transform: translateX(0) rotateY(0deg);
  }
}

伸縮佈局(CSS3)

CSS3在佈局方面作了很是大的改進，使得咱們對塊級元素的佈局排列變得十分靈活，適應性很是強，其強大的伸縮性，在響應式開中能夠發揮極大的做用。

主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向

側軸：與主軸垂直的軸稱做側軸，默認是垂直方向的

方向：默認主軸從左向右，側軸默認從上到下

主軸和側軸並非固定不變的，經過flex-direction能夠互換。

Flex佈局的語法規範通過幾年發生了很大的變化，也給Flexbox的使用帶來必定的侷限性，由於語法規範版本衆多，瀏覽器支持不一致，導致Flexbox佈局使用很少

二、各屬性詳解****

1.flex子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配

min-width 最小值 min-width: 280px 最小寬度不能小於 280

max-width: 1280px 最大寬度不能大於 1280

2.flex-direction調整主軸方向（默認爲水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

http://m.ctrip.com/html5/ 攜程網手機端地址

三、justify-content調整主軸對齊（水平對齊）

子盒子如何在父盒子裏面水平對齊

值	描述	白話文
flex-start	默認值。項目位於容器的開頭。	讓子元素從父容器的開頭開始排序可是盒子順序不變
flex-end	項目位於容器的結尾。	讓子元素從父容器的後面開始排序可是盒子順序不變
center	項目位於容器的中心。	讓子元素在父容器中間顯示
space-between	項目位於各行之間留有空白的容器內。	左右的盒子貼近父盒子，中間的平均分佈空白間距
space-around	項目位於各行以前、之間、以後都留有空白的容器內。	至關於給每一個盒子添加了左右margin外邊距

四、align-items調整側軸對齊（垂直對齊）

子盒子如何在父盒子裏面垂直對齊（單行）

值	描述	白話文
stretch	默認值。項目被拉伸以適應容器。	讓子元素的高度拉伸適用父容器（子元素不給高度的前提下)
center	項目位於容器的中心。	垂直居中
flex-start	項目位於容器的開頭。	垂直對齊開始位置上對齊
flex-end	項目位於容器的結尾。	垂直對齊結束位置底對齊

五、flex-wrap控制是否換行

當咱們子盒子內容寬度多於父盒子的時候如何處理

值	描述
nowrap	默認值。規定靈活的項目不拆行或不拆列。不換行，則收縮（壓縮）顯示強制一行內顯示
wrap	規定靈活的項目在必要的時候拆行或拆列。
wrap-reverse	規定靈活的項目在必要的時候拆行或拆列，可是以相反的順序。

六、flex-flow是flex-direction、flex-wrap的簡寫形式

flex-flow: flex-direction flex-wrap;

白話記： flex-flow: 排列方向換不換行;

兩個中間用空格

例如：

display: flex;
/* flex-direction: row;
flex-wrap: wrap; 這兩句話等價於下面的這句話*/
flex-flow: column wrap; /* 二者的綜合 */

七、align-content堆棧（由flex-wrap產生的獨立行）多行垂直對齊方式齊

align-content是針對flex容器裏面多軸(多行)的狀況,align-items是針對一行的狀況進行排列。

必須對父元素設置自由盒屬性display:flex;，而且設置排列方式爲橫向排列flex-direction:row;而且設置換行，flex-wrap:wrap;這樣這個屬性的設置纔會起做用。

值	描述	測試
stretch	默認值。項目被拉伸以適應容器。
center	項目位於容器的中心。
flex-start	項目位於容器的開頭。
flex-end	項目位於容器的結尾。
space-between	項目位於各行之間留有空白的容器內。
space-around	項目位於各行以前、之間、以後都留有空白的容器內。