選擇器：基礎選擇器和復合選擇器。基礎選擇器由單個選擇器組成。

基礎選擇器：標簽選擇器，類選擇器，id選擇器，通配符選擇器。

1.標簽選擇器

div????????{

? ? ? ? background-color:? ? ? ? red;

? ? ? ? text-indent:? ? ? ? 2em;

}

多個選擇器}后也沒有標點符號。

2.類選擇器

.類名? ? ? ? {

}

<div class="類名"></div>

多類名：一個標簽有多個類名。<div class="red box"></div>空格隔開

3.id選擇器(JS)

#id名? ? ? ? {

}

<div id="id名"></div>

不能用標簽名做id名,.star-sing可。不要純數字或中文。

4.通配符選擇器

*? ? ? ? {

}

不需要調用

5.CSS字體屬性

? ? ? ? 字體系列：font-family:? ? ? ? ‘微軟雅黑’,"宋體"；√

? ? ? ? ? ? ? ? 各個字體間英文逗號隔開，'',""都可，單個英文單詞不用“”隔開即可。

????????字體大小：font-size:? ? ? ? 20px;√

? ? ? ? ? ? ? ? px不能省，用body類選擇器只能定義h之外的字體大小，h特殊一般需要單獨定義

????????字體粗細：font-weight:? ? ? ? bold light 400 700；(看手冊)

? ? ? ? 字體斜體：font-style：? ? ? ? nomal italic;

? ? ? ? 復合屬性：font:? ? ? ? italic 700 20px/16px?"宋體"；(從下往上的順序，/后是行高)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 順序不能錯，空格隔開。可部分不設置，但必須有size family的

6.CSS文本屬性

? ? ? ? 文本屬性有：文本顏色，文本對齊，文本裝飾，文本縮進，行間距。

? ? ? ? 文本顏色：color:????????pink?#00ff00 rgb(0,255,0);逗號隔開

? ? ? ? 文本水平對齊：text-align:? ? ? ? ? center left right; (本質是讓h1盒子里面的文字居中對齊)。

? ? ? ? 文本裝飾(加線)：text-decoration：? ? ? ? none underline overline line-through;

? ? ? ? 文本首行縮進：text-indent：? ? ? ? 10px 2em;(一般對段落標簽p使用)

? ? ? ? ? ? ? em按當前文字一個字大小，若當前元素沒有設置大小按父元素的一個字大小(CSS繼承)。

? ? ? ? 行間距(行高)：line-height:? ? ? ? 26px;(上間距+文本高度+下間距=26px)，文字默認16px。

*Chrome調試工具->檢查

ctrl滾輪調大小。

CSS可改數值顏色。

點元素右側無樣式：類名或樣式引入錯誤；有樣式但前有黃色感嘆號：樣式屬性書寫錯誤。

7.CSS引入方式

? ? ? ? 內部樣式表，行內樣式表，外部樣式表。

? ? ? ? 內部樣式表：上面。上面屬性用：鍵值對形式。

? ? ? ? 行內樣式表：<div style="color:????????pink;font-size:? ? ? ? 12px;">粉色</div>這里style是屬性。

? ? ? ? 外部樣式表：CSS代碼放到.css文件 只有樣式div{XX：XX;} 沒有style。

? ? ? ? ? ? ? ? ? ? ? ? <link rel="stylesheet" href="css文件路徑">連接

*新標簽<button>XX</button>

和<input type="button" value="XX">不同在于input應在form內要傳到服務器這個不用

實際這里可用placeholder屬性

8.emmet語法

? ? ? ? 生成HTML標簽:

? ? ? ? ? ? ? ? 生成標簽：標簽名*3

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ul>li? ? ? ? div+p

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .class名????????#id名

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $*5

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? div{XX}

? ? ? ? 生成CSS樣式：單詞首字母

CSS復合選擇器：

9.后代選擇器

? ? ? ? 元素1 元素2 (元素3)..{}? ? ? ? ?/如/.nav? ? ? ? .bg1{}中間無空格會顯示不出效果

? ? ? ? 1.? ?2必須是1后代，最終選的是元素2，

? ? ? ? 2.? ?元素2可為兒子，孫子3只要是后代就可被選出。(所以2可不寫，提倡寫)

? ? ? ? 3.? ?元素可以是任意選擇器

? ? ? ? 選定某父元素的子元素。

10.子選擇器

? ? ? ? 元素1>元素2{}

? ? ? ? 1.? ?選元素1所有直接后代且元素2

? ? ? ? 2.? ?最終選的是元素2

11.并集選擇器

? ? ? ? 元素1，元素2{}

? ? ? ? //樣式要求相同的可以為了方便管理放到一類

12.偽類選擇器

? ? ? ? ：hover{}//鼠標經過，只變hover內與之前設置不同部分，hover未變動的按之前樣式

? ? ? ? ：firstchild{}

? ? ? ? 添加特殊效果。

? ? ? ? 分類：鏈接偽類，結構偽類，(表單偽類)。。

? ? ? ? (1)鏈接偽類選擇器(比類選擇器多個.)

? ? ? ? ? ? ? ? a:link{}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //選擇所有未被訪問過的鏈接

? ? ? ? ? ? ? ? a:visited{}? ? ? ? ? ? ? ? ? ? ? ? ? ?//選擇所有已被訪問過的鏈接

? ? ? ? ? ? ? ? a:hover{}? ? ? ? ? ? ? ? ? ? ? ? ? ? //選擇鼠標指在其上的鏈接

? ? ? ? ? ? ? ? a:active{}? ? ? ? ? ? ? ? ? ? ? ? ? ?//選擇鼠標按下未彈起的鏈接，即活動鏈接

? ? ? ? ? ? ? ? 1.? ?LVHA順序(上->下)

? ? ? ? ? ? ? ? 2.? ?鏈接a用body不能指定樣式，需要單獨指定a。

? ? ? ? (2)focus偽類選擇器

? ? ? ? ? ? ? ? input：focus{}

? ? ? ? ? ? ? ? 獲取焦點表單元素。

13.元素顯示模式

? ? ? ? (1)定義：標簽以什么方式顯示，為了更好的網頁布局。

? ? ? ? (2)分類：

????????????????????????塊元素：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如：h1~h6,p,div,ul,ol,li...

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 特點：1.獨占一行；

????????????????????????????????????????2.高寬，內外邊距可設置；

????????????????????????????????????????3.寬度默認是父級100%；

????????????????????????????????????????4.內可放行內或塊級元素。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文字類(如p，h1~h6)內部不能放塊級元素。

? ? ? ? ? ? ? ? ? ? ? ? 行內元素：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如a,strong,b,em,i,del,s,ins,u,span...

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 特點：1.一行可顯示多個；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.寬高直接設置無效；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.默認寬度是本身內容寬度；

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 4.內可放文本或其他行內元素，不可放塊級元素。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 鏈接里不能放鏈接。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? a內特殊，可以放塊級元素，但最好a轉換成塊級模式更安全。

? ? ? ? ? ? ? ? ? ? ? ? 行內塊元素：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如：img,input,td(單元格)...

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 特點：1.一行可以顯示多個(行級元素特點)，中間有空白縫隙

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.默認寬度是本身內容寬度(行級元素特點)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.高度，行高，內外邊距可控制(塊級元素特點)

