03-HTML5&CSS3

課程目標(biāo):

  1. HTML5新標(biāo)簽與特性
  2. 新增表單屬性
  3. 多媒體標(biāo)簽
  4. 熟練掌握CSS3選擇器
  5. 熟練掌握CSS3過渡
  6. 熟練掌握CSS3轉(zhuǎn)換
  7. 熟練掌握CSS3動畫
  8. 熟練掌握CSS3布局

文檔類型設(shè)定

  • document
    • HTML5 sublime 輸入 html:5 <!DOCTYPE html>

字符設(shè)定

  • <meta http-equiv="charset" content="utf-8">：HTML與XHTML中建議這樣去寫
  • <meta charset="utf-8">：HTML5的標(biāo)簽中建議這樣去寫

常用新標(biāo)簽

w3c 手冊中文官網(wǎng) : http://w3school.com.cn/

  • header：定義文檔的頁眉 頭部

  • nav：定義導(dǎo)航鏈接的部分

  • footer：定義文檔或節(jié)的頁腳 底部

  • article：定義文章。

  • section：定義文檔中的節(jié)（section、區(qū)段）

  • aside：定義其所處內(nèi)容之外的內(nèi)容 側(cè)邊

    <header> 語義 :定義頁面的頭部  頁眉</header>
<nav>  語義 :定義導(dǎo)航欄 </nav> 
<footer> 語義: 定義 頁面底部 頁腳</footer>
<article> 語義:  定義文章</article>
<section> 語義： 定義區(qū)域</section>
<aside> 語義： 定義其所處內(nèi)容之外的內(nèi)容 側(cè)邊</aside>

  • datalist 標(biāo)簽定義選項列表。請與 input 元素配合使用該元素

    <input type="text" value="輸入明星" list="star"/> <!--  input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id  來實(shí)現(xiàn)和 input 鏈接 -->  
          <option>劉德華</option>
          <option>劉若英</option>
          <option>劉曉慶</option>
          <option>郭富城</option>
          <option>張學(xué)友</option>
          <option>郭郭</option>
</datalist>

  • fieldset 元素可將表單內(nèi)的相關(guān)元素分組，打包 legend 搭配使用

    <fieldset>
          <legend>用戶登錄</legend>  標(biāo)題
          用戶名: <input type="text"><br /><br />
          密　碼: <input type="password">
</fieldset>

新增的input type屬性值：

**類型****** **使用示例****** **含義******
**email****** <input type="email"> 輸入郵箱格式
**tel****** <input type="tel"> 輸入手機(jī)號碼格式
**url****** <input type="url"> 輸入url格式
**number****** <input type="number"> 輸入數(shù)字格式
**search****** <input type="search"> 搜索框（體現(xiàn)語義化）
**range****** <input type="range"> 自由拖動滑塊
**time****** <input type="time"> 小時分鐘
**date****** <input type="date"> 年月日
**datetime****** <input type="datetime"> 時間
**month****** <input type="month"> 月年
**week****** <input type="week"> 星期 年

常用新屬性

**屬性****** **用法****** **含義******
**placeholder****** <input type="text" placeholder="請輸入用戶名"> 占位符 當(dāng)用戶輸入的時候 里面的文字消失 刪除所有文字，自動返回
**autofocus****** <input type="text" autofocus> 規(guī)定當(dāng)頁面加載時 input 元素應(yīng)該自動獲得焦點(diǎn)
**multiple****** <input type="file" multiple> 多文件上傳
**autocomplete****** <input type="text" autocomplete="off"> 規(guī)定表單是否應(yīng)該啟用自動完成功能 有2個值，一個是on 一個是off on 代表記錄已經(jīng)輸入的值 1.autocomplete 首先需要提交按鈕
2.這個表單您必須給他名字
**required****** <input type="text" required> 必填項 內(nèi)容不能為空
**accesskey****** <input type="text" accesskey="s"> 規(guī)定激活（使元素獲得焦點(diǎn)）元素的快捷鍵 采用 alt + s的形式

