前端基礎總結之CSS

清除浮動
爲什麼：當一個元素浮動之後，不會影響到 塊級框的佈局而只會影響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會 自動伸高來閉合浮動元素（“高度塌陷”現象）。
    1，在父元素中設置overflow：hidden，消除子元素浮動對頁面的影響
        缺點：不能和position一起使用，超出區域的部分會被隱藏
    2，使用額外標籤法：在浮動的盒子之下再放一個標籤，在這個標籤中使用clear:both，來清除浮動對頁面的影響.
        缺點：這種清除浮動的方式會增加頁面的標籤，造成結構的混亂.
    3，父級div定義僞類：after和zoom
　　　　.clearfix:after{
　　　　　　content:"";//設置內容爲空
　　　　　　height:0;//高度爲0
                    line-height:0;//僞對象中設置height:0
                    display:block;//將文本轉爲塊級元素
　　　　　　visibility:hidden;//將元素隱藏
　　　　　　clear:both//清除浮動
　　　　　}
　　　　.clearfix{
　　　　　　zoom:1;//爲了兼容IE
　　　　}

保持浮層水平垂直居中

1.利用flexbox佈局
.parent{
        width: 100%;
        height: 37.5rem/* 600px */;
        background: #09c;
        display: flex;
        justify-content:center;     /* 水平居中 */
        align-items:center;         /* 垂直居中 */
        /* flex-direction:column; */    /* 一列顯示 */
    }
    .children{
        width: 100px;
        height: 100px;
        border: 1px dashed #000;
        margin: 5px;
        /*如果children下面還有子元素的話，可以嵌套使用*/
        /* display: flex;
        justify-content: center;
        align-items:center;  */
    }
2.利用絕對定位與transform
.parent{
        position: absolute;
        background-color: #eee;
        width: 100%;
        height: 100%;
    }
    .parent .children{
        background-color: #751;
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
    }
3.將父元素定位，子元素絕對定位，利用margin負值爲子元素寬高的一半來實現。
.parent{
        position: relative;
        background-color: #eee;
        height: 600px;
        width: 100%;
    }
    .parent .children{
        background-color: #751;
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -100px 0 0 -100px;
    }
4.利用定位與margin：auto
.parent{
        width: 100%;
        height: 37.5rem/* 600px */;
        background: #09c;
        position: relative;
    }
    .children{
        width: 100px;
        height: 100px;
        background-color: #eee;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
 

CSS優先級（樣式層級關係）

        1，內聯樣式 <p style="...;...;"> ...... </p>
        2，內部樣式表 <style type="text/css"> ...... </style>
        3，外部樣式表 <link rel="stylesheet" type="text/css" href=" "/>,
        4，瀏覽器默認

選擇器優先級

        （!important>）id選擇器>class選擇器（屬性選擇器/僞類選擇器）>標籤選擇器（僞元素選擇器）
        同類選擇符條件下層級越多的優先級越高，優先級就近原則，同權重情況下樣式定義最近者爲準，載入樣式以最後載入的定位爲準。

樣式衝突  

        1，選擇器一樣的情況下後面的會覆蓋前面的屬性。
        2，使用嵌套選擇器時：
   一組嵌套選擇器的實際特性可以計算出來。基本的，使用ID選擇器的值是100，使用class選擇器的值是10，每個html選擇器的值是1。它們加起來就可以計算出特性的值。基本上，一個選擇器越多特性，樣式衝突的時候將顯示它的樣式。

絕對定位（absolute）

        1、絕對定位就相當於你把定位的元素從文檔中摳了出來，那麼這個元素原來的位置就空了出來，可以由別的元素來佔據
        2、如果你把一個元素設置爲absolute，其他的屬性（top，left，right和bottom）不進行設置，那麼它只會被摳出來，其他元素佔據它的位置，除此之外，沒有其他任何變化。它相對的是第一個設置了定位方式（除static外）的父元素，如果所有的父元素都沒有設置那就是body元素。

相對定位

        如果一個元素被設置成了relative，它也相當於被摳了出來，但是它原來的位置不會被別的元素佔據。這是與absolute不一樣的地方。那麼我自己設置被設置爲relative的元素的top和left的值時，相對的元素就是元素自身。

box-sizing屬性

        用來控制元素的盒子模型的解析模式，默認爲content-box
        context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬
        border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

CSS選擇器

        CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標籤選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、後代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel=”external”]）、僞類選擇器（a:hover, li:nth-child）
        可繼承的屬性：font-size, font-family, color
        不可繼承的樣式：border, padding, margin, width, height

CSS3新增僞類

        p:first-of-type 選擇屬於其父元素的首個元素
        p:last-of-type 選擇屬於其父元素的最後元素
        p:only-of-type 選擇屬於其父元素唯一的元素
        p:only-child 選擇屬於其父元素的唯一子元素
        p:nth-child(2) 選擇屬於其父元素的第二個子元素
        :enabled :disabled 表單控件的禁用狀態。
        :checked 單選框或複選框被選中。

CSS3新特性

        RGBA和透明度
        background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（對長的不可分割單詞換行）word-wrap：break-word
        文字陰影：text-shadow：5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）
font-face屬性：定義自己的字體
        圓角（邊框半徑）：border-radius 屬性用於創建圓角
        邊框圖片：border-image: url(border.png) 30 30 round
        盒陰影：box-shadow: 10px 10px 5px #888888
        媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會採用不同的屬性