1.只有塊級元素默認寬度是父級100%，其他都是本身內容寬度。h p?ul ol li

2.只有行級元素不能直接設置寬高，垂直內外間距，不能直接放塊級進去，需轉換。a

????????(3)轉換：

? ? ? ? ? ? ? ? 當一個模式的元素需要另一個元素的特點時。

? ? ? ? ? ? ? ? 如：增加鏈接a的觸發范圍。display:block;(inline;/inline-block)

snipaste:(Fn+)F1截圖(量大小加文字)，F3置頂移動，alt取色，shift切顏色模式，c復制，esc去掉

https://zh.snipaste.com

//代碼分析元素應是什么元素，原本是行塊級，現在表現為行塊級(看是否獨占一行、設置了寬高)，怎么轉換和設置；

//鼠標經過等設置

小技巧：單行文字垂直居中：讓文字行高等于盒子高度。

14.CSS背景

? ? ? ? 1.? ?背景顏色(學查手冊)

? ? ? ? ? ? ? ? background-color：XX；

? ? ? ? ? ? ? ? 默認transport透明

? ? ? ? 2.? ?背景圖片

? ? ? ? ? ? ? ? background-image：none、url(圖片地址)；? ? ? ? //默認平鋪滿重復圖

? ? ? ? ? ? ? ? 如：logo，裝飾性小圖片，超大圖片。。

? ? ? ? ? ? ? ? 相比插入圖片非常容易控制位置，圖片非透明區壓住背景顏色。

? ? ? ? 3.? ?背景平鋪

? ? ? ? ? ? ? ? background-repeat:repeat/no-repeat/repeat-x/repeat-y

? ? ? ? ? ? ? ? 默認平鋪至設置的高寬。

? ? ? ? 4.? ?背景圖片位置(精靈圖時大量使用)

? ? ? ? ? ? ? ? background-position:x y;

? ? ? ? ? ? ? ? X/Y可為：

???????????????????????方位名詞：top/center/bottom/left/center/right(若XY都指定方位名詞，前后順序不影響效果)。只寫一個詞時，另一個默認居中。小圖div{}，背景圖body{top,center}，要寫寬高。

? ? ? ? ? ? ? ? ? ? ? ?精確單位：第一個是X第二個是Y，前后順序影響效果。只寫一個值時，默認寫的是X值，垂直默認居中。20px

? ? ? ? ? ? ? ? ? ? ? ?混合單位：第一個是X第二個是Y。

摳圖：檢查找圖片鏈接，新標簽頁打開，圖片另存為? ? ? ? ? ? ?

? ? ? ? 5.? ?背景圖像固定

? ? ? ? ? ? ? ? background-attachment:scroll/fixed;

? ? ? ? 6.背景屬性復合寫法

? ? ? ? ? ? ? ? background：顏色 地址 平鋪 滾動 位置(實際順序沒要求)

? ? ? ? 如：background:?pink?url("../images/background.jpg")?no-repeat?fixed?center?20px;

? ? ? ? 7.背景顏色半透明

? ? ? ? ? ? ? ? background：rgba(0,0,0,0.3);? ? ? ? //最后一個參數是透明度0~1，0完全透明，IE9+，用

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //習慣把0.3的0去掉，只是背景色半透明，其他無影響

alt+shift鼠標拉下來同時輸入幾列數據

15.CSS三大特性：

????????層疊性：對相同的選擇器的同一屬性，附不同的屬性值時? ? ? ? ->? ? ? ? 就近原則? ? ? ? (即覆蓋性)

????????繼承性：部分樣式可子承父業，簡化CSS代碼復雜性。(文字類text-,font-,line-,color),其他不繼承

????????另外a標簽樣式需要單獨設置(因為a瀏覽器默認指定了樣式，優先級>body)

????????行高可跟單位可不跟單位1.5，寫在父元素里時，表示子元素行高繼承了子元素現文字大小的1.5倍

????????子元素可根據自己文字大小調整行高，常用。沒設置大小一直找父元素到設置為止。

????????優先級：同一標簽同一屬性，附不同的屬性值時，

? ? ? ? ? ? ? ? 1.同一選擇器：層疊性(就近原則覆蓋)；

? ? ? ? ? ? ? ? 2.選擇器不同：選擇器權重：

????????????????????????????????????????!important(加在CSS重要屬性分號的前面)

????????????????????????????????????????>style=""行內樣式

????????????????????????????????????????>id>類/偽類class/:

????????????????????????????????????????>標簽

????????????????????????????????????????>*/繼承

? ? ? ? ? ? ? ? 3.復合選擇器：權重疊加(只疊加，不進位如：10個標簽選擇器權重為0，0，0，10，因此再多標簽選擇器疊加優先級依然小于類選擇器。。)

*.CSS注釋

16.盒子模型：(網頁布局核心：盒子模型，浮動，定位)

? ? ? ? 1.網頁布局過程：

? ? ? ? ? ? ? ? 1.? ?先準備好相關網頁元素，網頁元素基本都是盒子。

??????????????????????2.? ?用CSS設置盒子寬高，樣式，擺到相應位置。(浮動和定位)

? ? ? ? ? ? ? ? 3.? ?往盒子里面裝內容。

? ? ? ? ? ? ? ? 網頁的核心本質就是利用CSS擺放盒子。

? ? ? ? 2.盒子模型：

????????????????把HTML頁面中的布局元素看成一個矩形的盒子，盛放內容的容器。用CSS設置邊框，內外邊距，實際內容。(border,padding,margin,content)

? ? ? ? 3組成部分:

? ? ? ? ? ? ? ? 1.? ?border邊框(邊框寬度，邊框樣式，邊框顏色)

? ? ? ? ? ? ? ? ? ? ? ? border-width:????????XXpx;

? ? ? ? ? ? ? ? ? ? ? ? border-style:????????solid/dashed/dotted;

? ? ? ? ? ? ? ? ? ? ? ? border-color:? ? ? ? pink;

? ? ? ? ? ? ? ? ? ? ? ? 簡寫border: ????????XXpx soild pink;沒有順序要求

? ? ? ? ? ? ? ? ? ? ? ? 指定一個邊框樣式顏色border-top/bottom/left/right: ????????XXX;

? ? ? ? ? ? ? ? ? ? ? ? 表格的細線邊框border-collapse:? ? ? ? collapse;? ? ? ? //相鄰邊框合并到一起

? ? ? ? ? ? ? ? ? ? ? ? 邊框會影響盒子實際大小。->測盒子本身寬度時，不帶邊框測；

????????????????????????????????????????????????????????含邊框時：width,height分別-邊框寬度*2=盒子本身大小。

? ? ? ? ? ? ? ? 2.? ?content內容

????????????????????????直接書寫。

? ? ? ? ? ? ? ? 3.? ?padding內邊距

? ? ? ? ? ? ? ? ? ? ? ? padding-top:? ? ? ? XXpx;

? ? ? ? ? ? ? ? ? ? ? ? padding-right:

? ? ? ? ? ? ? ? ? ? ? ? padding-bottom:

