json，fastjson，Jackson，Gson區別對比

阿新 • • 發佈：2022-03-25

前端-CSS

HTML + CSS + JavaScript
結構+表現+互動

1、介紹CSS

CSS是什麼
- CSS怎麼用(快速入門)
- CSS選擇器(重點 +難點)
- 美化網頁(文字，陰影，超連結,列表.漸變...）
- 盒子模型
- 浮動
- 定位
- 網頁動畫(特效效果)

1.1、什麼是CSS

Cascading Style Sheet層疊級聯樣式表

CSS :表現(美化網頁)
- 字型，顏色，邊距，高度,寬度，背景圖片，網頁定位，網頁浮動...

1.2、發展史

CSS1.0
CSS2.0 DIV (塊) + CSS, HTML與CSS結構分離的思想，網頁變得簡單, SEO.
CSS2.1 浮動，定位
CSS3.0 圓角，陰影，動畫...瀏覽器相容性~

1.3、快速入門

基礎入門

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--規範，<style>可以編寫css的程式碼，每一個宣告，最好使用分號結尾
    語法：
        選擇器{
            屬性1:屬性值;
            屬性2:屬性值;
            屬性3:屬性值;
            ...
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>我是標題</h1>
</body>
</html>

css的優勢:
1、內容和表現分離
2、網頁結構表現統一，可以實現複用
3、樣式十分的豐富
4、建議使用獨立於html的css檔案
5、利用SEO,容易被搜尋引擎收錄!

1.4、CSS的三種匯入方式

程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--內部樣式-->
    <style>
        h1{
            color: green;
        }
    </style>
    <!--外部樣式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!--優先順序:就近原則，從上往下覆蓋-->

    <!--行內樣式:在標籤元素中,編寫一個style屬性,編寫樣式即可-->
<h1 style="color: red">我是標題</h1>

</body>
</html>

拓展:外部樣式兩種寫法

連結式（css3.0強烈推薦）:

<style>
	<link rel="stylesheet" href="css/style.css">
</style>

匯入式（css2.1特有的，現已廢棄，大型專案不建議使用）:
```
<style>
	@import ur1("css/style.css");
</style>
```

2、選擇器

作用:選擇頁面上的某一個或者某一類元素

2.1、基本選擇器

1、標籤選擇器
2、類選擇器 class
3、ld選擇器

優先順序：不遵循就近原則，固定的
id選擇器>class選擇器>標籤選擇器

標籤選擇器程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標籤選擇器</title>

    <style>
        /*標籤選擇器，會選擇到頁面上所有的這個標籤的元素
        如果需要同時設定多個標籤，用英文狀態下的逗號隔開
        */
        h1{
            color: red;/*字型顏色*/
            background: green;/*背景顏色*/
            border-radius: 15px;/*圓角邊框*/
        }
        p{
            font-size: 26px;/*字型大小*/
            text-align: center;/*文字居中*/
        }
    </style>
</head>
<body>

<h1>學Java</h1>
<p>學前端</p>

</body>
</html>

類選擇器程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>類選擇器</title>

    <style>
        /*
        類選擇器的格式   .class的名稱{}
        好處，可以多個標籤歸類，是同一個class，可以複用
        */
        .biaotiyi{
            text-align: center;
            color: pink;
        }
        .biaotier{
            color: blue;
        }
    </style>
</head>
<body>

<h1 class="biaotiyi">標題1</h1>
<h1 class="biaotier">標題2</h1>
<h1 class="biaotiyi">標題3</h1>

</body>
</html>

ld選擇器程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id選擇器</title>

    <style>
        /*id選擇器：id必須保證全域性唯一!
            #id名稱{}
            優先順序：不遵循就近原則，固定的
                id選擇器>class選擇器>標籤選擇器
        */
        #biaotiyi{
            color: pink;
        }
        .biaotier{
            color: blue;
        }

    </style>
</head>
<body>
<h1 id="biaotiyi">標題一</h1>
<h1 class="biaotier">標題二</h1>
<h1 class="biaotier">標題三</h1>
<h1>標題四</h1>
<h1>標題五</h1>
</body>
</html>

2.2、層次選擇器

1、後代選擇器：在某個元素的後面祖爺爺爺爺爸爸你
2、子選擇器：只有一代--> 爸爸兒子
3、相鄰兄弟選擇器：同輩
4、通用選擇器

後代選擇器程式碼演示

/*後代選擇器*/
body p{
    background: red;
}

子選擇器程式碼演示

/*子選擇器*/
body>p{
    background: blue;
}

兄弟選擇器程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
    /*兄弟選擇器,只對下生效*/
    .p1 + p{
        background-color: brown;
    }
    /*執行後只有p2的背景顏色為brown，p0的背景顏色沒有變化*/
    </style>
</head>
<body>
<p>p0</p>
<p class="p1">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

通用選擇器程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
    /*通用選擇器,當前選中元素的向下的所有兄弟元素*/
    .p1~p{
        background-color: green;
    }
    /*執行後有只有p2,p3,p7的背景顏色為green*/
    </style>
</head>
<body>
<p>p0</p>
<p class="p1">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>
</body>
</html>

2.3、結構偽類選擇器

程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*ul第一個子元素*/
        ul li:first-child{
            background-color: green;
        }
        /*ul最後一個子元素*/
        ul li:last-child{
            background-color: aqua;
        }

        /* 只選中p1
        選擇當前p元素的父級元素，選中父級元素的第一個,並且是當前元素才生效!
        */
        p:nth-child(1){
            background-color: blueviolet;
        }

        /*型別選擇，選中父元素，下的元素的第二個，型別*/
        p:nth-of-type(2) {
            background: yellow;
        }

        /*偽類動作，滑鼠放上去，背景顏色會變紅*/
		/*a:hover{
            background-color: red;
        }*/
    </style>
</head>
<body>
<a href="">123</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
<p>p7</p>
</body>
</html>

2.4、屬性選擇器（常用）

程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background-color: blue;
      text-align: center;
      color: azure;
      text-decoration: none;
      margin-right: 6px;
      line-height: 50px;
      font-size: 20px;
    }

    /*屬性名，屬性名 = 屬性值(正則)
    =   絕對等於
    *=  包含這個元素
    ^=  以這個開頭
    $=  以這個結尾
    */

    /*存在id屬性的元素   標籤[]{}*/
      
    /*選中a標籤存在id屬性的元素*/