綜合案例

<form action="">
  <fieldset>
    <legend>學(xué)生檔案</legend>
    <label for="userName">姓名:</label>
    <input type="text" name="userName" id="userName" placeholder="請輸入用戶名"> <br>
    <label for="userPhone">手機(jī)號碼:</label>
    <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
    <label for="email">郵箱地址:</label>
    <input type="email" required name="email" id="email"><br>
    <label for="collage">所屬學(xué)院:</label>
    <input type="text" name="collage" id="collage" list="cList" placeholder="請選擇"><br>
    <datalist id="cList">
      <option value="前端與移動開發(fā)學(xué)院"></option>
      <option value="java學(xué)院"></option>
      <option value="c++學(xué)院"></option>
    </datalist><br>
    <label for="score">入學(xué)成績:</label>
    <input type="number" max="100" min="0" value="0" id="score"><br>
   <form action="">
    <fieldset>
        <legend>學(xué)生檔案</legend>
        <label>姓名: <input type="text" placeholder="請輸入學(xué)生名字"/></label> <br /><br />
        <label>手機(jī)號: <input type="tel" /></label> <br /><br />
        <label>郵箱: <input type="email" /></label> <br /><br />
        <label>所屬學(xué)院:  <input type="text" placeholder="請選擇學(xué)院" list="xueyuan"/>
        <datalist id="xueyuan">
            <option>java學(xué)院</option>
            <option>前端學(xué)院</option>
            <option>php學(xué)院</option>
            <option>設(shè)計學(xué)院</option>
        </datalist>

        <br /><br />

        <label>出生日期:   <input type="date" /></label> <br /><br />
        <label>成績:  <input type="number" /></label> <br /><br />
        <label>畢業(yè)時間:  <input type="date" /></label> <br /><br />
        <input type="submit" />  <input type="reset" />
    </fieldset>
    </form>
    <label for="inTime">入學(xué)日期:</label>
    <input type="date" id="inTime" name="inTime"><br>
    <label for="leaveTime">畢業(yè)日期:</label>
    <input type="date" id="leaveTime" name="leaveTime"><br>
    <input type="submit">
  </fieldset>
</form>

多媒體標(biāo)簽

  • audio：播放音頻
  • video：播放視頻

多媒體 audio

HTML5通過<audio>標(biāo)簽來解決音頻播放的問題。

autoplay 自動播放

controls 是否顯不默認(rèn)播放控件

loop 循環(huán)播放 如果這個屬性不寫 默認(rèn)播放一次 loop 或者 loop = “l(fā)oop” 表示無限循環(huán)

由于版權(quán)等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考

[圖片上傳失敗...(image-5ca0aa-1579788873389)]

多瀏覽器支持的方案，如下圖

<source> 標(biāo)簽允許您規(guī)定可替換的視頻/音頻文件供瀏覽器根據(jù)它對媒體類型或者編解碼器的支持進(jìn)行選擇

[圖片上傳失敗...(image-319390-1579788873389)]

多媒體 video

HTML5通過<audio>標(biāo)簽來解決音頻播放的問題。

同音頻播放一樣，<video>使用也相當(dāng)簡單，如下圖

[圖片上傳失敗...(image-6c5730-1579788873389)]

同樣，通過附加屬性可以更友好的控制視頻的播放

autoplay 自動播放

controls 是否顯示默認(rèn)播放控件

loop 循環(huán)播放

width 設(shè)置播放窗口寬度

height 設(shè)置播放窗口的高度

由于版權(quán)等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考

[圖片上傳失敗...(image-c4b90d-1579788873389)]

**多瀏覽器支持的方案，如下圖******

[圖片上傳失敗...(image-d3c36a-1579788873389)]

CSS3 新增選擇器