? ? ? ? ? ? ? ? ? ? ? ? padding-left:

? ? ? ? ? ? ? ? ? ? ? ? padding：1上下左右? ? ? ? 2上下? ?左右? ? ? ? 3上? ?左右? ?下? ? ? ? 4上? ?右? ?下? ?左

? ? ? ? ? ? ? ? ? ? ? ? 如果盒子已附寬高，內邊距會影響盒子實際大小。(可盒子本身不給寬高，根據輸入多少和padding定寬高，更靈活)

????????????????????????padding只影響默認值或設置值，不影響默認繼承的寬度。

????????????????????????實際寬=pr+pl+盒子本身寬，高同理。范圍固定 盒子本身寬高=范圍-測量內邊距*2

? ? ? ? ? ? ? ? 4.? ?margin外邊距

? ? ? ? ? ? ? ? ? ? ? ? margin-top:? ? ? ? XXXpx;

????????????????????????margin-right:

? ? ? ? ? ? ? ? ? ? ? ? margin-bottom:

? ? ? ? ? ? ? ? ? ? ? ? margin-left:

? ? ? ? ? ? ? ? ? ? ? ? margin和padding簡寫方式一致。

? ? ? ? ? ? ? ? 不會撐大盒子。

? ? ? ? ? ? ? ? 外邊距可以讓塊級盒子實現水平居中，前提：

? ? ? ? ? ? ? ? ? ? ? ? 1.? ?這個塊級盒子必須指定了寬度；

? ? ? ? ? ? ? ? ? ? ? ? 2.? ?盒子左右的外邊距設置為auto。

? ? ? ? ? ? ? ? 給父元素添加text-align:center;讓行級元素和行級塊元素文字實現水平居中。(轉化為塊級可用外邊距實現居中)

? ? ? ? ? ? ? ? 外邊距合并，分為：

? ? ? ? ? ? ? ? ? ? ? ? 1.? ?相鄰塊元素垂直外邊距的合并

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 上下盒子的垂直間距不是margin-bottom，margin-top的和，而是取這倆最大值

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 解決方法：盡量給一個盒子添加margin值。

? ? ? ? ? ? ? ? ? ? ? ? 2.? ?嵌套塊元素垂直外邊距的塌陷

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 兩個嵌套關系的塊元素，同時都有上外邊距時，外邊距合并，父元素塌陷較大的那個外邊距。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 解決方案：父元素定義上邊框/父元素定義內邊距/父元素添加overflow:hidden

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 第三個方法不會變表現盒子的大小，推薦。

? ? ? ? ? ? ? ? ? ? ? ? 浮動，固定，絕對定位沒有塌陷問題。

? ? ? ? ? ? ? ? 清除內外邊距：*{padding:0;? ? ? ? margin:0;}

? ? ? ? ? ? ? ? 為了照顧兼容性，行級元素可以設置左右內外邊距，最好不要設置上下內外邊距。(但轉換后可以)

????????????????h,p,dt特殊，是塊級元素但是內部不能放塊級元素。

總結：1.標簽要符合語義h，p，a。。不能全部div，span等。

????????2.類名盡量多寫，命名規范，方便后期管理和后端渲染。

? ? ? ? 3.margin和padding大多時候可以混用；定過當前元素寬/高時padding會擴大盒子寬/高需要算數字減一些，此時用margin比較方便；當文字有上下邊框等用margin-左右，上下邊框會跟著跑，此時用padding比較方便。

? ? ? ? 4.先模仿再寫出自己風格，多用輔助工具。

? ? ? ? 量盒子盡量不要量到邊框，

去掉li前面的小圓點：

????????list-style:none;? ? ? ? //寫在單獨li里，全部去掉。

? ? ? ? PS基本操作

? ? ? ? 5.圓角邊框(567是CSS3新增內容，IE9及以上版本有)

? ? ? ? ? ? ? ? border-radius:? ? ? ? XXpx;/? ? ? ? 50%;? ? ? ? ...//表示寬度和高度的一半，出圓形或橢圓形

1左上右上右下左下；2左上右下? ?右上左下；3左上? ?右上左下? ?右下；4左上? ?右上? ?右下? ?左下

? ? ? ? ? ? ? ? border-top-left-radius:

? ? ? ? ? ? ? ? border-top-right-radius:

? ? ? ? ? ? ? ? border-bottom-right-radius:

? ? ? ? ? ? ? ? border-bottom-left-radius:

? ? ? ? 6.盒子陰影

? ? ? ? ? ? ? ? box-shadow:水平距離 垂直距離 模糊尺寸 大小 顏色 inset改內部陰影；(顏色常用rgba)

? ? ? ? ? ? ? ? 陰影不占用空間，不影響盒子大小和排列。多寫outset會導致陰影失效，不要寫。

? ? ? ? 之后學過渡，讓陰影慢慢出來。

? ? ? ? 任何盒子都可加:hover

? ? ? ? 7.文字陰影

? ? ? ? ? ? ? ? text-shadow:水平距離 垂直距離 模糊距離 陰影顏色；

? ? ? ? ? ? ? ? X偏移量，Y偏移量，陰影模糊半徑，陰影擴散半徑(大小)，陰影顏色

17.浮動

? ? ? ? 網頁布局PC端3種方式(移動端學新的布局方式)

? ? ? ? ? ? ? ? 網頁布局的本質：用CSS擺放盒子，把盒子擺到相應位置。

? ? ? ? ? ? ? ? 1.? ?普通流(標準流/文檔流)

? ? ? ? ? ? ? ? ? ? ? ? 按塊級元素，行級元素，行內塊元素默認方式排列。

? ? ? ? ? ? ? ? ? ? ? ? 塊級獨占一行，由上到下排列：div hr p h ul ol dl form table

? ? ? ? ? ? ? ? ? ? ? ? 行級由左到右，碰到父級元素邊緣自動換行：span a i em

????????????????元素在同一盒子兩端，滾動部分盒子不動，用標準流不方便做。

? ? ? ? ? ? ? ? 2.? ?浮動

? ? ? ? ? ? ? ? 3.? ?定位

? ? ? ? 浮動可以改變元素標簽默認的排列方式。

網頁布局準則：

? ? ? ? 1.多個塊級元素縱向排列找標準流，橫向排列找浮動。

? ? ? ??float:????????none/left/right;

? ? ? ? ? ? ? ? float屬性創建浮動框，將其移動到上級父元素的左/右邊緣或包含另一浮動框邊緣。

? ? ? ?1.浮動特性

? ? ? ? ? ? ? ? 1.? ?浮動的元素會脫離標準流(脫標)

? ? ? ? ? ? ? ? ? ? ? ? 脫離標準流的控制浮起來，并移動到指定位置。

? ? ? ? ? ? ? ? ? ? ? ? 浮動的盒子不再保留原先的位置。

? ? ? ? ? ? ? ? 2.? ?浮動的元素會一行顯示并元素頂部對齊

? ? ? ? ? ? ? ? ? ? ? ? 浮動元素是相互貼在一起沒縫隙的，若父級元素裝不下這些盒子，多出的盒子會另起一行對齊。

? ? ? ? ? ? ? ? 3.? ?浮動的元素會具有行內塊元素的特性

