HTML+CSS筆記

【清除浮動】
一、父盒子給高度
二、父盒子給overflow: hidden;

三、在同級元素尾部添加標籤並增長樣式 clear: both;

【表單】
一、全部具備功能的標籤（input,select...）都要放在form表單中才能生效
二、     <form>
        <fieldset>
            <legend>用戶註冊</legend>
            <input type="text">
            .......
        </fieldset>
    </form>

    fieldset和legend能使一個邊框上有文字生成，一種格式。

【dl>dt+dd】
一、圖文混排就想到 dt+dd  加強語義化  （float:left;）

【figure標籤】
一、語義化媒體標籤

    用法    <figure>
            <figcaption></figcaption> 頭    
            <div></div>
        </figure>

【datalist】
一、數據綁定
    
    用法    <input id="myCar" list="cars" />
        <datalist id="cars">
              <option value="BMW">
              <option value="Ford">
              <option value="Volvo">
        </datalist>

【details】
一、被摺疊的內容 像二級樹

    用法    <details>
            <summary>打開</summary>
            打開的內容
        <details>

【marquee】（相似彈幕）
一、滾動的標籤（W3C沒有，可是瀏覽器都支持）
    <marquee></marquee>

二、屬性 (移動方向)direction="left/right/up/down"
    
    (移動速度)scrollamount="10"

    (循環次數)loop="2"

    (滾動類型)behavior="alternate/slide" (來回/一次停住)

【inherit】
一、麻煩的屬性不想再寫一遍，在子元素屬性添加:inherit（前提：父元素有該屬性）

【聖盃佈局、雙飛翼佈局】(在小碼哥1112資料裏)
一、不用flex能自動縮放
二、適用一切瀏覽器

【垂直水平居中的2種方式】
一、絕對定位後 left：50%；top:50%; margin-left:(-width/2)px;
二、絕對定位後 left:0;top:0;bottom:0;right:0;margin:auto;      (這是特殊方法)

【background-attachment:fixed;】
一、背景圖作固定定位，移動滾輪纔有效果

【快捷寫法】
一、ul>li{內容}     中括號添加標籤裏內容
二、ul>li.num$*3       生成3個num1 num2 num3類名的li

【兄弟選擇器】
一、+      其後一個
二、~      其後所有元素

【::selection】
一、鼠標選中文字時，改變選中後的樣式
 

【overflow:hidden是能切割一切盒子外的地方】
一、嵌套層的盒子即便相對父盒子絕對定位，父盒子只要設置overflow:hidden；超出盒子範圍的任何子元素都會隱藏
   z-index設置多大也不會出現。

【對僞對象的hover】
一、 ******* div:hover::after   並非  div::after:hover

【transform一些特性】
一、只要在該標籤使用 scale rotate translate 的動做的瞬間，就至關於脫離文檔流呈如今最上方，除有z-index>1之外不能覆蓋，否則都能覆蓋
二、變化的時候margin,padding都會根據屬性變化發生改變，但不會把原來的位置撐開

******記着變化的瞬間，至關於脫離文檔浮在最上面

【transform-origin】
一、定的位置要在本元素上寫，不要寫在:hover上寫（這樣寫起點不斷改變）

【transform-style: preserve-3d;】
一、三維屬性要添加在父級上，裏面的元素才能夠進入三維空間
二、進入三維空間後，若是給父盒子添加維度屬性，要按照三維空間去考慮，總體縮放或者移動會獲得想要的結果 （eg:scale3d(x,y,z)）
三、只要給transform 父盒子 裏面的元素都會改變
四、旋轉都是順時針爲正方向

【@font-face 字體圖標】
一、小碼哥1120   裏面有最兼容的方法（第二種）往後就寫這種(原理：unicode是字體在網頁端最原始的應用方式)

(Unicode(統一碼、萬國碼、單一碼)是一種在計算機上使用的字符編碼)

【媒體查詢範圍值】
一、  PC     @media（min-width:981px）{}
二、  Pad    @media(min-width:621px) and (max-width:980px){}
三、  Phone  @media(max-width:620px){} 
四、  往後寫媒體查詢加上 @media screen (...){...}  加上screen 是保證只給有屏幕的且支持H5的設備觀看

【外鏈媒體查詢（提升加載效率）】
一、  <link rel="stylesheet" href="css/pc.css" media="screen and (min-width:981px)">
二、  <link rel="stylesheet" href="css/pad.css" media="screen and (min-width:621px) and (max-width:980px)">
三、  <link rel="stylesheet" href="css/phone.css" media="screen and (max-width:620px)">

【響應式網站寫CSS】
一、寫樣式的時候儘可能把PC的 嵌套寫法都寫進去，這樣保證權重一致，方便往後修改

【position:fixed;被覆蓋問題】 一、若是都不設置z-index  後面的也會覆蓋固定定位的盒子；