什麼是CSS？控制頁面樣式的，通常放在HTML的head標籤內使用

CSS結構
選擇器 {css樣式}
css樣式：{屬性:值,屬性:值,屬性:值}

CSS的引入方式有3種：一般都是在html種的head標籤內加css樣式
1.style標籤內部直接寫css樣式
  <style>
    h1 {
        color:burlywood;
   }
  </style>
2.通過link標籤引入外部的css檔案(最正規的方式)
  <link rel="stylesheet" href="csstest.css"> href後面引入的是css檔案的全路徑
3.html標籤內直接加，一般不用這種方式
  <h1 style="color: green">老闆好，今天哪個隊贏啦</h1>
  
  
一.CSS選擇器語法
選擇器
基本選擇器：
1.id選擇器 #id值 {樣式;} 表示所有這個id值的標籤都會使用這個樣式
2.類選擇器 .class值 {樣式} 表示所有這個class值的標籤都會使用這個樣式
3.元素/標籤選擇器 元素{樣式} 表示所有這個元素的標籤都會使用這個樣式
4.通用選擇器 *{樣式}

組合選擇器：
1.後代選擇器：div span {樣式}
2.兒子選擇器：div>span {樣式}
3.毗鄰選擇器：div+span {樣式} 同級別緊挨著的下面第一個span
4.弟弟選擇器：div~span {樣式} 同級別下面所有的span

屬性選擇器
1.查詢含有某個屬性的標籤：[username]{樣式}
2.查詢含有某個屬性並且有某個值的標籤：[username='值']{樣式}
3.查詢含有某個屬性並且有某個值的某個標籤：標籤名[username='值']{樣式}

分組選擇器&巢狀選擇器
1.標籤1,標籤2,標籤3 {樣式}：表示把標籤1-3改成xxx樣式
2.多個選擇器用逗號隔開 {樣式}：表示分貝把選擇器指定條件的標籤修改樣式

偽型別選擇器
    a:hover {
        color: aqua;
    }

    a:active {
        color: black;
    }

    a:visited {
        color: darkgray;
    }

    input:focus {
    background-color: red;
    }

偽元素選擇器
    p:before {
        content:'在前面新增文字且不能選中';
        color: blue;
    }

    p:after {
        content:'在後面新增文字';
        color: orange;
    }

選擇器優先順序:最常見的有以下幾個
1選擇器相同，選擇器的順序不同的時候：誰距離標籤更近 就按照誰的樣式
2選擇器不同時優先順序：行內>id選擇器>類選擇器>標籤選擇器

二.CSS屬性
基本屬性
height：xxpx;   設定長
width：10px;    設定寬
總結：行內標籤不能設定長寬

浮動屬性(非常重要)
    1.浮動有什麼用？做佈局規劃用，例如小米官網等等
    2.如何使用？
      float:left;向左
      float:right;向右
      總結：只要是涉及到頁面的佈局，一般都是用浮動來提前規劃好佈局
    3.浮動有哪些影響如何解決？
      會造成負標籤塌陷問題,如何解決？
      提前寫好處理浮動塌陷的css程式碼，如下，如果誰塌陷 就給加一個 class="clearfix" 即可
      .clearfix:after {
        content: '';
        display: block;
        clear: both;
        }

溢位屬性(常用的有以下2個)
overflow:hidden;  超出區域的文字不展示
overflow:scroll;  設定成上下滾動條形式

字型的屬性設定
    color:顏色;          設定顏色
    color:rgba(xx,xx,xx,xx); 第4個引數是透明度，範圍 0-1
    font-family:字型;    設定字型
    font-szie:16px;     字型大小
    font-weight:bolder; 字型加粗

文字屬性
    text-align:center             居中/左對齊/右對齊
    text-decoration:none          給a標籤去掉下劃線(必會)

背景圖片屬性
    backgroud-image：url(圖片路徑);  預設全部鋪滿
    backgroud-repeat:no-repeat; 不平鋪
    backgroud-repeat:repeat-x; x軸平鋪
    backgroud-repeat:repeat-y; y軸平鋪
    backgroud-position:center center; 第1個左 第2個上
    總結：如果出現多個屬性名字首一樣的情況，一般情況下可以簡寫，只寫字首

邊框屬性
    border-color:邊框顏色;
    border-style:solid;邊框
    border-width：5px;邊框大小
    border-radius:50%;畫圓(必須記住)，直接寫50% ，長寬一致就是圓

    display屬性---屬性對應的值的作用
        display:none; 隱藏標籤不展示到前端頁面，原來的位置也釋放，但是存在
        inline：將標籤設定為行內標籤的特點(一行顯示)
        biock：將標籤設定成塊級標籤的特點(獨佔一行且能設定長寬)
        inline-block:一行且能設定長寬
    visiblty:hidden  單純隱藏但是位置還在
三.其他
盒子模型
    標籤與標籤之間的距離：margin-上/下/左/右
        margin:0; 表示上下左右全是0px
        margin：10px 20px; 第1個表示上下 第2個表示左右
        margin：10px 20px 30px; 第1個表示上 第2個表示左右 第3個表示下
        margin：10px 20px 30px 40x; 表示上 右 下 左
        margin：0 auto; 標籤水平居中
    標籤套標籤的距離：padding(或者調整裡面文字到邊框的距離)
        padding-left:左
        padding-right:右
        padding-top:上
        pading-bottom:下
        用法同上面的margin
    總結：瀏覽器會自帶8px的 margin，一般情況下在寫頁面的時候，上來先把body的margin去除

定位(包含以下幾種)
靜態：所有的標籤預設都是靜態的->position:static，無法改變位置
相對定位：相對於標籤原來的位置做移動--->relative
    position: relative; 相對定位，position預設是static，需要改成relative才能是定位過的，才會移動
絕對定位(常用)：相對與已經定位過的父標籤做移動，如果沒有父標籤就以body為參照
    例如：小米網站的購物車
    position: absolute;

固定定位(常用)：相對於瀏覽器視窗固定在某個位置來做移動
    例如：小米網站右側固定的幾個標籤，再比如進某網站的人工服務等
    position: fixed;其他全部參照瀏覽器視窗

z-index模態框
    例如百度登入頁面：其實是三層結構
    1 最底層是正常內容
    2 中間層黑色的透明區
    3 最上層白色是註冊區
    z-index: 99;模框大小