? ? ? ? ? ? ? ? ? ? ? ? 任何元素都可以添加浮動，添加后具有行內塊元素的特性。可設置寬高，不設按字多少

? ? ? ? ? ? ? ? ? ? ? ? 如：行內元素若有了浮動，不需轉換就可以添加寬高。和行內塊不同的是中間沒有空白縫隙。

? ? ? ? ? ? ? ? 為了約束浮動元素位置：先用標準流的父元素排列上下位置，再用內部子元素采取浮動排列左右位置。這樣浮動元素以父元素為邊緣左右對齊。

? ? ? ? ? ? ? ? 2.先設置盒子大小，再設置盒子位置。

????????????????height必須設置，否則父元素的height的繼承會被float自帶的屬性覆蓋掉

? ? ? ? 1.浮動和標準流的父盒子搭配；

? ? ? ? 2.如果一個元素浮動了，理論上所有的兄弟元素也要浮動。

? ? ? ? 浮動盒子前面的非父級標準流若獨占一行會占住下面浮動盒子的部分位置，使盒子貼住這個標準流的底部邊緣所在行(可正對邊緣或在邊緣延長線上)浮動。上一浮動右邊緣的延長線->

? ? ? ? 浮動盒子只會影響該盒子后面的標準流，不會對浮動的盒子的前面具有獨占一行屬性的標準流造成影響。在此基礎上浮動的盒子貼著前一個右邊緣延長線，達不到要求就再另起一行

? ? ? ? 浮動盒子受前面非父級的獨占一行盒子影響。

? ? ? ? 當里面產品很多和新聞不知道長短時，父盒子不寫高度，希望父盒子根據子盒子高度撐開。由于浮動元素不再占用原文檔流的位置，所以他會對后面元素的排版產生影響。

? ? ? ?父盒子沒有高度，且子盒子浮動了，且影響下面布局了時清除浮動。

? ? ? ? 清除浮動的方法：

? ? ? ? ? ? ? ? 1.? ?額外標簽法：

? ? ? ? ? ? ? ? ? ? ? ? 在最后一個浮動的子標簽后加<div style="clear:both;"></div>????????父級{clear:? ? ? ? left/right/both;}實質是閉合浮動，把子元素浮動造成的影響閉合到當前父元素里。

? ? ? ? ? ? ? ? ? ? ? ? 通俗易懂，但添加無意義標簽，結構化較差。

????????????????????????這個新增的盒子標簽必須是塊級元素或br，不能是行級元素

? ? ? ? ? ? ? ? 2.? ?父級添加overflow屬性

? ? ? ? ? ? ? ? ? ? ? ? 父級{overflow:? ? ? ? hidden/auto/scroll;}

? ? ? ? ? ? ? ? ? ? ? ? 簡潔，但會溢出隱藏把出父元素外一部分的盒子不換行而是直接切掉

? ? ? ? ? ? ? ? 3.? ?父級添加after偽元素

? ? ? ? ? ? ? ? ? ? ? ? .clearfix::after{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? content:????????"";? ? ? ? ? ? ? ? ? ? ? ? //必寫屬性

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? display:? ? ? ? block;? ? ? ? ? ? ? ? //必須是塊級元素

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height:? ? ? ? 0;? ? ? ? ? ? ? ? //讓看不見這個元素

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? clear:? ? ? ? both;? ? ? ? ? ? ? ? //清除浮動

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? visibility:? ? ? ? hidden;? ? ? ? ? ? ? ? //讓看不見這個元素

????????????????????????}

? ? ? ? ? ? ? ? ? ? ? ? .clearfix{? ? ? ? //為了兼容IE6,7專有

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? *zoom:? ? ? ? 1;

????????????????????????}

? ? ? ? ? ? ? ? 4.? ?父級添加雙偽元素

? ? ? ? ? ? ? ? ? ? ? ? .clearfix:before,.clearfix:after{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? content:????????"";? ? ? ? ? ? ? ? //必寫屬性

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? display:????????table;? ? ? ? ?//block塊級不在一行，不行，因為浮動元素在一行

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//轉換成塊級元素并且在一行顯示

????????????????????????}

? ? ? ? ? ? ? ? ? ? ? ? .clearfix:after{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? clear:? ? ? ? both;? ? ? ? ? ? ? ? //清除浮動

????????????????????????}

? ? ? ? ? ? ? ? ? ? ? ? .clearfix{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? *zoom:? ? ? ? 1;

????????????????????????}

*.定位

? ? ? ??常見的網頁布局

? ? ? ? ? ? ? ? top? ? ? ? banner? ? ? ? main(left,right,main1~...)? ? ? ? footer

? ? ? ? PS切圖

? ? ? ? ? ? ? ?1.常見圖片格式

? ? ? ? ? ? ? ? ? ? ? ? jpg：色彩保留好，產品類圖片。

? ? ? ? ? ? ? ? ? ? ? ? gif：保存透明背景和動畫效果，圖片小動畫。

? ? ? ? ? ? ? ? ? ? ? ? png：jpg，gif優點綜合，切成透明背景圖片。

? ? ? ? ? ? ? ? ? ? ? ? psd：可直接復制上面文字圖片各信息，不能直接放到頁面里。

? ? ? ? ? ? ? ? 2.PS使用

? ? ? ? ? ? ? ? ? ? ? ? 1.T復制psd文字

? ? ? ? ? ? ? ? ? ? ? ? 2.圖層切圖復制圖片

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1.? ?點擊圖層切圖:點擊導出圖片->導出為png(默認原版大小)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????????????選多個圖->圖層->合并圖層->導出為png

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 溝通

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.? ?切片切圖

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 切片選中區域->文件導出web->jpeg可調品質->存儲->選中切片

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 透明背景先把背景取消->只有gif，png支持透明背景

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 切片后移動位置->切完換到切片選擇工具

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.? ?PS插件切圖(PS完整版可用)

? ? ? ? ? ? ? ? ? ?安裝cutterman插件->web，路徑，png24直接透明..->選圖->(合并導出..)導出選中圖層

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 選中含截取部分的選區->矩形截取工具截部分選區->導出選中圖層

18.CSS屬性書寫順序

? ? ? ? 1.布局定位屬性：display/position/float/clear/visibility/overflow

? ? ? ? 2.自身屬性：width/height/margin/padding/border/background

? ? ? ? 3.文本屬性：color/font/text-decoration/text-align/vertical-align/white-space/break-word

? ? ? ? 4.其他屬性(CSS3)：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient/bgc:rgba()...

19.頁面布局整體思路

? ? ? ? 1.確定頁面版心(可視區)w，測量得出。

????????2.分析頁面中的行模塊，每個行模塊中的列模塊。

? ? ? ? 3.一行中的列模塊常浮動布局，先定每個列模塊大小，再定位置。

? ? ? ? 4.制作HTML結構。

? ? ? ? 5.先清楚布局結構(劃分成幾個模塊，怎么對齊，什么方式布局)

20.案例準備工作

? ? ? ? 1.創建study目錄文件夾，用vscode打開此文件夾

? ? ? ? 2.在study文件夾內新建文件夾images，新建首頁文件index.html,style.css