/*    a[id]{background-color: chartreuse;
    }*/
      
    /*選中a標籤存在id=first的元素*/
/*    a[id=first]{background-color: yellow;
    }*/
      
    /*選中a標籤存在class中有links的元素*/
/*    a[class*="links"]{
      background-color: darkolivegreen;
    }*/
      
    /*選中href中以http開頭的元素,利用正則表示式*/
    a[href^=http]{
      background-color: fuchsia;
    }


  </style>
</head>
<body>

<p class="demo">
  <a href="https://www/baidu.com" class="links item first" id="first">1</a>
  <a href="#" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png" class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/abc.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.boc" class="links item last">10</a>
</p>
</body>
</html>

3、美化網頁元素

3.1、為什麼要美化網頁

1、有效的傳遞頁面資訊
2、美化網頁,頁面漂亮，才能吸引使用者
3、凸顯頁面的主題
4、提高使用者的體驗

span標籤:重點要突出的字，使用span套起來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
歡迎學習<span id="title1">Java</span>
</body>
</html>

3.2、字型樣式

值	描述
font-style	規定字型樣式。
font-variant	規定字型異體。
font-weight	規定字型粗細。
font-size/line-height	規定字型尺寸和行高。
font-family	規定字體系列。

程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字型樣式</title>
    <!--
    font-family:體
    font-size:字型大小
    font-weight:字型粗細
    color:字型顏色
    -->
    <style>
        body {
            font-family: 楷體;
            color: chocolate;
        }
        h1 {
            font-size: 50px;
        }
        .p1 {
            font-weight: bold;
        }
        .p2 {
            font: italic bold 18px 宋體;
        }
    </style>
</head>
<body>
<h1>萬古神帝</h1>
<p class="p1">八百年前，明帝之子張若塵，16歲時被未婚妻池瑤公主殺死，一代天驕，就此隕落。</p>
<p class="p2">八百年後，張若塵重新活了過來，卻發現曾經殺死他的未婚妻，已經統一崑崙界，開闢第一中央帝國，號稱“池瑤女皇”。</p>
<p>池瑤女皇——統御天下，威臨八方；青春永駐，不死不滅。</p>
<p>張若塵站在諸皇祠堂外，望著池瑤女皇的神像，心中燃燒起熊熊的仇恨烈焰，“待我重修十三年，敢叫女皇下黃泉”。</p>
</body>
</html>