結(jié)構(gòu)(位置)偽類選擇器（CSS3)

  • :first-child :選取屬于其父元素的首個子元素的指定選擇器
  • :last-child :選取屬于其父元素的最后一個子元素的指定選擇器
  • :nth-child(n) ： 匹配屬于其父元素的第 N 個子元素，不論元素的類型
  • :nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數(shù)。
    n 可以是數(shù)字、關(guān)鍵詞或公式
li:first-child { /*  選擇第一個孩子 */
                color: pink; 
            }
li:last-child {   /* 最后一個孩子 */
                color: purple;
            }
li:nth-child(4) {   /* 選擇第4個孩子  n  代表 第幾個的意思 */ 
                color: skyblue;
            }

目標(biāo)偽類選擇器(CSS3)

:target目標(biāo)偽類選擇器 :選擇器可用于選取當(dāng)前活動的目標(biāo)元素

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

屬性選擇器

選取標(biāo)簽帶有某些特殊屬性的選擇器 我們成為屬性選擇器

/* 獲取到 擁有 該屬性的元素 */
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;
        }

<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>

偽元素選擇器（CSS3)

1、E::before和E::after

在E元素內(nèi)部的開始位置和結(jié)束位創(chuàng)建一個元素，該元素為行內(nèi)元素，且必須要結(jié)合content屬性使用。

div::befor {
  content:"開始";
}
div::after {
  content:"結(jié)束";
}

E:after、E:before 在舊版本里是偽元素，CSS3的規(guī)范里“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理。

":" 與 "::" 區(qū)別在于區(qū)分偽類和偽元素

之所以被稱為偽元素，是因為他們不是真正的頁面元素，html沒有對應(yīng)的元素，但是其所有用法和表現(xiàn)行為與真正的頁面元素一樣，可以對其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素來展現(xiàn)，實(shí)際上是css樣式展現(xiàn)的行為，因此被稱為偽元素。是偽元素在html代碼機(jī)構(gòu)中的展現(xiàn)，可以看出無法偽元素的結(jié)構(gòu)無法審查

注意

偽元素:before和:after添加的內(nèi)容默認(rèn)是inline元素**；這個兩個偽元素的content屬性，表示偽元素的內(nèi)容,設(shè)置:before和:after時必須設(shè)置其content屬性，否則偽元素就不起作用。

背景縮放(CSS3)

通過background-size設(shè)置背景圖片的尺寸，就像我們設(shè)置img的尺寸一樣，在移動Web開發(fā)中做屏幕適配應(yīng)用非常廣泛。

其參數(shù)設(shè)置如下：

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

b) 設(shè)置為cover時，會自動調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會被隱藏。我們平時用的cover 最多

c) 設(shè)置為contain會自動調(diào)整縮放比例，保證圖片始終完整顯示在背景區(qū)域。

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

多背景(CSS3)

以逗號分隔可以設(shè)置多背景，可用于自適應(yīng)布局 做法就是 用逗號隔開就好了。

  • 一個元素可以設(shè)置多重背景圖像。
  • 每組屬性間使用逗號分隔。
  • 如果設(shè)置的多重背景圖之間存在著交集（即存在著重疊關(guān)系），前面的背景圖會覆蓋在后面的背景圖之上。
  • 為了避免背景色將圖像蓋住，背景色通常都定義在最后一組上，
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;

CSS3盒模型

CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發(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的值是會自動調(diào)整的。

div:first-child {
            width: 200px;
            height: 200px;
            background-color: pink; 
            box-sizing: content-box;  /*  就是以前的標(biāo)準(zhǔn)盒模型  w3c */
            padding: 10px;
            border: 15px solid red;
            /* 盒子大小為 width + padding + border   content-box:此值為其默認(rèn)值，其讓元素維持W3C的標(biāo)準(zhǔn)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 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時為元素添加效果。

在CSS3里使用transition可以實(shí)現(xiàn)補(bǔ)間動畫（過渡效果），并且當(dāng)前元素只要有“屬性”發(fā)生變化時即存在兩種狀態(tài)(我們用A和B代指），就可以實(shí)現(xiàn)平滑的過渡，為了方便演示采用hover切換兩種狀態(tài)，但是并不僅僅局限于hover狀態(tài)來實(shí)現(xiàn)過渡。

語法格式:

transition: 要過渡的屬性  花費(fèi)時間  運(yùn)動曲線  何時開始;
如果有多組屬性變化，還是用逗號隔開。
屬性 描述 CSS
transition 簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性。 3
transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。 3
transition-duration 定義過渡效果花費(fèi)的時間。默認(rèn)是 0。 3
transition-timing-function 規(guī)定過渡效果的時間曲線。默認(rèn)是 "ease"。 3
transition-delay 規(guī)定過渡效果何時開始。默認(rèn)是 0。 3

如果想要所有的屬性都變化過渡， 寫一個all 就可以

transition-duration 花費(fèi)時間 單位是 秒 s 比如 0.5s 這個s單位必須寫 ms 毫秒

運(yùn)動曲線 默認(rèn)是 ease

何時開始 默認(rèn)是 0s 立馬開始

運(yùn)動曲線示意圖：

[圖片上傳失敗...(image-695892-1579788873389)]

div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 要過渡的屬性  花費(fèi)時間  運(yùn)動曲線  何時開始; */
            transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
            /* transtion 過渡的意思  這句話寫到div里面而不是 hover里面 */
  
            
}
div:hover {  /* 鼠標(biāo)經(jīng)過盒子，我們的寬度變?yōu)?00 */

            width: 600px;
            height: 300px
}

transition: all 0.6s;  /* 所有屬性都變化用all 就可以了  后面?zhèn)z個屬性可以省略 */

2D變形(CSS3) transform

transform是CSS3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、傾斜、縮放，甚至支持矩陣方式，配合過渡和即將學(xué)習(xí)的動畫知識，可以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果。

變形轉(zhuǎn)換 transform transform 變換 變形的意思 《 transformers 變形金剛》

移動 translate(x, y)

translate 移動平移的意思

[圖片上傳失敗...(image-10549d-1579788873389)]

translate(50px,50px);

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

可以改變元素的位置，x、y可為負(fù)值；

 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)

[圖片上傳失敗...(image-1fca2c-1579788873389)]

transform:scale(0.8,1);

可以對元素進(jìn)行水平和垂直方向的縮放。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。

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

scale()的取值默認(rèn)的值為1，當(dāng)值設(shè)置為0.01到0.99之間的任何值，作用使一個元素縮小；而任何大于或等于1.01的值，作用是讓元素放大

旋轉(zhuǎn) rotate(deg)

可以對元素進(jìn)行旋轉(zhuǎn)，正值為順時針，負(fù)值為逆時針；

[圖片上傳失敗...(image-b4900-1579788873389)]

transform:rotate(45deg);

注意單位是 deg 度數(shù)

transform-origin可以調(diào)整元素轉(zhuǎn)換變形的原點(diǎn)

[圖片上傳失敗...(image-64450e-1579788873389)]

 div{transform-origin: left top;transform: rotate(45deg); }  /* 改變元素原點(diǎn)到左上角，然后進(jìn)行順時旋轉(zhuǎn)45度 */

如果是4個角，可以用 left top這些，如果想要精確的位置， 可以用 px 像素。

 div{transform-origin: 10px 10px;transform: rotate(45deg); }  /* 改變元素原點(diǎn)到x 為10  y 為10，然后進(jìn)行順時旋轉(zhuǎn)45度 */

傾斜 skew(deg, deg)

[圖片上傳失敗...(image-c0a65b-1579788873389)]

transform:skew(30deg,0deg);

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

可以使元素按一定的角度進(jìn)行傾斜，可為負(fù)值，第二個參數(shù)不寫默認(rèn)為0。

3D變形(CSS3) transform

2d x y

3d x y z

左手坐標(biāo)系

伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手坐標(biāo)系，拇指、食指和中指分別代表X、Y、Z軸的正方向。如下圖