CSS3的flexbox（彈性盒佈局模型）

        該佈局模型的目的是提供一種更加高效的方式來對容器中的條目進行佈局、對齊和分配空間。
        在傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；而 inline 佈局則是在水平方向來排列。
        彈性盒佈局並沒有這樣內在的方向限制，可以由開發人員自由操作。

常見的兼容性問題

        1、不同瀏覽器的標籤默認的margin和padding不一樣。*{margin:0;padding:0;}
        2、IE6雙邊距bug：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設置的大。 display:inline;將其轉化爲行內屬性。
        3、漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接  着，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
      4、設置較小高度標籤（一般小於10px），在IE6，IE7中高度超出自己設置高度。hack：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
        5、IE下，可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。
        6、Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
        7、超鏈接訪問過後hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

CSS裏的visibility屬性

        當一個元素的visibility屬性被設置成collapse值後，對於一般的元素，它的表現跟hidden是一樣的。
        chrome中，使用collapse值和使用hidden沒有區別。
        firefox，opera和IE，使用collapse值和使用display：none沒有什麼區別。
        display：none 不顯示對應的元素，在文檔佈局中不再分配空間（迴流+重繪）
        visibility：hidden 隱藏對應元素，在文檔佈局中仍保留原來的空間（重繪）

position跟display、overflow、float這些特性相互疊加後

        display屬性規定元素應該生成的框的類型；position屬性規定元素的定位類型；float屬性是一種佈局方式，定義元素在哪個方向浮動。
        類似於優先級機制：position：absolute/fixed優先級最高，有他們在時，float不起作用，display值需要調整。float 或者absolute定位的元素，只能是塊元素或表格。

移動端的佈局的媒體查詢

        通過媒體查詢可以爲不同大小和尺寸的媒體定義不同的css，適應相應的設備的顯示。
        <head>裏邊<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
        CSS : @media only screen and (max-device-width:480px) {/css樣式/}

瀏覽器是怎樣解析CSS選擇器

        CSS選擇器的解析是從右向左解析的。若從右向左匹配，先找到所有的最右節點，對於每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。兩種匹配規則的性能差別很大，是因爲從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的性能都浪費在了失敗的查找上面。
        而在 CSS 解析完畢後，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。
在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要爲每個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來確定生成怎樣的 Render Tree。

響應式設計

        響應式網站設計(Responsive Web design)是一個網站能夠兼容多個終端，而不是爲每一個終端做一個特定的版本。
        基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。
        頁面頭部必須有meta聲明的viewport。
<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

 ::before 和 :after中雙冒號和單冒號有什麼區別

        單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。
        ::before就是以一個子元素的存在，定義在元素主體內容之前的一個僞元素。並不存在於dom之中，只存在在頁面之中。

怎麼讓Chrome支持小於12px 的文字

        p{
            font-size:10px;
            -webkit-transform:scale(0.8);  //0.8是縮放比例
        } 

讓頁面裏的字體變清晰，變細

        -webkit-font-smoothing：antialiased //最佳的，灰度平滑。在window系統不起作用，但是在IOS設備上起作用

 li與li之間有看不見的空白間隔

        行框的排列會受到中間空白（回車空格）等的影響，因爲空格也屬於字符,這些空白也會被應用樣式，佔據空間，所以會有間隔，把字符大小設爲0，就沒有空格了。
        解決方法：
                可以將<li>代碼全部寫在一排
                浮動li中float：left
                在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
    

png、jpg、gif 這些圖片格式

        png是便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式.優點是：壓縮比高，色彩好。 大多數地方都可以用。
        jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。
        gif是一種位圖文件格式，以8位色重現真色彩的圖像。可以實現動畫效果.
        webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，兼容性不好，目前谷歌和opera支持。

CSS Sprites

      將一個頁面涉及到的所有圖片都包含到一張大圖中去，然後利用CSS的 background-image，background- repeat，background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能；CSS Sprites能減少圖片的字節。

塊級元素特點：

       1、 總是以一個塊的形式表現出來，佔領一整行。若干同級塊元素會從上之下依次排列（使用float屬性除外）。
       2、 可以設置高度、寬度、各個方向外補丁（margin）以及各個方向的內補丁（padding）。
       3、 當寬度（width）缺省時，它的寬度時其容器的100%，除非我們給它設定了固定的寬度。
       4、 塊級元素中可以容納其他塊級元素或行內元素。
       5、 常見的塊級元素由<p><div><h1><li>等等。
        6、塊級元素的display屬性值默認爲block。

行內元素特點：

        1、它不會單獨佔據一整行，而是隻佔領自身的寬度和高度所在的空間。若干同級行內元素會從左到右（即某個行內元素可以和其他行內元素共處一行），從上到下依次排列。
        2、行內元素不可以設置高度、寬度，其高度一般由其字體的大小來決定，其寬度由內容的長度控制。
        3、行內元素只能設置左右的margin值和左右的padding值，而不能設置上下的margin值和上下的padding值。因此我們可以通過設置左右的padding值來改變行內元素的寬度。
        4、常見的行內元素由<a><em><img>等等。
        5、行內元素一般不可以包含塊級元素。

        6、行內元素的display屬性值默認爲inline。

CSS隱藏元素的幾種方法

    Opacity:元素本身依然佔據它自己的位置並對網頁的佈局起作用。它也將響應用戶交互;
    Visibility:與 opacity 唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;
    Display:display 設爲 none 任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;

    Position:不會影響佈局，能讓元素保持可以操作;

頁面導入樣式時，使用link和@import有什麼區別？

    link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用於加載CSS;
    頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
    import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

CSS的盒子模型？

    IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;
    盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).