3.3、文字樣式

1、顏色 color,rgb,rgba

2、文字對齊的方式 text-align

3、首行縮排 text-indent

4、行高 line-height

5、裝飾 text-decoration

6、文字圖片水平對齊: vertical-align: middle;

/*超連結去下劃線*/
a{
	text-decoration: none;
}

程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    顏色：
        單詞
        RGB     0~F
        RGBA    A:0~1

    line-height:行高
    當行高，和塊的高度一致， 就可以上下居中
    -->
    <style>
        h1 {
            /*color: brown;*/
            color: rgba(0,255,255,0.7);/*rgba的a指的是透明度（透明度範圍在0~1）*/
            text-align: center;/*text-align：center;文字排版居中*/
        }
        .p1 {
            text-indent: 2em;/*首行縮排2箇中文字元（一個em表示一個字元）*/
        }
        .p2 {
            text-decoration: underline;/*下劃線*/
        }
        .p3 {
            background-color: bisque;
            text-decoration: line-through;/*中劃線*/
        }
        .p4 {
            text-decoration: overline;/*上劃線*/
        }
    </style>
</head>
<body>
<h1>萬古神帝</h1>
<p class="p1">八百年前，明帝之子張若塵，16歲時被未婚妻池瑤公主殺死，一代天驕，就此隕落。</p>
<p class="p2">八百年後，張若塵重新活了過來，卻發現曾經殺死他的未婚妻，已經統一崑崙界，開闢第一中央帝國，號稱“池瑤女皇”。</p>
<p class="p3">池瑤女皇——統御天下，威臨八方；青春永駐，不死不滅。</p>
<p class="p4">張若塵站在諸皇祠堂外，望著池瑤女皇的神像，心中燃燒起熊熊的仇恨烈焰，“待我重修十三年，敢叫女皇下黃泉”。</p>
</body>
</html>

程式碼演示文字在圖片在中間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    < !--
    水平對齊參照物,    a,b
    -->
    <style>
        img,span {
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p>
    <img src= ”images/a.png" alt="">
    <span>asdasdajsldjalksdjalksd</span>
</p>
</body>
</html>

3.4、超連結偽類

程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*預設的顏色*/
        a {
            text-decoration: none;
            color: black;
        }
        /*滑鼠懸浮的狀態*/
        a:hover {
            color: orange;
        }
        /*滑鼠按住未釋放的狀態*/
        a:active {
            color: green;
        }
        /*text-shadow:水平偏移，垂直偏移，陰影半徑，陰影顏色
        這裡的偏移全為正數在第四象限
        */
        #price {
            text-shadow: 10px 10px 2px skyblue;
        }
    </style>
</head>
<body>
<a href="#">
    <img src= " images/a.jpg" alt="">
</a>
<p>
    <a href= "#">碼出高效: Java開發手冊</a>
</p>
<p>
    <a href="#">作者: 孤盡老師</a>
</p>
<p id="price">
    ￥99
</p>

</body>
</html>

3.5、文字陰影

text-shadow:水平偏移，垂直偏移，陰影半徑，陰影顏色
注意：這裡的偏移全為正數在第四象限

text-shadow: 10px 10px 2px skyblue;

3.6、列表

ul-li

程式碼演示

html程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表樣式</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分類</h2>
    <ul>
        <li><a href="#">圖書</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">數字商品</a></li>
        <li><a href="#">家用電器</a>&nbsp;&nbsp;<a href="#">手機</a>&nbsp;&nbsp;<a href="#">數碼</a></li>
        <li><a href="#">電腦</a>&nbsp;&nbsp;<a href="#">辦公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家裝</a>&nbsp;&nbsp;<a href="#" >廚具</a></li>
        <li><a href="#">服飾鞋帽</a>&nbsp;&nbsp;<a href="#" >個護化妝</a></li>
        <li><a href="#">禮品箱包</a>&nbsp;&nbsp;<a href="#" >鐘錶</a>&nbsp;&nbsp;<a href="#">珠寶</a></li>
        <li><a href="#">食品飲料</a>&nbsp;&nbsp;<a href="#" >保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#" >旅行</a>&nbsp;&nbsp;<a href="#" >充值</a>&nbsp;&nbsp;<a href="#">票務</a>
        </li>
    </ul>