[圖片上傳失敗...(image-27bab9-1579788873389)]

CSS3中的3D坐標(biāo)系與上述的3D坐標(biāo)系是有一定區(qū)別的，相當(dāng)于其繞著X軸旋轉(zhuǎn)了180度，如下圖

[圖片上傳失敗...(image-38b5ad-1579788873389)]

簡單記住他們的坐標(biāo)：

x左邊是負(fù)的，右邊是正的

y 上面是負(fù)的， 下面是正的

z 里面是負(fù)的， 外面是正的

rotateX()

就是沿著 x 立體旋轉(zhuǎn).

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

  transform:rotateX(180deg);
}

rotateY()

沿著y軸進(jìn)行旋轉(zhuǎn)

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

  transform:rotateX(180deg);
}

rotateZ()?

沿著z軸進(jìn)行旋轉(zhuǎn)

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); */
}

translateX(x)

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

[圖片上傳失敗...(image-188d20-1579788873389)]

主要目的實(shí)現(xiàn)移動效果

translateY(y)

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

[圖片上傳失敗...(image-1d8c54-1579788873389)]

translateZ(z)

transformZ的直觀表現(xiàn)形式就是大小變化，實(shí)質(zhì)是XY平面相對于視點(diǎn)的遠(yuǎn)近變化（說遠(yuǎn)近就一定會說到離什么參照物遠(yuǎn)或近，在這里參照物就是perspective屬性）。比如設(shè)置了perspective為200px;那么transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不到了，因為相當(dāng)于跑到后腦勺去了，我相信你正常情況下，是看不到自己的后腦勺的。

translate3d(x,y,z)

[注意]其中，x和y可以是長度值，也可以是百分比，百分比是相對于其本身元素水平方向的寬度和垂直方向的高度和；z只能設(shè)置長度值

翻轉(zhuǎn)盒子案例

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中具有顛覆性的特征之一，可通過設(shè)置多個節(jié)點(diǎn)來精確控制一個或一組動畫，常用來實(shí)現(xiàn)復(fù)雜的動畫效果。

語法格式：

animation:動畫名稱 動畫時間 運(yùn)動曲線  何時開始  播放次數(shù)  是否反方向;

[圖片上傳失敗...(image-3ad7f2-1579788873389)]

關(guān)于幾個值，除了名字，動畫時間，延時有嚴(yán)格順序要求其它隨意r

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

animation-iteration-count:infinite;  無限循環(huán)播放
animation-play-state:paused;   暫停動畫"

布局(CSS3)

CSS3在布局方面做了非常大的改進(jìn)，使得我們對塊級元素的布局排列變得十分靈活，適應(yīng)性非常強(qiáng)，其強(qiáng)大的伸縮性，在響應(yīng)式開中可以發(fā)揮極大的作用。

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

側(cè)軸：與主軸垂直的軸稱作側(cè)軸，默認(rèn)是垂直方向的

方向：默認(rèn)主軸從左向右，側(cè)軸默認(rèn)從上到下

主軸和側(cè)軸并不是固定不變的，通過flex-direction可以互換。

[圖片上傳失敗...(image-88a76f-1579788873389)]

Flex布局的語法規(guī)范經(jīng)過幾年發(fā)生了很大的變化，也給Flexbox的使用帶來一定的局限性，因為語法規(guī)范版本眾多，瀏覽器支持不一致，致使Flexbox布局使用不多

**2、各屬性詳解******

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

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

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

2.flex-direction調(diào)整主軸方向（默認(rèn)為水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

http://m.ctrip.com/html5/ 攜程網(wǎng)手機(jī)端地址

3、justify-content調(diào)整主軸對齊（水平對齊）

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