? ? ? ? 3.創建HTML骨架并在head內link引入css，寫清除內外邊距看是否引入成功

? ? ? ? 4.測版心，標尺w1226居中對齊，寫到css公共類w里

? ? ? ? 5.逐行寫，小盒子+margin

? ? ??

導航欄實際開發用ul>li>a寫：語義清晰，避免堆砌關鍵字搜索引擎降權

三個文字塊浮動后，想讓三文字在一行浮動，文字由li，a隔開，所以應該給li加浮動，因為a是行級元素，本身就會讓文字排在一行

字隨多少變寬度，所以用padding自動把盒子撐開，給a設置使點其他位置也屬于鏈接

按鈕默認有邊框。

行內塊元素有默認縫隙。

padding增大a鏈接范圍。

21.定位

? ? ? ? 1.使用場景

? ? ? ? ????????1.某元素可以自由地在一個盒子內移動，并且壓住其他盒子

? ? ? ? ????????2.滾動窗口時，盒子是固定在屏幕的某個位置

? ? ? ? 2.組成

? ? ? ? ? ? ? ? 定位模式+邊偏移

? ? ? ? ? ? ? ? 定位模式 postion:? ? ? ? static靜態/relative相對/absolute絕對/fixed固定/sticky;

? ? ? ? ? ? ? ?邊偏移 top:80px;??bottom:80px;??left:80px;??right:80px; 定義元素相對父元素上邊線的距離

? ? ? ? ? ? ? ? ????????子絕父相，但不是一直不變的。

? ? ? ? ? ? ? ? 1.相對定位相對它原來的位置，不脫標，原來的位置保留(主要用于限制絕對定位)

? ? ? ? ? ? ? ? 2.絕對定位相對祖元素位置，脫標。行內塊特征。

? ? ? ? ? ? ? ? 3.固定定位相對于瀏覽器可視窗口，脫標。可看成特殊的絕對定位。行內塊特征。

? ? ? ? ? ? ? ? ? ? ? ? 固定在版心右側：left:50%;margin-left:版心寬度/2;

? ? ? ? ? ? ? ? 4.粘性定位sticky,相對/固定定位混合:瀏覽器可視窗口為參照點(固),占有原先位置(相)

? ? ? ? ? ? ? ? ? ? ? ? 必須添加top,bottom,left,right其中的一個才有效。兼容性差，IE不支持(大部分用JS)

? ? ? ? ? ? ? ? 是否脫標，以誰為基準移動位置。

? ? ? ? ? ? ? ? 定位的疊放次序：z-index:? ? ? ? 整數；? ? ? ? 值相同則后來居上，不能加單位

? ? ? ? ? ? ? ? ? ? ? ? 定位的盒子才有z-index

? ? ? ? ? ? ? ? 定位中若同一個盒子既有left屬性又有right屬性，只執行left屬性(先左后右，先上后下)

? ? ? ? 特殊：

? ? ? ? ? ? ? ? 1.加絕對定位的盒子不能通過margin:0 auto和定寬度來水平居中，應該通過left和margin-left等實現。瀏覽器變小也始終在中央。相對定位的盒子能實現水平居中(因為不脫標)

? ? ? ? ? ? ? ? 2.絕對定位和固定定位，和浮動類似有類似行內塊屬性：

? ? ? ? ? ? ? ? ? ? ? ? 添加后不用模式轉換，行級可以直接設置高度寬度；塊級不設置寬度默認是內容大小；脫標的盒子不會觸發外邊距塌陷。

? ? ? ? ? ? ? ? 3.浮動，定位(固定)因為脫離標準流，所以不會造成外邊距合并。

? ? ? ? ? ? ? ? 浮動只會壓住標準流的盒子，不會壓住文字和圖片；絕對定位和固定定位會完全壓住標準流內容。(因為浮動最初的目的就是做文字環繞效果)

22.元素的顯示與隱藏

? ? ? ? 如：點關閉消失，刷新回來；下拉菜單

? ? ? ? 1.display:none;? ? ? ? 盒子和位置全看不到了? ? ? ? dispaly:block;還有顯示元素的意思

? ? ? ? 2.visibility:hidden;? ? ? ? 盒子看不到，位置保留

? ? ? ? 溢出顯示隱藏3.overflow:visible無處理，顯示/hidden隱藏超出/auto超出帶滾動條/scroll滾動條

? ? ? ? 有定位的盒子，慎用隱藏(如hot)

*有圖片時，一定要讓圖片和父盒子一樣大(如果需求是并且防溢出)

23.精靈圖

? ? ? ? 1.作用

? ? ? ? ????????寫好網站放服務器里。用戶訪問圖片發送請求給服務器，若每圖發一次服務器壓力大。

? ? ? ? ????????減少服務器接收發送請求的次數，提高頁面加載速度：小圖整合到一張大圖中。

? ? ??????????? 針對小背景圖片使用。(因為插入類，產品類圖片容易經常更換)

? ? ? ? 2.使用范圍

? ? ? ? ? ? ? ? ?給一個有大小的盒子設置背景圖片。

? ? ? ? ? ? ? ? 用background-position移動背景圖片x,y坐標位置(橫X縱Y，禿往左上走負)

? ? ? ? ? ? ? ? ? ? ? ? background-position:? ? ? ? -152px -20px;? ? ? ? //可以簡寫在background里

24.字體圖標

? ? ? ? 1.使用場景

? ? ? ? ? ? ? ? 結構樣式比較簡單的小圖標。方便改顏色、陰影效果、透明、旋轉。

? ? ? ? 2.作用

? ? ? ? ? ? ? ? 精靈圖是圖片文件比較大，放大縮小會失真，圖片制作完后想要更換比較復雜。

? ? ? ? ????????本質是文字，文字放大縮小不會失真；兼容性高。

? ? ? ? 3.步驟

? ? ? ? ? ? ? ? 1.字體圖標的下載

? ? ? ? ? ? ? ? ? ??http://icomoon.io? ? ?點IcoMoon APP;點Generate Font;Download

? ? ? ? ? ? ? ? ? ? ? ? http://www.iconfont.cn? ? ? ? 淘寶，阿里巴巴圖標

? ? ? ? ? ? ? ? 2.字體圖標的引入(引入到HTML頁面中)

? ? ? ? ? ? ? ? ? ? ? ? 在下載的fonts里有.ttf字體文件，電腦默認有；需要把其他后綴字體圖標文件引入到電腦中：1.把fonts文件夾粘貼到html旁邊(4個文件是為了兼容)；2.把一大段代碼復制到css中，不用背；。。。

? ? ? ? ? ? ? ? 3.字體圖標的追加(以后添加新的小圖標)

? ? ? ? 總結

? ? ? ? ? ? ? ? 1. http://icomoon.io選圖標或最下Add Icons From Library...

? ? ? ? ? ? ? ? 2. 右下Generate Font;Download

? ? ? ? ? ? ? ? 3. 把下載好的fonts文件夾放在頁面根目錄下

? ? ? ? ? ? ? ? 4. 下載的style.css里@font-face{}放到CSS部分，引字體圖標聲明? ? ?font-family對應名稱

? ? ? ? ? ? ? ? 5.下載的demo.html把文字□復制到html對應標簽內