</div>
</body>
</html>

css程式碼

#nav {
    width: 300px;
    background-color: darkgray;
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background-color: red;
}

/*ul li*/
/*
list-style:
    none        去掉原點
    circle      空心圓
    decimal     數字
    square      正方形
*/
ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a {
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover {
    color: orange;
    text-decoration: underline;
}

3.7、背景

背景顏色------background-color;
背景圖片------background-image: url("圖片路徑");

圖片定位：
```
background-position :Xpx Ypx;
```
圖片平鋪效果：
- background-repeat: no-repeat;------不平鋪
- background-repeat: repeat;-----------平鋪（預設）
- background-repeat: repeat-x;---------沿X軸平鋪
- background-repeat: repeat-y;---------沿y軸平鋪
用一行程式碼寫全部的樣式

background: 顏色, 圖片, 圖片位置, 平鋪方式;

像這樣：background: red url(".. /images/d.gif") 270px 10px no-repeat ;

div {
    background-image: url("");
	background-repeat: no-repeat;
}

3.8、漸變

background-color: #FFFFFF;
background-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%, #FF0000 100%);

4、盒子模型

div

4.1、什麼是盒子模型

margin:外邊距

border:邊框

padding:內邊距

4.2、邊框

border

1、邊框的粗細

2、邊框的樣式

3、邊框的顏色

4.3、外邊距

margin（遵循順時針方向）

margin: 100px;/*表示上右下左外邊距各100畫素，順時針方向*/
margin: 100px 200px;/*表示上下外邊距為100畫素，左右外邊距為200畫素*/
margin: 100px 200px 300px;/*表示上外邊距為100畫素，左右外邊距為200畫素，下外邊距為300畫素*/
margin: 100px 200px 300px 400px;
/*表示上外邊距為100畫素，右外邊距為200畫素，下外邊距為300畫素，左外邊距為400畫素，順時針方向*/

4.4、內邊距

padding

同外邊距類似，就是換了個單詞的意思

思考：盒子的計算方式:你這個元素到底多大?

margin + border + padding +內容寬度

程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {/*  *號表示萬用字元，全域性的概念  */
            margin: 0px;
            padding: 0px;
            text-decoration: none;
        }
        /*border:粗細，樣式，顏色*/
        #box {
            width: 300px;
            border: 1px solid red;
            margin: 300px auto 0px;/*上外邊距為300，左右居中達到居中效果，下邊距為0*/
        }

        h2 {
            font-size: 16px;
            background-color: green;
            line-height: 40px;
            text-align: center;
        }

        form {
            background-color: orange;
            padding-left: 30px;
        }

        #box div {
            padding-top: 10px;
        }

        div:nth-of-type(1)>input{
            border: 2px solid black;
        }

        div:nth-of-type(2)>span{

        }
        div:nth-of-type(2)>input{
            border: 2px solid black;
        }
    </style>

</head>
<body>

<div id="box">
    <h2>會員登入</h2>
    <form action="#">
        <div>
            <span>使用者名稱：</span>
            <input type="text">
        </div>
        <div>
            <span>密&emsp;碼：</span>
            <input type="password">
        </div>
    </form>
</div>
</body>
</html>

4.5、圓角邊框

border-radius

依舊遵循順時針旋轉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    左上  右上  右下  左下，順時針方向

        圓圈: 圓角=半徑+邊距

    -->
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 100px;
        }
    </style>
</head>
<body>

<div></div>
</body>
</html>

4.6、盒子陰影

box-shadow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 1px yellow;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

5、浮動

5.1、標準文件流

塊級元素：獨佔一行

塊級元素有：
body  from  select  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  cnter  div

行內元素：不獨佔一行

行內元素有：heda  meat  title  lable  span  br  a  style  em  b  i  strong

行內元素可以被包含在塊級元素中，反之，則不可以~

行內塊元素

行內塊元素常見的有： img  input  td

5.2、display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--display的屬性值
    block   塊元素
    inline  行內元素
    inline-block    行內塊元素
    none    消失
    -->

    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: block;/*block變成塊元素，就有了高度，行內元素是沒有高度的，只有寬度*/
        }
    </style>
</head>
<body>

