####網(wǎng)頁的布局方式Layout
? ? ####標(biāo)準(zhǔn)流：
? ? ? ? 1.定義：
? ? ? ? ? ? 標(biāo)準(zhǔn)流也叫文檔流/普通流柑蛇，是瀏覽器布局的默認(rèn)方式。
? ? ? ? 2.特點：
? ? ? ? ? ? 在標(biāo)準(zhǔn)流中有水平布局和垂直布局2種方式衙解。
? ? ? ? ? ? 塊級元素垂直布局，行內(nèi)塊或行內(nèi)元素水平布局，當(dāng)瀏覽器寬度一行不足以容納時換行從左到右依次排版舌胶。
? ? ####浮動流：
? ? ? ? 1.定義：
? ? ? ? ? ? 浮動流是一種“半脫離標(biāo)準(zhǔn)流”的排版方式升敲，它只能在水平方向上排版答倡。
? ? ? ? ? ? 為什么說是半脫離標(biāo)準(zhǔn)流？因為它脫標(biāo)后元素的位置依然是遵守標(biāo)準(zhǔn)流的布局規(guī)則驴党，即浮動元素的位置是受限于它脫標(biāo)前在標(biāo)準(zhǔn)流中位置的瘪撇。
? ? ? ? 2.特點：
? ? ? ? ? ? 1.在浮動流中是不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素的，都可以水平排版
? ? ? ? ? ? 2.在浮動流中無論是塊級元素/行內(nèi)元素/行內(nèi)塊級元素都可以設(shè)置寬高
? ? ? ? ? ? 3.綜上所述, 浮動流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級元素很像
? ? ? ? 3.注意點：
? ? ? ? ? ? 1.浮動流中沒有居中對齊, 也就是沒有center這個取值
? ? ? ? ? ? 2.在浮動流中不可以使用margin: 0 auto;
? ? ? ? 4.浮動特性：
? ? ? ? ? ? 1.浮動元素的脫標(biāo)：
? ? ? ? ? ? ? ? 當(dāng)一個元素設(shè)置浮動后港庄，就會脫離標(biāo)準(zhǔn)流倔既，不在標(biāo)準(zhǔn)流中占據(jù)位置，標(biāo)準(zhǔn)流中后面的元素就要往前補位鹏氧，此時浮動元素就會蓋住標(biāo)準(zhǔn)流中的元素渤涌。
? ? ? ? ? ? 2.浮動元素排序規(guī)則：
? ? ? ? ? ? ? ? 1.相同方向上的浮動元素，先浮動的在前面把还，后浮動的在后面
? ? ? ? ? ? ? ? 2.不同方向上的浮動元素实蓬，左浮動找左浮，右浮動找右浮
? ? ? ? ? ? ? ? 3.浮動元素浮動后的位置吊履，由它之前在標(biāo)準(zhǔn)流中的位置確定安皱。
? ? ? ? ? ? 3.浮動元素的貼靠現(xiàn)象：
? ? ? ? ? ? ? ? 1.如果浮動元素的父元素寬度足以容納所有浮動元素，浮動元素會并排顯示
? ? ? ? ? ? ? ? 2.如果浮動元素的父元素寬度不能容納所有浮動元素艇炎，那么就會從最后一個可以容納的浮動元素邊界處進行貼靠
? ? ? ? ? ? ? ? 3.如果貼靠前面的浮動元素依然不能顯示酌伊，最終貼靠到父元素的左側(cè)或是右側(cè)邊界。
? ? ? ? ? ? 4.浮動元素的字圍現(xiàn)象：
? ? ? ? ? ? ? ? 浮動元素不會遮蓋到標(biāo)準(zhǔn)流中元素的文字缀踪，標(biāo)準(zhǔn)流中元素的文字會給浮動元素讓位置居砖，貼靠到它的周圍燕锥，這就是字圍現(xiàn)象。
? ? ? ? 5.清除浮動：
? ? ? ? ? ? 1.為什么要清除浮動悯蝉？
? ? ? ? ? ? ? ? 1.當(dāng)子元素浮動后归形，不能撐起父元素的高度，父元素高度塌陷
? ? ? ? ? ? ? ? 2.當(dāng)前面元素浮動后鼻由，脫標(biāo)導(dǎo)致后面元素向前補位暇榴。
? ? ? ? ? ? 2.怎么清除浮動？
? ? ? ? ? ? ? ? 本質(zhì)：開啟元素的BFC:block formatting context
? ? ? ? ? ? ? ? 盒子是css布局的對象和基本單位蕉世，直觀的說蔼紧，整個網(wǎng)頁都是由一個個盒子組成的。 元素的類型和display屬性決定了這個盒子的類型狠轻。不同類型的盒子有不同的FC奸例。FC是一個決定如何渲染盒子及它內(nèi)部元素的容器。
? ? ? ? ? ? ? ? FC分為：BFC和IFC向楼，行內(nèi)元素使用IFC規(guī)則查吊，塊級元素使用BFC規(guī)則
? ? ? ? ? ? ? ? 我們主要使用BFC，IFC很少使用
? ? ? ? ? ? BFC：它是一塊獨立的渲染區(qū)域湖蜕，內(nèi)部只有block-level-box參與其中逻卖，并且與它外部毫不相干。
? ? ? ? ? ? ? ? 布局規(guī)則：
? ? ? ? ? ? ? ? ? ? 1.內(nèi)部盒子在垂直方向放置昭抒，每個獨占一行评也，和標(biāo)準(zhǔn)流相同
? ? ? ? ? ? ? ? ? ? 2.內(nèi)部子盒子之間的間距由margin控制，垂直方向會重疊灭返，和標(biāo)準(zhǔn)流相同
? ? ? ? ? ? ? ? ? ? 3.計算BFC高度時盗迟，浮動元素也參與計算
? ? ? ? ? ? ? ? ? ? 4.BFC區(qū)域不會與浮動元素重疊
? ? ? ? ? ? ? ? ? ? 5.BFC區(qū)域內(nèi)部如何布局不會影響外部，反之亦然熙含。
? ? ? ? ? ? ? ? 默認(rèn)BFC不開啟罚缕，怎么開啟元素的BFC？
? ? ? ? ? ? ? ? ? ? 1.html 根標(biāo)簽自帶BFC婆芦，形成標(biāo)準(zhǔn)流
? ? ? ? ? ? ? ? ? ? 2.浮動元素怕磨，屬性不為none;
? ? ? ? ? ? ? ? ? ? 3.定位元素喂饥，絕對定位/固定定位消约；
? ? ? ? ? ? ? ? ? ? 4.overflow:hidden/auto/scroll; 即不為none的元素
? ? ? ? ? ? ? ? ? ? 5.display:inline-block;的元素
? ? ? ? ? ? 3.清除浮動的六種方式:
? ? ? ? ? ? ? ? 1.直接給父元素設(shè)置高寬。（在開發(fā)中员帮，高度盡量不寫）
? ? ? ? ? ? ? ? 2.給當(dāng)前要清除浮動的子元素設(shè)置clear:both;屬性或粮，可以使它不受前面浮動兄弟元素影響，可以撐起高度捞高。但設(shè)置了clear屬性后氯材，弊端：不能使用該元素的margin-top屬性了
? ? ? ? ? ? ? ? 3.外墻法：在兩個有浮動子元素的盒子之間添加一個額外的塊級元素然后為這個塊級元素設(shè)置clear:both;設(shè)置這個div的寬高可以模擬盒子的margin效果渣锦，但它創(chuàng)建了冗余的結(jié)構(gòu)，不利于維護
? ? ? ? ? ? ? ? 4.內(nèi)墻法：在上一個浮動元素的后面添加一個額外的塊級元素然后為這個塊級元素設(shè)置clear:both;內(nèi)墻法使第二個盒子的margin-top屬性生效氢哮，但同樣它創(chuàng)建了冗余的結(jié)構(gòu)袋毙，不利于維護
? ? ? ? ? ? ? ? 5.為浮動元素設(shè)置overflow:hidden;它可以撐起父元素高度，也可以使用margin屬性冗尤，優(yōu)點：不用添加額外的標(biāo)簽又可以撐起父元素的高度听盖；缺陷：和定位一起用時會產(chǎn)生沖突。在ie8及以下瀏覽器中裂七，不支持overflow屬性皆看，所以用*zoom = 1; 來兼容。 *是hack標(biāo)識符背零，只有ie8及以下版本可以識別到腰吟。
? ? ? ? ? ? ? ? 6.為要清除浮動的元素設(shè)置.clearfix類
? ? ? ? ? ? ? ? ? ? .clearfix::before,.clearfix::after{
? ? ? ? ? ? ? ? ? ? ? ? content:"";
? ? ? ? ? ? ? ? ? ? ? ? display:block;
? ? ? ? ? ? ? ? ? ? ? ? height:0;
? ? ? ? ? ? ? ? ? ? ? ? visibility:hidden;
? ? ? ? ? ? ? ? ? ? ? ? clear:both;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? .clearfix{
? ? ? ? ? ? ? ? ? ? ? ? *zoom:1;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? 這樣設(shè)置是最優(yōu)解法，撐起了元素高度徙瓶，可以使用margin屬性
? ? ####position定位流：
? ? ? ? position:relative/absolute/fixed/*static*;
? ? ? ? relative:
? ? ? ? ? ? 1.定義：
? ? ? ? ? ? ? ? 相對定位是參照元素本身在標(biāo)準(zhǔn)流中的位置來移動毛雇。
? ? ? ? ? ? 2.注意點：
? ? ? ? ? ? ? ? 1.相對定位的元素不脫離標(biāo)準(zhǔn)流，仍然在標(biāo)準(zhǔn)流中占據(jù)位置
? ? ? ? ? ? ? ? 2.相對定位的元素在某個方向上的定位屬性只能用一個
? ? ? ? ? ? ? ? 3.由于相對定位的元素不脫離標(biāo)準(zhǔn)流侦镇，所以區(qū)分塊級/行內(nèi)塊/行內(nèi)元素禾乘，給它設(shè)置margin/padding,依然會對標(biāo)準(zhǔn)流產(chǎn)生影響。
? ? ? ? absolute:
? ? ? ? ? ? 注意點：
? ? ? ? ? ? ? ? 1.相對于離它最近的祖先元素進行定位虽缕，如果沒有一直找到初始包含塊
? ? ? ? ? ? ? ? 2.絕對定位元素脫離了標(biāo)準(zhǔn)流始藕，因此它不區(qū)分行內(nèi)/行內(nèi)塊/塊級元素，設(shè)置它的padding/margin屬性也不會影響到標(biāo)準(zhǔn)流中的布局氮趋。
? ? ? ? ? ? ? ? 3.默認(rèn)情況下伍派，絕對定位是以初始包含塊為參照進行定位的。
? ? ? ? ? ? ? ? 4.絕對定位元素會忽略它定位參照物的padding剩胁。
? ? ? ? ? ? ? ? 5.子絕父相：
? ? ? ? ? ? ? ? ? ? 因為relative會占據(jù)標(biāo)準(zhǔn)流的位置诉植，不利于布局，而absolute默認(rèn)參照初始包含塊定位昵观，會隨著網(wǎng)頁滾動而滾動晾腔。因此大多數(shù)場景下我們使用子絕父相。比如啊犬，圖片的層疊灼擂。
? ? ? ? ? ? ? ? 6.絕對定位元素不在標(biāo)準(zhǔn)流中，不能再使用margin:0 auto;的居中方案觉至，此時要用：
? ? ? ? ? ? ? ? 1.left:50%; margin-left:負的自身寬度的一半
? ? ? ? ? ? ? ? 2.left:50%; transform:(translateX(-50%));
? ? ? ? fixed:
? ? ? ? ? ? 注意點：
? ? ? ? ? ? ? ? 1.固定定位參照于視口左上角剔应。
? ? ? ? ? ? ? ? 2.固定定位脫離標(biāo)準(zhǔn)流，因此它不區(qū)分行內(nèi)/行內(nèi)塊/塊級元素，設(shè)置它的margin/padding也不會影響到標(biāo)準(zhǔn)流的布局
? ? ? ? ? ? ? ? 3.固定定位元素和position-attachment:fixed峻贮，效果很像席怪，即不會隨著滾動條滾動而滾動。
? ? ? ? ? ? ? ? 4.IE6不支持固定定位纤控，且移動端開發(fā)中挂捻，經(jīng)常使用絕對定位來模擬固定定位。
? ? ? ? z-index屬性：
? ? ? ? ? ? 1.作用：
? ? ? ? ? ? ? ? z-index屬性是專門用于控制定位元素的覆蓋關(guān)系的船万。
? ? ? ? ? ? 2.注意點：
? ? ? ? ? ? ? ? 1.默認(rèn)情況下所有元素都有z-index屬性细层，默認(rèn)值為0.
? ? ? ? ? ? ? ? 2.默認(rèn)情況下，定位流覆蓋標(biāo)準(zhǔn)流唬涧，后面的定位元素覆蓋前面的定位元素疫赎，而設(shè)置了z-index后，誰的值越大碎节，誰顯示在前面捧搞。
? ? ? ? ? ? ? ? 3.相對定位元素也可以設(shè)置層級。
? ? ? ? ? ? ? ? 3.z-index的從父現(xiàn)象：
? ? ? ? ? ? ? ? ? ? 如果2個元素的父元素沒有設(shè)置z-index,則誰的高狮荔，誰顯示在前胎撇。
? ? ? ? ? ? ? ? ? ? 如果2個元素的父元素有設(shè)置z-index,則誰的父元素層級高，誰顯示在前殖氏。
? ? ? ? ? ? 3.應(yīng)用場景：設(shè)置后面的定位元素不能覆蓋前面的導(dǎo)航條等
? ? ####flex 伸縮布局
? ? ? ? 1.定義：
? ? ? ? ? ? 伸縮布局是一種新的布局方案晚树。設(shè)置display:flex；的元素是container, 里面的子元素成為 items, 有主軸 main axis, 從軸 cross axis
? ? ? ? 2.屬性：
? ? ? ? ? ? 1. flex-deriction: *row*/column/row-reverse/column-reverse;
? ? ? ? ? ? ? ? 注意：默認(rèn)main cross為x軸雅采，原點在container左上角
? ? ? ? ? ? 2.justify-content items在主軸上的對齊方式：
? ? ? ? ? ? ? ? 取值：
? ? ? ? ? ? ? ? ? ? *flex-start*;
? ? ? ? ? ? ? ? ? ? flex-end;
? ? ? ? ? ? ? ? ? ? center;
? ? ? ? ? ? ? ? ? ? space-between;
? ? ? ? ? ? ? ? ? ? space-around;
? ? ? ? ? ? 3.align-items items在側(cè)軸上的對齊方式：
? ? ? ? ? ? ? ? 取值：
? ? ? ? ? ? ? ? ? ? *flex-start*;
? ? ? ? ? ? ? ? ? ? flex-end;
? ? ? ? ? ? ? ? ? ? center;
? ? ? ? ? ? ? ? ? ? baseline;
? ? ? ? ? ? ? ? ? ? stretch; items拉伸對齊爵憎。使用此參數(shù)注意items不能設(shè)置寬度或高度，否則stretch失效婚瓜。因為固定了高度/寬度宝鼓，此時無法拉伸了
? ? ? ? ? ? 4.align-self 單個item在側(cè)軸上的對齊方式：
? ? ? ? ? ? ? ? 取值：
? ? ? ? ? ? ? ? ? ? *flex-start*;
? ? ? ? ? ? ? ? ? ? flex-end;
? ? ? ? ? ? ? ? ? ? center;
? ? ? ? ? ? ? ? ? ? baseline;
? ? ? ? ? ? ? ? ? ? stretch;
? ? ? ? ? ? ? ? 注意點：
? ? ? ? ? ? ? ? ? ? 1.align-self要寫在item的css中，它是項目屬性巴刻。
? ? ? ? ? ? /items換行與換行對齊/
? ? ? ? ? ? 5.flex-wrap 主軸寬度不足以容納所有items時愚铡，items的排列方式(等比壓縮或換行顯示)
? ? ? ? ? ? ? ? 取值：
? ? ? ? ? ? ? ? ? ? *nowrap*; 默認(rèn)等比壓縮伸縮項，不換行
? ? ? ? ? ? ? ? ? ? wrap; 伸縮項換行顯示胡陪，不壓縮
? ? ? ? ? ? ? ? ? ? wrap-reverse; 伸縮項換行沥寥，并以行為單位進行反序排列
? ? ? ? ? ? 6.align-content 當(dāng)items在主軸換行時，items在側(cè)軸的對齊方式
? ? ? ? ? ? ? ? 取值：
? ? ? ? ? ? ? ? ? ? *flex-start*;
? ? ? ? ? ? ? ? ? ? flex-end;
? ? ? ? ? ? ? ? ? ? center;
? ? ? ? ? ? ? ? ? ? space-between;
? ? ? ? ? ? ? ? ? ? space-around;
? ? ? ? ? ? ? ? ? ? *stretch*;
? ? ? ? ? ? ? ? 注意點：
? ? ? ? ? ? ? ? ? ? stretch: 以行為單位進行拉伸, 拉伸的部分以空白填充, 保證拉伸之后所有的行加起來能夠填滿側(cè)軸
? ? ? ? ? ? ? ? ? ? 默認(rèn)情況下?lián)Q行就是就是拉伸對齊
? ? ? ? ? ? ? ? ? ? 一定要注意: 在換行中的拉伸對齊是指, 所有行的高度總和要和伸縮容器的高度一樣
? ? ? ? ? ? ? ? ? ? 所以會將多余的空間平分之后添加給每一行
? ? ? ? ? ? 7.order 伸縮項在主軸中排序
? ? ? ? ? ? ? ? 默認(rèn)為0柠座，值大的在后邑雅，值小的在前。
? ? ? ? ? ? 8.flex-grow 伸縮項的拉伸因子
? ? ? ? ? ? ? ? 在主軸上當(dāng)items的沒有填滿容器時愚隧，可以設(shè)置寬度或高度按設(shè)定比列拉伸锻全，使items填滿容器狂塘。
? ? ? ? ? ? ? ? 注意點：
? ? ? ? ? ? ? ? ? ? 1. flex-grow默認(rèn)值為：0录煤，即不拉伸
? ? ? ? ? ? ? ? ? ? 2.本質(zhì)上就是將主軸富余空間分為幾份,按照設(shè)置的比例添加到各個items中
? ? ? ? ? ? ? ? ? ? 3.計算公式：
? ? ? ? ? ? ? ? ? ? ? ? 1.計算剩余的空間
? ? ? ? ? ? ? ? ? ? ? ? ? 伸縮容器寬度 - 所有伸縮項的寬度
? ? ? ? ? ? ? ? ? ? ? ? ? ? 400 - 300 = 100
? ? ? ? ? ? ? ? ? ? ? ? 2.計算每份剩余空間的寬度
? ? ? ? ? ? ? ? ? ? ? ? ? 剩余空間 / 需要的份數(shù)? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? 100 / 6 = 16.66 //給items分配的flex-grow總和為6
? ? ? ? ? ? ? ? ? ? ? ? 3計算每個伸縮項最終的寬度
? ? ? ? ? ? ? ? ? ? ? ? ? 伸縮項的寬度 + 需要的份數(shù) * 每份的寬度
? ? ? ? ? ? 9.flex-shrink 伸縮項的收縮因子
? ? ? ? ? ? ? ? 當(dāng)所有伸縮項寬度的總和比伸縮容器寬度大的時, 我們可以通過flex-shrink讓系統(tǒng)調(diào)整伸縮項的寬度,
? ? ? ? ? ? ? ? 以便于讓所有伸縮項的寬度的總和等于伸縮容器的寬度。
? ? ? ? ? ? ? ? 注意點：
? ? ? ? ? ? ? ? ? ? 1.flex-shrink默認(rèn)值為1荞胡，即不壓縮妈踊。
? ? ? ? ? ? ? ? ? ? 2.本質(zhì)上就是根據(jù)設(shè)置給各個item的收縮因子計算需要收縮的量最終使items剛好在充滿容器主軸
? ? ? ? ? ? ? ? ? ? 3.計算公式：
? ? ? ? ? ? ? ? ? ? ? ? 1.計算溢出的寬度
? ? ? ? ? ? ? ? ? ? ? ? 伸縮容器的寬度 - 所有伸縮項的寬度總和
? ? ? ? ? ? ? ? ? ? ? ? 400 - 600 = -200
? ? ? ? ? ? ? ? ? ? ? ? 2.計算總權(quán)重
? ? ? ? ? ? ? ? ? ? ? ? 每個伸縮項需要的份數(shù) * 每個伸縮項的寬度
? ? ? ? ? ? ? ? ? ? ? ? 1 * 200 + 2 * 200 + 3 * 200 = 1200
? ? ? ? ? ? ? ? ? ? ? ? 3.計算每個伸縮項需要壓縮的寬度
? ? ? ? ? ? ? ? ? ? ? ? 溢出的寬度 * 需要的份數(shù) * 每個伸縮項的寬度 / 總權(quán)重
? ? ? ? ? ? ? ? ? ? ? ? -200 * 1 * 200 / 1200 = -33.33 //item1
? ? ? ? ? ? ? ? ? ? ? ? -200 * 1 * 200 / 1200 = -33.33 //item2
? ? ? ? ? ? ? ? ? ? ? ? -200 * 1 * 200 / 1200 = -33.33 //item3
? ? ? ? ? ? 10.flex-basis 伸縮項的專用寬度
? ? ? ? ? ? ? ? 注意點：
? ? ? ? ? ? ? ? ? ? 1.如果設(shè)置了flex-basis，那么伸縮項的width就會失效泪漂，
? ? ? ? ? ? ? ? ? ? 2.如果2者共存廊营，其中一個值為auto,那么會采用具體的px值。
? ? ? ? ? ? 11.flex連寫
? ? ? ? ? ? ? ? 1.格式
? ? ? ? ? ? ? ? ? ? flex:flex-grow flex-shrink flex-basis;
? ? ? ? ? ? ? ? 2.注意點：
? ? ? ? ? ? ? ? ? ? 1.通陈芮冢可以把flex-shrink露筒，flex-basis省略掉，只寫flex:1;就是讓伸縮項在容器內(nèi)等比擴充填滿容器敌卓。
? ? ####圣杯布局
? ? ? ? 1.什么是圣杯布局慎式？
? ? ? ? ? ? 要求三列布局，兩邊寬度固定趟径，中間寬度自適應(yīng)瘪吏。
? ? ? ? 2.圣杯布局步驟：
? ? ? ? ? ? 1.搞一個容器，里面放置三個盒子,注意中間盒子放最上面
? ? ? ? ? ? 2.給2邊的盒子固定寬度蜗巧，中間盒子設(shè)置width:100%;
? ? ? ? ? ? 3.設(shè)置兩邊的盒子都左浮動
? ? ? ? ? ? 4.設(shè)置第一個盒子左右2邊各有一個寬度等于下面2個盒子的padding
? ? ? ? ? ? 5.左邊盒子margin-left:-100%,右邊盒子margin-left:-自身寬度掌眠；
? ? ? ? ? ? 6.左右2個盒子開啟相對定位，平移各自長度到左右側(cè)即可幕屹。
? ? ? ? ? ? 注意：圣杯布局要給body設(shè)置一個最小寬度蓝丙，否則超出最小寬度會變形
? ? ####雙飛翼布局
? ? ? ? 1.什么是雙飛翼布局？
? ? ? ? ? ? 同圣杯布局一樣的需求
? ? ? ? 2.雙飛翼布局的步驟：
? ? ? ? ? ? 1.搞一個容器望拖，里面放置三個盒子,注意中間盒子放最上面
? ? ? ? ? ? 2.給2邊的盒子固定寬度迅腔，中間盒子設(shè)置width:100%;
? ? ? ? ? ? 3.設(shè)置兩邊的盒子都左浮動
? ? ? ? ? ? 4.給中間盒子里面嵌套一個子盒子，然后給子盒子設(shè)置左右等于左右盒子的margin
? ? ? ? ? ? 5.左邊盒子margin-left:-100%,右邊盒子margin-left:-自身寬度靠娱；
----
#### transition 過渡
? ? 1.過渡三要素：
? ? ? ? 1.必須要有屬性發(fā)生變化沧烈；
? ? ? ? 2.必須有變化的屬性名稱；
? ? ? ? 3.必須要有持續(xù)時間像云；
? ? 2.屬性：
? ? ? ? transition-property:css可動畫屬性锌雀； 多個屬性時，用逗號隔開
? ? ? ? transition-duration:s/ms;
? ? ? ? transition-timing-function:*ease*/ease-in/ease-in-out/ease-out/linear/step[*start*,end];
? ? ? ? transition-delay:s/ms; 多個時定義一個列表
? ? 3.連寫：
? ? ? ? transition: all/css可動畫屬性名 過渡時長 運動速度 延遲時長迅诬；
? ? 4.注意點：
? ? ? ? 1.和分開寫一樣, 如果想給多個屬性添加過渡效果也是用逗號隔開即可
? ? ? ? 2.連寫的時可以省略后面的兩個參數(shù),因為只要編寫了前面的兩個參數(shù)就已經(jīng)滿足了過渡的三要素
? ? ? ? 3.如果多個屬性運動的速度,延遲的時間,持續(xù)時間都一樣腋逆，那么可以簡寫為transition:all 0s;
? ? ? ? 4.哪個元素要執(zhí)行過渡動畫，那么過渡屬性就加給誰侈贷。
? ? 5.編寫過渡套路
? ? ? ? 1.不要管過渡, 先編寫基本界面
? ? ? ? 1.修改我們認(rèn)為需要修改的屬性
? ? ? ? 1.再回過頭去給被修改屬性的那個元素添加過渡即可
----
#### transform2D 2D變形
? ? 1.transform:rotate(ndeg);
? ? 2.transform:translate(offsetX,offsetY);
? ? 3.transform:scale(x,y);
? ? ? ? 注意點:
? ? ? ? ? ? 只要父元素被拉伸了,子元素也會被拉伸
? ? 4.transform-origin(offsetX,offsetY);
? ? ? ? 1.取值：
? ? ? ? ? ? x方位關(guān)鍵字 y方位關(guān)鍵字 center/top/bottom/left/right
? ? ? ? ? ? x% y%;
? ? ? ? ? ? xpx ypx;
? ? ? ? 2.注意點：
? ? ? ? ? ? 默認(rèn)情況下所有的元素都是以自己的中心點作為參考來旋轉(zhuǎn)的惩歉，我們可以通過形變中心點屬性來修改它的參考點。
? ? 5.perspective 景深:
? ? ? ? 1.什么是景深？
? ? ? ? ? ? 近大遠小
? ? ? ? 2.注意點
? ? ? ? ? ? 一定要注意, 透視屬性必須添加到需要呈現(xiàn)近大遠小效果的元素的父元素上面
? ? 6.transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
? ? 注意點：
? ? ? ? 1.如果需要進行多個轉(zhuǎn)換, 那么用空格隔開
? ? ? ? 2.2D的轉(zhuǎn)換模塊會修改元素的坐標(biāo)系, 所以旋轉(zhuǎn)之后再平移就不是水平平移的
#### transform3D 3D變形
? ? 1.什么是2D和3D
? ? ? ? 2D就是一個平面, 只有寬度和高度, 沒有厚度
? ? ? ? 3D就是一個立體, 有寬度和高度, 還有厚度
? ? ? ? 默認(rèn)情況下所有的元素都是呈2D展現(xiàn)的
? ? 2.如何讓某個元素呈3D展現(xiàn)
? ? ? ? 和透視一樣, 想看到某個元素的3d效果, 只需要給他的父元素添加一個transform-style屬性, 然后設(shè)置為preserve-3d即可
? ? 3.怎么畫一個正方體撑蚌？
? ? ? ? 準(zhǔn)備一個ul>li*6,先平移再旋轉(zhuǎn)上遥。
? ? 4.怎么畫一個長方體？
? ? ? ? 先畫出來正方體争涌，再給四個面transform：scale(offsetX,offsetY);
? ? 5.transform-style: preserve-3d; 能讓2D元素呈現(xiàn)出3D效果粉楚。
? ? 6.拓展：
? ? ? ? 1. position:absolute; left:50%,transform:translateX(-50%);水平居中
? ? ? ? 2. position:absolute; top:50%, transform:translateY(-50%);垂直居中
#### animation 動畫
? ? 1.animation-name:自定義動畫名;
? ? ? ? @keyframes 自定義動畫名{
? ? ? ? ? ? from{
? ? ? ? ? ? ? ? css聲明；
? ? ? ? ? ? }
? ? ? ? ? ? to{
? ? ? ? ? ? ? ? css聲明亮垫；
? ? ? ? ? ? }
? ? ? ? }
? ? 2.animation-duration:ms/s;
? ? 3.animation-timing-function:*ease*/ease-in/ease-out/ease-in-out/linear/step[*start*/end];
? ? 4.animation-iteration-count:infinite;
? ? 5.animation-direction:normal/alternate;
? ? 6.animation-fill-mode:*none*/forwards/backwards/both;
? ? 7.animation-play-state:*running*/paused;
? ? 8.動畫模塊連寫格式
? ? ? ? animation:動畫名稱 動畫時長 動畫運動速度 延遲時間 執(zhí)行次數(shù) 往返動畫;
? ? ? 動畫模塊連寫格式的簡寫
? ? ? ? animation:動畫名稱 動畫時長;
? ? 3.注意點：
? ? ? ? 1.過渡和動畫之間的異同
? ? ? ? 不同點
? ? ? ? ? ? 過渡必須人為的觸發(fā)才會執(zhí)行動畫
? ? ? ? ? ? 動畫不需要人為的觸發(fā)就可以執(zhí)行動畫
? ? ? ? 2.相同點
? ? ? ? ? ? 過渡和動畫都是用來給元素添加動畫的
? ? ? ? ? ? 過渡和動畫都是系統(tǒng)新增的一些屬性
? ? ? ? ? ? 過渡和動畫都需要滿足三要素才會有動畫效果
? ? ? ? 3.動畫中如果有和默認(rèn)樣式中同名的屬性, 會覆蓋默認(rèn)樣式中同名的屬性
? ? ? ? 4.在編寫動畫的時候, 固定不變的值寫在前面, 需要變化的值寫在后面