? ? ? ? ? ? ? ? 6. 在聲明下引入的字體是下載的一堆里哪一個

? ? ? ? ? ? ? ? ? ? ? ? @font-face{}

? ? ? ? ? ? ? ? ? ? ? ? span{font-family: 'icomoon';}? ? ? ? //還可以在這指定字體顏色大小等

? ? ? ? ? ? ? ? ? ? ? ? <span>□</span>或<span>\45a9</span>

? ? ? ? ? ? ? ? 7.字體圖標追加：http://icomoon.io還是右上icomoon APP；左上import icons；選selection.json打開yes；選好下載；換成新fonts文件

25.CSS三角

? ? ? ? 矩形盒子外多等腰三角當對話框等。

? ? ? ? 寬高為0，有邊框正方形盒子，三邊透明一邊帶顏色。

? ? ? ? 為兼容行高，字體大小為0。

? ? ? ? 應用：三角對于矩形絕對定位，增加top，left其他不變。

26.常見CSS用戶界面

? ? ? ? 1. 鼠標界面

? ? ? ? ? ? ? ? cursor:????????default/pointer/move/text/not-allowed;

? ? ? ? 2. 表單輪廓線

? ? ? ? ? ? ? ? 默認點進去有藍色輪廓線，最好默認去掉

? ? ? ? ? ? ? ? input{outline:? ? ? ? none;}

? ? ? ? 3. 防止表單域拖拽

? ? ? ? ? ? ? ? textarea{resize:? ? ? ? none;}? ? ? ? //文本域也有默認藍色輪廓，最好也去掉

? ? ? ? ? ? ? ? <textarea></textarea>最好寫在一行，否則點進會有空行。

27.vertical-align屬性應用

? ? ? ? 實現圖片表單和文字的垂直對齊。? ? ? ? 寫在圖片或表單的樣式中

? ? ? ? 設置行內或行內塊元素的垂直對齊方式。

? ? ? ? vertical-align:? ? ? ? baseline/top/middle/bottom;

28.圖片底部有空白的bug

div邊框和圖片之間有空白。

多個img{display:? ? ? ? block;}因為基線對齊只對于行內或行內塊的圖片或表格等。

或img{vertical-align:? ? ? ? top/middle/bottom;}建議

<div><img><div>

29.溢出的文字省略號顯示

? ? ? ? 1.單行

? ? ? ? ? ? ? ? white-space:? ? ? ? nowrap;? ? ? ? ? ? ? ? //先強制一行顯示文本，normal自動換行

? ? ? ? ? ? ? ? overflow:? ? ? ? hidden;? ? ? ? ? ? ? ? //超出的部分隱藏

? ? ? ? ? ? ? ? text-overflow:? ? ? ? ellipsis;? ? ? ? ? ? ? ? //用省略號代替超出的部分

? ? ? ? ? ? ? ? 一般此盒子有寬高

? ? ? ? 2.多行

? ? ? ? ? ? ? ? overflow:? ? ? ? hidden;

? ? ? ? ? ? ? ? text-overflow:? ? ? ? ellipsis;

? ? ? ? ? ? ? ? display:? ? ? ? -webkit-box;? ? ? ? ? ? ? ? //彈性伸縮盒子

? ? ? ? ? ? ? ? -webkit-line-clamp:? ? ? ? 2;? ? ? ? ? ? ? ? //限制在一個塊元素文本的顯示行數

? ? ? ? ? ? ? ? -webkit-box-orient:? ? ? ? vertical;? ? ? ? ? ? ? ? //設置或檢測伸縮盒對象的子元素排列方式

? ? ? ? ? ? ? ? 然后把超出省略號的行通過改盒子高度截掉。用瀏覽器調整的高度。

? ? ? ? ? ? ? ? 一般此盒子有寬高，兼容性差，在webkit內核可使用，建議讓后臺寫

30.常見布局技巧

? ? ? ? 1. margin負值的運用

? ? ? ? ? ? ? ? 超細邊框的盒子讓右邊margin=-1px壓住左邊，使邊框粗細均勻。

? ? ? ? ? ? ? ? 對有細邊框的一行盒子都加margin=? ? ? ? -1px;即可

? ? ? ? ? ? ? ? 因為瀏覽器對一行html標簽渲染css完再執行下一行html標簽，先浮動緊貼過來，再左移，所以右邊盒子比前邊都多向左移動1px，使得壓住多余的邊框。

? ? ? ? ? ? ? ? *.鼠標放到對應子盒子邊框變色

? ? ? ? ? ? ? ? ? ? ? ? 此方法下右邊框會被下一個盒子的左邊框壓住無法顯示變色。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 無定位時：把選中的盒子變成相對定位。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 有定位時：把選中的盒子z-index改優先級(z-index用在不設定位的盒子不生效)

? ? ? ? 2. 文字圍繞浮動的運用

? ? ? ? ? ? ? ? 左圖片右文字時，可以不左右設置兩個盒子，而是利用文字圍繞浮動。

? ? ? ? ? ? ? ? 外有一個有寬高的父盒子，內有一個又寬高的浮動左盒子和子圖片，和標準流文字。

? ? ? ? 3. 行內塊的運用

? ? ? ? ? ? ? ? 頁碼上一頁下一頁，1234..共10頁，到 頁，確定。

? ? ? ? ? ? ? ? 行內塊本身有大小間距，給父盒子添加text-align:? ? ? ? center;子可水平居中

? ? ? ? ? ? ? ? .box內有a，讓a變成行內塊；父盒子text-align:center;(對內部文字,行內,行內塊元素生效)

? ? ? ? 4. css三角強化

? ? ? ? ? ? ? ? 開始是四個分別設置的15px的邊框。

? ? ? ? ? ? ? ? [/]圖的/]直角三角，然后壓到[]靠右的上面。

? ? ? ? ? ? ? ? 1. 先【X】邊框下面刪掉留[V]? ? ? ? border-bottom: 0 solid #fff;

? ? ? ? ? ? ? ? 2.把留下的變高，通過上面的角變高? ? ? ? border-top: 20px solid #111;

? ? ? ? ? ? ? ? 3.再把左側去掉得[/]? ? ? ? border-left: 0 solid #222;

? ? ? ? ? ? ? ? 4.再把上面三角改透明得彩色/]? ? ? ? border-top: 20px solid transparent;

31、css初始化

? ? ? ? 不同瀏覽器對有些標簽默認值不同。如京東-右鍵-查看網頁源代碼-firstcss-*~zoom

? ? ? ? *beautify自動格式化css

HTML5新增特性

? ? ? ? 新的標簽，表單，表單屬性。

? ? ? ? 1.新增語義化標簽

? ? ? ? ? ? ? ? <header>頭部標簽

? ? ? ? ? ? ? ? <nav>導航標簽

? ? ? ? ? ? ? ? <article>內容標簽

? ? ? ? ? ? ? ? <section>定義文檔某個區域

? ? ? ? ? ? ? ? <aside>側邊欄標簽

? ? ? ? ? ? ? ? <footer>尾部標簽

? ? ? ? ? ? ? ? 標準化針對搜索引擎，使用前ie9最好先把這些元素轉化成塊級元素，移動端更喜歡使用這些標簽。