<div>div塊元素</div>
<span>span行內元素</span>
</body>
</html>

這個也是一種實現行內元素排列的方式,但是我們很多情況都是用float

5.3、float

左浮動：float:left;

右浮動：float:right;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            margin:10px;
            padding:5px;
        }
        #father {
            border:1px #000 solid;
        }
        .layer01 {
            border:1px #F00 dashed;
            display: inline-block;/*變成行內塊元素*/
            float: left;/*左浮動*/
        }
        .layer02 {
            border: 1px #00F dashed;
            display: inline-block;
            float: left;
        }
        .layer03 {
            border:1px #060 dashed;
            display: inline-block;
            float: right;/*右浮動*/
        }
        .layer04 {
            border:1px #666 dashed;
            font-size:12px;
            line-height:23px;
            display: inline-block;
            float: right;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer02"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer03"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer04">
        浮動的盒子可以向左浮動，也可以向右浮動，直到它的外邊緣碰到包含框或另一個浮動盒子為止。
    </div>
</div>
</body>
</html>

當我們設定了浮動，會發現一個問題，那就是父級div盒子塌陷了。

5.4、父級邊框塌陷的問題

clear:right; 右側不允許有浮動元素
clear:left; 左側不允許有浮動元素
clear:both;兩側不允許有浮動元素
clear:none;

解決方案:

1、增加父級元素的高度~

#father {
    border:1px #000 solid;
    height: 500px;
}

2、增加一個空的div標籤，清除浮動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            margin:10px;
            padding:5px;
        }
        #father {
            border:1px #000 solid;
        }
        .layer01 {
            border:1px #F00 dashed;
            display: inline-block;/*變成行內塊元素*/
            float: left;/*左浮動*/
        }
        .layer02 {
            border: 1px #00F dashed;
            display: inline-block;
            float: left;
        }
        .layer03 {
            border:1px #060 dashed;
            display: inline-block;
            float: right;/*右浮動*/
        }
        .layer04 {
            border:1px #666 dashed;
            font-size:12px;
            line-height:23px;
            display: inline-block;
            float: right;
            clear: both;
        }
        .clear {
            clear: both;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="father">   
    <div class="layer01"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer02"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer03"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer04">
        浮動的盒子可以向左浮動，也可以向右浮動，直到它的外邊緣碰到包含框或另一個浮動盒子為止。
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

3、溢位overflow

在父級元素中增加一個overflow: hidden;

overflow: hidden;/*隱藏*/
overflow: scroll;/*出現滾動條*/

程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            margin:10px;
            padding:5px;
        }
        #father {
            border:1px #000 solid;
            overflow: hidden;/*溢位：隱藏*/
        }
        .layer01 {
            border:1px #F00 dashed;
            display: inline-block;/*變成行內塊元素*/
            float: left;/*左浮動*/
        }
        .layer02 {
            border: 1px #00F dashed;
            display: inline-block;
            float: left;
        }
        .layer03 {
            border:1px #060 dashed;
            display: inline-block;
            float: right;/*右浮動*/
        }
        .layer04 {
            border:1px #666 dashed;
            font-size:12px;
            line-height:23px;
            display: inline-block;
            float: right;
            clear: both;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer02"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer03"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer04">
        浮動的盒子可以向左浮動，也可以向右浮動，直到它的外邊緣碰到包含框或另一個浮動盒子為止。
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

4、父類新增一個偽類: after

 #father {
	border:1px #000 solid;
}
#father:after {/*新增一個偽類盒子*/
 	content: '';
	display: block;
	clear: both;
}