值 描述 白話文
flex-start 默認(rèn)值。項目位于容器的開頭。 讓子元素從父容器的開頭開始排序但是盒子順序不變
flex-end 項目位于容器的結(jié)尾。 讓子元素從父容器的后面開始排序但是盒子順序不變
center 項目位于容器的中心。 讓子元素在父容器中間顯示
space-between 項目位于各行之間留有空白的容器內(nèi)。 左右的盒子貼近父盒子，中間的平均分布空白間距
space-around 項目位于各行之前、之間、之后都留有空白的容器內(nèi)。 相當(dāng)于給每個盒子添加了左右margin外邊距

4、align-items調(diào)整側(cè)軸對齊（垂直對齊）

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

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

5、flex-wrap控制是否換行

當(dāng)我們子盒子內(nèi)容寬度多于父盒子的時候如何處理

值 描述
nowrap 默認(rèn)值。規(guī)定靈活的項目不拆行或不拆列。 不換行，則 收縮（壓縮） 顯示 強(qiáng)制一行內(nèi)顯示
wrap 規(guī)定靈活的項目在必要的時候拆行或拆列。
wrap-reverse 規(guī)定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。

6、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;  /* 兩者的綜合 */

7、align-content堆棧（由flex-wrap產(chǎn)生的獨(dú)立行）多行垂直對齊方式齊

align-content是針對flex容器里面多軸(多行)的情況,align-items是針對一行的情況進(jìn)行排列。

必須對父元素設(shè)置自由盒屬性display:flex;，并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行，flex-wrap:wrap;這樣這個屬性的設(shè)置才會起作用。

值 描述 測試
stretch 默認(rèn)值。項目被拉伸以適應(yīng)容器。
center 項目位于容器的中心。
flex-start 項目位于容器的開頭。
flex-end 項目位于容器的結(jié)尾。
space-between 項目位于各行之間留有空白的容器內(nèi)。
space-around 項目位于各行之前、之間、之后都留有空白的容器內(nèi)。

8、order控制子項目的排列順序，正序方式排序，從小到大

用css 來控制盒子的前后順序。 用order 就可以

用整數(shù)值來定義排列順序，數(shù)值小的排在前面?？梢詾樨?fù)值。 默認(rèn)值是 0

order: 1;

此知識點(diǎn)重在理解，要明確找出主軸、側(cè)軸、方向，各屬性對應(yīng)的屬性值

文字陰影(CSS3)

以后我們可以給我們的文字添加陰影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;

[圖片上傳失敗...(image-234af9-1579788873389)]

  1. 前兩項是必須寫的。 后兩項可以選寫。

[圖片上傳失敗...(image-7fdf5b-1579788873389)]

阿里云項目(一)

阿里云項目介紹

項目名稱：阿里云管控平臺中心登錄界面移動端

項目背景

現(xiàn)階段電商類網(wǎng)站很流行，很多同學(xué)畢業(yè)之后會進(jìn)入互聯(lián)網(wǎng)類企業(yè)工作，同時管控平臺網(wǎng)站需要的技術(shù)也是較為復(fù)雜的，這里用京東電商網(wǎng)站復(fù)習(xí)、總結(jié)、提高前面所學(xué)布局技術(shù)。

設(shè)計目標(biāo)

  • 保證瀏覽器 ie7及以上, 火狐, 360, safari，chrome等。
  • 熟悉CSS+DIV布局，頁面的搭建工作
  • 了解常用網(wǎng)站的布局模式

目錄說明

要實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離的設(shè)計思想。 根目錄下有這4個文件（目錄）。

名稱 說明
css 用于存放CSS文件
images 用于存放圖片
index 淘寶首頁 HTML
js 用于后期存放javascript文件
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,430評論 0贊 11
  • 1、屬性選擇器：id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,752評論 0贊 7
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定（選定）要進(jìn)行樣式設(shè)定的標(biāo)簽（元素）”。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,723評論 0贊 6
  • CSS參考手冊 一、初識CSS3 1.1 CSS是什么 CSS3在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能。目前...
    沒汁帥閱讀 4,279評論 1贊 13
  • 初始CSS3 什么是CSS3？ CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大...
    llt00閱讀 491評論 0贊 0

友情鏈接更多精彩內(nèi)容