? ? ? ? 2.新增視頻標簽.avi .mp4 .wmv..

? ? ? ? ? ? ? ? <video src="" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster=""></video>

? ? ? ? ? ? ? ? src視頻路徑，autoplay自動播放，muted靜音(谷歌設置靜音后自動播放才生效)，loop循環播放，poster播放前的畫面。reload不播放時是否預先加載，有自動播放是不用寫。reload="auto/none"

????????????????只支持mp4,webm,ogg,不同瀏覽器支持不一樣，盡量mp4的。

????????????????兼容性寫法，了解

? ? ? ? 3.新增音頻標簽mp3, wav, ogg

? ? ? ? ? ? ? ? 盡量用mp3。谷歌把音頻自動播放也禁用了。

???????????????<audio?src=""?autoplay="autoplay"?controls="controls"?loop="loop"></audio>

????????????????

? ? ? ? 4.新增input標簽

? ? ? ? ? ? ? ? 新增type語義類型。驗證時必須添加form表單域，點擊提交按鈕就可以驗證表單了。

? ? ? ? ? ? ? ? type="email" type="url" type="date" type="time" type="month" type="week" type="number" 限制用戶輸入，減少表單驗證。type="tel"?電話type="search"?搜索框type="color"

? ? ? ? ? ? ? ? 主要number,tel,search（input：search）

? ? ? ? 5.新增表單標簽屬性

? ? ? ? ? ? ? ? 必須包含在form表單域里。

? ? ? ? ? ? ? ? required="required"必填 placeholder=""提示文本 autofocus="autofocus"自動聚焦表單 autocomplete="off/on"默認顯示提交內容(前提：表單有name屬性且之前提交過)? multiple="multiple"多選文件提交?。

? ? ? ? ? ? ? ? 主要placeholder和multiple。input::placeholder可改字體顏色。

新增CSS3特性

? ? ? ? ie9+支持，移動端優于PC端。新增選擇器，盒子模型，其他特性。

? ? ? ? 1.屬性選擇器

? ? ? ? ? ? ? ? input[value]{}

? ? ? ? ? ? ? ? input[value=text]{}? ? ? ? //重點

? ? ? ? ? ? ? ? input[value^=tex]{}? ? ? ? //值以tex開頭

? ? ? ? ? ? ? ? input[value$=tex]{}? ? ? ? //值以tex結尾

? ? ? ? ? ? ? ? input[value*=tex]{}? ? ? ? //值含tex

? ? ? ? ? ? ? ? 如果是數字要加""，不是數字可加可不加。

? ? ? ? 類選擇器，屬性選擇器，偽類選擇器權重為10(div[]權重是11)

? ? ? ? div.icon交集選擇器 是div且類名為icon的

? ? ? ? 2.結構偽類選擇器

? ? ? ? ? ? ? ? 根據文檔結構(兄弟，第幾個)選擇：

? ? ? ? ? ? ? ? ul????????:first-child{}? ? ? ? //或ul???li:first-child? ? ? ? 第一個元素在li里，父元素是ul

? ? ? ? ? ? ? ? E????????:last-child{}? ? ? ? 最后一個子元素

? ? ? ? ? ? ? ? E????????:nth-child(n){}? ? ? ??

? ? ? ? ? ? ? ? ? ? ? ? n可以是數字，關鍵字，公式。

? ? ? ? ? ? ? ? ? ? ? ? 數字：E標簽的第n個子元素，從1開始。? ? ? ? ul? ? ? ? li:nth-child(2){}

? ? ? ? ? ? ? ? ? ? ? ? 關鍵字：隔行變色? ? ? ? E? ? ? ? :nth-child(even偶/odd奇){}

? ? ? ? ? ? ? ? ? ? ? ? 公式：n從0開始每次加1往后計算，只能是n不能其他字母。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 因為沒有第0個孩子和超出部分，會忽略掉。2n 2n+1 5+n(5~) -5+n(1~5)

? ? ? ? ? ? ? ? E? ? ? ? :first-of-type{}

? ? ? ? ? ? ? ? E? ? ? ? :last-of-type{}

? ? ? ? ? ? ? ? E? ? ? ? :nth-of-type(n){}

? ? ? ? E? ? li:first-child{}會把所有的孩子都排列序號，先看:first-child把元素選出來，再看元素是否是li

? ? ? ? E? ? li:first-of-type{}會看指定li標簽的孩子，不滿足li標簽不看

? ? ? ? 3.偽元素選擇器

? ? ? ? ? ? ? ? 用CSS創造標簽元素，簡化HTML結構。

? ? ? ? ? ? ? ? ::before{}? ? ? ? 在父元素內容的前面創建元素。(CSS2用:也可以識別)

? ? ? ? ? ? ? ? ::after{}

? ? ? ? ? ? ? ? 會通過CSS的方式創建一個在文檔樹找不到的行內元素，{}必須有content屬性，和標簽選擇器一樣，權重1。

? ? ? ? 4.盒子模型

? ? ? ? ? ? ? ? 有寬高的padding,border會撐大盒子。

? ? ? ? ? ? ? ? box-sizing:"content-box/border-box"；

? ? ? ? ? ? ? ? content-box? ? ? ? 盒子最終大小為width+padding+border默認；

? ? ? ? ? ? ? ? border-box? ? ? ? 盒子最終大小為 width,盒子不在隨border，padding撐大。(前提border+padding不超過width大小)，可以寫在*{}里。

? ? ? ? 此時垂直居中，line-height=height要減去padding和border。

? ? ? ? 5.CSS3其他特性

? ? ? ? ? ? ? ? 1. 圖片變模糊

? ? ? ? ? ? ? ? ? ? ? ? CSS濾鏡filter圖片變模糊或顏色偏移。

? ? ? ? ? ? ? ? ? ? ? ? filter:????????blur(5px);數越大越模糊

? ? ? ? ? ? ? ? 2. 計算盒子寬度width:calc()函數可運算

? ? ? ? ? ? ? ? ? ? ? ? width:? ? ? ? calc(100% - 80px);? ? ? ? ? ? ? ? //+-*/符號的左右一定要有空格

? ? ? ? CSS3還有動畫，2D，3D新特性。

? ? ? ? 1.CSS3過渡

? ? ? ? ? ? ? ? logo動畫平移，漸變顏色，盒子升起加陰影。可以不使用flash和js。ie9+，不影響布局。

? ? ? ? ? ? ? ? 常:hover搭配使用。誰做過渡給誰加。

? ? ? ? ? ? ? ? transtion:? ??要過渡的屬性 花費時間 運動曲線(默認ease) 何時開始(延遲觸發時間 默認0);

? ? ? ? ? ? ? ? transtion:? ? ? ? all 1s ease 0.5s;? ? ? ? //時間必須寫單位s

? ? ? ? ? ? ? ? transtion:? ? ? ? width 1s,height 2s;

? ? ? ? ? ? ? ? 運動曲線? ? ? ? linear勻速 ease慢下?ease-in加速 ease-out減速 ease-in-out先加速再減速

? ? ? ? ?廣義HTML5=HTML5+CSS3+JavaScript? ? ? ? mdn查詢