程式碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            margin:10px;
            padding:5px;
        }
        #father {
            border:1px #000 solid;
        }
        #father:after {/*新增一個偽類盒子*/
            content: '';
            display: block;
            clear: both;
        }
        .layer01 {
            border:1px #F00 dashed;
            display: inline-block;/*變成行內塊元素*/
            float: left;/*左浮動*/
        }
        .layer02 {
            border: 1px #00F dashed;
            display: inline-block;
            float: left;
        }
        .layer03 {
            border:1px #060 dashed;
            display: inline-block;
            float: right;/*右浮動*/
        }
        .layer04 {
            border:1px #666 dashed;
            font-size:12px;
            line-height:23px;
            display: inline-block;
            float: right;
            clear: both;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer02"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer03"><img src="../image/009.jpg" alt=""/></div>
    <div class="layer04">
        浮動的盒子可以向左浮動，也可以向右浮動，直到它的外邊緣碰到包含框或另一個浮動盒子為止。
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

小結:

1.浮動元素後面增加空div

簡單，程式碼中儘量避免空div
2.設定父元素的高度

簡單，元素假設有了固定的高度，就會被限制

3.overflow

簡單，下拉的一些場景避免使用

4.父類新增一個偽類: after (推薦)
寫法稍微複雜一-點，但是沒有副作用，推薦使用.

5.5、對比

display

方向不可以控制
float

浮動起來的話會脫離標準文件流，所以要解決父級邊框塌陷的問題~

6、定位

6.1、相對定位

position: relative;

相對於原來的位置，進行指定的偏移。
相對定位的話，它仍然在標準文件流中，原來的位置會被保留（人走了魂還在）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相對定位</title>
    <!--相對定位
        相對於自己原來的位置進行偏移
    -->
    <style>
        body {
            padding: 20px;
        }
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father {
            border: 1px solid red;
            padding: 0px;
        }
        #first {
            background-color: blue;
            border: 1px dashed blue;
            position: relative;/*相對定位：上下左右*/
            top: -20px;/*相對於原來的位置向上平移20畫素*/
            left: 20px;/*相對於原來的位置向右平移20畫素*/
        }
        #second {
            background-color: orange;
            border: 1px dashed orange;
        }
        #third {
            background-color: green;
            border: 1px dashed green;
            position: relative;
            bottom: 15px;/*相對於原來的位置向上平移15畫素*/
            right: 15px;/*相對於原來的位置向左平移15畫素*/
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一個盒子</div>
    <div id="second">第二個盒子</div>
    <div id="third">第三個盒子</div>
</div>
</body>
</html>

小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>練習</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a {
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover {
            background-color: blue;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5 {
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
 <div id="box">
    <a class="a1" href="#">連結1</a>
    <a class="a2" href="#">連結2</a>
    <a class="a3" href="#">連結3</a>
    <a class="a4" href="#">連結4</a>
    <a class="a5" href= #">連結5</a>
 </div>
</body>
</html>

6.2、絕對定位

定位:基於xxx定位，上下左右~

子絕父相

1、沒有父級元素定位的前提下，相對於瀏覽器定位

2、假設父級元素存在定位,我們通常會相對於父級元素進行偏移

3、在父級元素範圍內移動

相對於父級或瀏覽器的位置，進行指定的偏移,絕對定位的話，它不在在標準文件流中，原來的位置不會被保留

（人走魂沒）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>絕對定位</title>
    <style>
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father {
            border: 1px solid red;
            padding: 0px;
            position: relative;
        }
        #first {
            background-color: blue;
            border: 1px dashed blue;
        }
        #second {
            background-color: orange;
            border: 1px dashed orange;
            position: absolute;
            right: 20px;
        }
        #third {
            background-color: green;
            border: 1px dashed green;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一個盒子</div>
    <div id="second">第二個盒子</div>
    <div id="third">第三個盒子</div>
</div>
</body>
</html>

6.3、固定定位fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body {
            height: 1000px;
        }
        div:nth-of-type(1) {/*絕對定位:相對於瀏覽器*/
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
        div:nth-of-type(2) {/*固定定位*/
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: fixed;
            right: 0px;
            bottom: 0px;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4、z-index

圖層~

z-index:預設是0，最高無限~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style>
        #content {
            width: 199px;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px solid black;
        }
        ul,li {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        #content ul {
            position: relative;
        }
        .tipText,.tipBg {
            position: absolute;
            width: 199px;
            height: 25px;
            bottom: 53px;
            right: -175px;
        }
        .tipText {
            color: white;
           /* z-index: 999;*//*數值越大，層級越高*/
        }
        .tipBg {
            background-color: black;
            opacity: 0.5;/*opacity背景透明度*/
           /* filter: alpha(opacity=50);*//*IE8瀏覽器或更早版本使用*/
        }
    </style>
</head>
<body>
<div id="content">
    <ul>
        <li><img src="image/009.jpg" alt=""><>
        <li class="tipText">你好</li>
        <li class="tipBg"></li>
        <li>時間：2099-12-31</li>
        <li>地點：月球一號基地</li>
    </ul>
</div>
</body>
</html>