品優購

????????1.項目規劃

? ? ? ? ? ? ? ? 客戶溝通，制定方案；簽訂合同；預付訂金(不退，30%)；初稿審核(原型圖，效果圖)；前臺頁面設計，后端功能開發；測試驗收；上線培訓；后期維護。

? ? ? ? ? ? ? ? HTML，圖片，CSS，命名規范。

? ? ? ? ? ? ? ? HTML：屬性盡量值不簡寫，""，大小于，4空格，塊級換行寫，行內同行寫。

? ? ? ? ? ? ? ? CSS：書寫順序。

? ? ? ? ? ? ? ? 命名：類名小寫_? ? 項目文件夾shoping；樣式圖片文件夾images；產品圖片文件夾upload；樣式文件夾css；字體類文件夾fonts；腳本類文件夾js

? ? ? ? ? ? ? ? ? ? ? ? 首頁index.html;初始化樣式文件base.css;公共樣式文件common.css

? ? ? ? ? ? ? ? *.模塊化：講一個項目按功能劃分，一個功能一個模塊互不影響，重復使用，更換方便。

? ? ? ? ? ? ? ? 如：頭部尾部在不同頁面一樣，可寫到common.css,再link進來

? ? ? ? ? ? ? ? common.css:頭部尾部，版心寬度，清除浮動，頁面文字顏色...

? ? ? ? ? ? ? ? *.favicon圖標

? ? ? ? ? ? ? ? ? ? ? 步驟：1.制作favicon圖標；2.favicon圖標放在網站的根目錄下；3.HTML引入圖標

? ? ? ? ? ? ? ? ? ? ??1:圖標切成png格式；借助第三方網站png轉成ico? ? http://www.bitbug.net/比特蟲

? ? ? ? ? ? ? ? ? ?? ?3:<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />/直接復制網站的

? ? ? ? ? ? ? ? 找圖標：網站根目錄/favicon.ico? ? https://www.jd.com/favicon.ico

? ? ? ? ? ? ? ? *.SEO搜索引擎優化，提升網站排名。頁面必須有title,description,keyword標簽符合SEO優化。復制SEO的關鍵詞。

????????????????????<title>品優購</title>網站名(產品名)-網站的介紹

????????????????

????????????????????<meta?name="description"?content="">

????????????????????<meta?name="keywords"?content="">

?????????????????

首頁

? ? ? ? 1.shortcut行高會繼承，但只能讓文本等垂直居中，盒子不能

? ? ? ? 2.聲明字體圖標讓common.css找到fonts路徑，不是index.html，要更換路徑

列表頁

注冊頁

發布上線

拓展篇

1.服務器：本地服務器，遠程服務器

如果把電腦配成本地服務器，局域網的同學就可以訪問自己的網站了 ajax講

遠程 誰都可以通過域名訪問，如www.mi.com

(電腦下小皮面板不用配置，當服務器)

http://free.3v.do/王若琳

歡迎您使用免費空間，本免費空間僅支持HTML和ASP程序，如需更多功能可?購買收費空間！
您的網站地址：http://wrl.3vhost.work
上傳方法：免費空間-free.3v.do-幫助：免費空間如何用FTP上傳文件?訪問方法：免費空間-free.3v.do-幫助：免費空間默認首頁及上傳后的訪問方法

激活ftp

二 C3之轉換

1.2D轉換

轉換實現元素的位移，旋轉，縮放。

1.transform:translate(x,y); //100px 100px向右下移動的目標點相比初始0，0的坐標

transform:translate(100px,0); //不能省略

translform:translateX(100px); //單個寫

最大的優點：不會影響其他盒子的位置

2.transform:translate(50%);

里面參數可以用%，移動的距離是盒子自身的寬高來對比的。

定位要計算，但是transform:translate()不會

對行內元素沒有效果

2.rotate旋轉

transform:rotate(度數);

度數單位deg不能省略，正值順時針

補充：

過度寫到本身上，誰做過度給誰加。

transition:all 1s;

3.1>

>可以先正方形旋轉45度，然后只要右邊兩條邊

不用下載，比>更好控制大小

3.2旋轉中心點

transform-origin:x y; 和bgp一樣，空格隔開，默認50%,50%中心；可以設置成top center left，左上開始50px,50px

鼠標放上，圖片上下移動使用

?hover里的deg：? ? ? ? ? 是轉到多少deg，不是轉了多少deg

對行內元素沒有效果

*。overflow:hidden;不占位置

3.縮放scale

transform:scale(x,y);

x軸y軸方向放大多少倍，所以里面跟數字，不是單位，2是兩倍；可以放大縮小

xy只寫一個數，是寬度和高度等比例縮放

1.直接用寬高放大縮小盒子：上邊框不移動，左右下縮放，影響其他盒子布局

2.用transform:scale(x,y);放大縮小盒子：不會影響其他盒子，可以設置中心點

4.2D轉換綜合寫法（不會影響其他盒子）

transform:translate(50px,%)? rotate(180deg)? scale(1.1);

旋轉會導致坐標軸改變，平移寫到最前面

二 css3動畫

更多控制，可以連續自動播放，(而2d要hover)

1.定義動畫

? ?

keyframes關鍵幀%可以寫多個，有時0%可以省略；里面的百分比是總時間的劃分。

?三 3D

重點：3d位移transform:translate3D(x,y,z坐標)，3d旋轉transform:rotate3D(deg)。

? ? ? ? 透視perspective，3d呈現transform-style

1.transform:translate3d(x,y,zpx);

transform:translateX(常%。可px)；

transform:translateY();

transform:translateZ(常px);

transform:的都會后面把前面覆蓋，可以連寫

transform:translateX(px) translateY(%);

? ? ? ? 1.translateZ要通過透視perspective才能看到效果。

? ? ? ? 2.屬性名中X,Y,Z大寫，3d小寫。

? ? ? ? 3.使用3d連寫時，不能省略，沒有的軸的值要寫0

2.透視

? ? ? ? 人眼離物體(透視)：近大遠小（只看到的），單位px

z是translateZ，d是透視，物體顯示大小由兩者共同決定.

但是一般父元素同一個透視，通過translateZ調整不同盒子不同大小。

透視寫在被觀察元素的祖先盒子上面

z為負值，結合實際考慮。默認0?

?3.3d旋轉

transform:rotate3d(1，0，0，45deg);//沿著x軸旋轉45°，具體方向左手準則

transform:translate(1,1,0,45deg);沿著x，y軸矢量方向旋轉45度。

?

transform:rotateX(deg);單杠，默認延盒子中心。+透視

deg正值，上面變小往后翻。

transform:rotateY(deg);

transform:rotateZ(deg);

和2d旋轉沒啥區別，抽獎轉盤

翻轉方向左手準則（大拇指指向該軸正方向）：deg正值旋轉的方向

4.3d呈現transform-style:默認子元素不開啟3d空間flat，需要設置。

transform-style:preserve-3d;只能直接加給父元素

瀏覽器私有前綴

最后一行寫沒私有前綴的總的代碼?

?

?

總結

以上是生活随笔為你收集整理的pink-css标签的全部內容，希望文章能夠幫你解決所遇到的問題。

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