前端基礎(chǔ) 02、CSS3 入門

一斗锭、什么是 CSS

1. CSS

Cascading Style Sheet 層疊樣式表地淀。
CSS：表現(xiàn)（美化網(wǎng)頁）。
- 字體岖是、顏色帮毁、邊距、高度豺撑、寬度烈疚、背景圖片、網(wǎng)頁定位聪轿、網(wǎng)頁浮動...

2. CSS 發(fā)展史

CSS 1.0：1994年10月提出爷肝；
CSS 2.0：DIV（塊）+ CSS，HTML與 CSS 結(jié)構(gòu)分離的思想陆错，網(wǎng)頁變得簡單灯抛，SEO；
CSS 2.1：浮動音瓷，定位对嚼；
CSS 3.0：圓角、陰影绳慎、動畫…瀏覽器兼容性纵竖。

3. 快速入門

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3快速入門</title>
    <!-- 規(guī)范：<style>可以編寫 CSS 的代碼，每一個聲明最好以“;”結(jié)尾
    語法:
        選擇器{
              聲明1;
              聲明2;
              聲明3;
        }
    -->
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
<h1>CSS樣式 h1標(biāo)題</h1>
</body>
</html>

建議使用這種規(guī)范（單獨寫一個 css 文件杏愤，用 link 標(biāo)簽引入 css 文件效果）靡砌。

CSS 的優(yōu)勢：

內(nèi)容和表現(xiàn)分離；
網(wǎng)頁結(jié)構(gòu)表現(xiàn)統(tǒng)一声邦，可以實現(xiàn)復(fù)用乏奥；
樣式十分的豐富摆舟；
建議使用獨立于 html 的 css 文件亥曹；
利用 SEO，容易被搜索引擎收錄恨诱！

CSS 的 3 種常用導(dǎo)入方式：

行內(nèi)樣式
內(nèi)部樣式
外部樣式

優(yōu)先級：就近原則（1. 行內(nèi)樣式 2. 內(nèi)部樣式哪個離元素更近）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3快速入門</title>
    <!--3. 外部樣式-->
    <link rel="stylesheet" href="css/style.css">
    <style>
        /*2. 內(nèi)部樣式*/
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
<!--優(yōu)先級：就近原則 —— 1.行內(nèi)樣式  2.內(nèi)部樣式媳瞪，外部樣式哪個離元素更近-->
<!--1. 行內(nèi)樣式：在標(biāo)簽元素中，編寫一個style屬性照宝，編寫樣式即可-->
<h1 style="color:aquamarine">CSS3測試</h1>
</body>
</html>

拓展：外部樣式兩種方法蛇受。

鏈接式（推薦）：HTML

<!--外部樣式-->
<link rel="stylesheet" href="css/style.css">

導(dǎo)入式（不推薦使用）：@import 是 CSS 2.1 特有的。

<!--導(dǎo)入式-->
<style>
    @import url("css/style.css");
</style>

二厕鹃、CSS 選擇器（重點）

作用：選擇頁面上的某一個兢仰，或者某一類元素乍丈。

1. 基本選擇器

01、標(biāo)簽選擇器：選擇一類標(biāo)簽把将。

格式：標(biāo)簽名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標(biāo)簽選擇器</title>
    <style>
        h1 {
            color: yellow;
            background: #0eede3;
            border-radius: 8px;
        }

        h3 {
            color: #0ecbb6;
            background: #dcdada;
            border-radius: 8px;
        }

        p {
            font-size: 60px;
        }
    </style>
</head>
<body>
<h1>標(biāo)簽選擇器</h1>
<h3>前端-CSS3</h3>
<p>Android</p>
</body>
</html>

02轻专、類選擇器 class：選擇所有 class 一致的標(biāo)簽，可以跨標(biāo)簽察蹲。

格式：.類名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>類選擇器</title>
    <style>
        /*
        類選擇器的格式：.class的名稱{}
        好處：可以多個標(biāo)簽歸類,是同一個class,可以復(fù)用请垛！
         */
        .test01 {
            color: darkorange;
        }

        .test02 {
            color: cadetblue;
        }

        .test03 {
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<h1 class="test01">類選擇器：Test01</h1>
<h1 class="test02">類選擇器：Test02</h1>
<h1 class="test03">類選擇器：Test03</h1>
<p class="test03">類選擇器：Test04</p>
</body>
</html>

03、id 選擇器：全局唯一

格式：#id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id選擇器</title>
    <style>
        /*
        id 選擇器: id 必須保證全局唯一
        #id名稱{}
        不遵循就近原則,優(yōu)先級是固定的
        id 選擇器 > class類選擇器 > 標(biāo)簽選擇器
         */
        #test01 {
            color: red;
        }

        #test02 {
            color: green;
        }

        .test03 {
            color: blue;
        }

        .test01 {
            color: aquamarine;
        }

        .test02 {
            color: bisque;
        }

        h1 {
            color: yellow;
        }
    </style>
</head>
<body>
<h1 id="test01" class="test03">標(biāo)題1</h1>
<h1 id="test02" class="test01">標(biāo)題2</h1>
<h1 class="test02">標(biāo)題3</h1>
<h1>標(biāo)題4</h1>
</body>
</html>

id 選擇器優(yōu)先級：id > class > 標(biāo)簽洽议。

2. 層次選擇器

01、后代選擇器：在某個元素的后面（所有的選擇標(biāo)簽）；
```
/*后代選擇器*/
body p {
  background: deeppink;
}
```
02碳锈、子選擇器：一代（只包含下一級）缤言；
```
/*子選擇器*/
body > p {
  background: #0ecbb6;
}
```

03、相鄰的兄弟選擇器：同輩（只選擇一個审胚，相鄰且向下）荚坞；

/*相鄰兄弟選擇器：只選擇一個,相鄰向下*/
.active + p {
  background: #f1e889;
}

04、通用選擇器：當(dāng)前選中元素的向下的 所有兄弟元素菲盾。

/*通用兄弟選擇器颓影，當(dāng)前選中元素的向下的所有兄弟元素*/
.active ~ p {
  background: #ff741e;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>層次選擇器</title>
    <style>
        /*1. 后代選擇器*/
        /*body p {*/
        /*    background: red;*/
        /*}*/

        /*2. 子選擇器*/
        /*body > p {*/
        /*    background: #0ecbb6;*/
        /*}*/

        /*3. 相鄰兄弟選擇器：只選擇一個,相鄰向下*/
        /*.active + p {*/
        /*    background: #f1e889;*/
        /*}*/

        /*4. 通用兄弟選擇器，當(dāng)前選中元素的向下的所有兄弟元素*/
        .active ~ p {
            background: #ff741e;
        }
    </style>
</head>
<body>
<p>p0</p>
<p class="active">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>

3. 結(jié)構(gòu)偽類選擇器

偽類：條件

/*ul的第一個子元素*/
ul li:first-child {
    background: orange;
}

/*ul的最后一個子元素*/
    ul li:last-child {
background: darkcyan;
}

/*
  選中 p1：定位到父元素,選擇當(dāng)前的第一個元素選擇當(dāng)前p元素的父級元素懒鉴，選中父級元素的第一個诡挂，并且是當(dāng)前元素才生效！（順序临谱，會受到其它標(biāo)簽影響）
*/
p:nth-child(2) {
    background: greenyellow;
}

/*選中父元素下的第二個p元素璃俗，按類型（不會受其它標(biāo)簽影響）*/
p:nth-of-type(2) {
    background: lightseagreen;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>結(jié)構(gòu)偽類選擇器</title>
    <style>
        /*ul的第一個子元素*/
        ul li:first-child {
            background: orange;
        }

        /*ul的最后一個子元素*/
        ul li:last-child {
            background: #cc75ef;
        }

        /*
        選中 p1：定位到父元素,選擇當(dāng)前的第一個元素
            選擇當(dāng)前p元素的父級元素，選中父級元素的第一個悉默，并且是當(dāng)前元素才生效３腔怼（順序，會受到其它標(biāo)簽影響）
         */
        p:nth-child(2) {
            background: greenyellow;
        }

        /*選中父元素下的第二個p元素抄课，按類型（不會受其它標(biāo)簽影響）*/
        p:nth-of-type(2) {
            background: lightseagreen;
        }

        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="">超鏈接</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

4. 屬性選擇器（常用）

id + class 結(jié)合

屬性名唱星、屬性名 = 屬性值（正則）
- = ：絕對等于
- *= ：包含
- ^=：以...開頭
- $= ：以...結(jié)尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>
    <style>
        .demo a {
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #0ecbb6;
            text-align: center;
            color: #dcdada;
            text-decoration: none;
            margin-right: 5px;
            /*line-height: 50px;*/
            font: bold 20px/50px Arial;
        }

        /*
        屬性名、屬性名 = 屬性值（正則）
             = 表示絕對等于
             *= 表示包含
             ^= 表示以...開頭
             $= 表示以...結(jié)尾
         */
        /*存在id屬性的元素： a[]{}*/
        a[id] {
            background: yellow;
        }

        /*id=first的元素*/
        a[id=first] {
            background: greenyellow;
        }

        /*class 中有 links 的元素*/
        a[class*="links"] {
            background: #ff741e;
        }

        /*選中href中以http開頭的元素*/
        a[href^=http] {
            background: aquamarine;
        }

        /*選中href中以pdf結(jié)尾的元素*/
        a[href$=pdf] {
            background: #0553ee;
        }
    </style>
</head>
<body>
<p class="demo">
    <a  class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank " title="test">2</a>
    <a href="img/hello.html" class="links item">3</a>
    <a href="img/str1.png" class="links item">4</a>
    <a href="img/str2.jpg" class="item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/abc.pdf" class="links item">7</a>
    <a href="/quit.pdf" class="links item">8</a>
    <a href="abc.doc" class="item">9</a>
    <a href="abcd.doc" class="item last">10</a>
</p>
</body>
</html>

三跟磨、美化網(wǎng)頁

1. 為什么要美化網(wǎng)頁

有效的傳遞頁面信息间聊；
美化網(wǎng)頁，頁面漂亮才能吸引客戶抵拘；
凸顯頁面的主題哎榴；
提高用戶的體驗。

span 標(biāo)簽：重點要突出的字，使用 span 標(biāo)簽（約定俗成）套起來尚蝌。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美化網(wǎng)頁</title>
    <style>
        #title {
            font-size: 25px;
        }
    </style>
</head>
<body>
<!--span 替換成任意自定義標(biāo)簽迎变，不會影響實現(xiàn)效果，但約定一般使用 span-->
編程語言：<span id="title">Java</span>
</body>
</html>

2. 字體樣式

font-family：字體飘言；
font-size：字體大惺贤恪；
font-weight：字體粗細热凹；
color：字體顏色泵喘。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字體樣式</title>
    <style>
        body {
            font-family: "Arial Black",黑體;
            color: #0ecbb6;
        }

        h1 {
            font-size: 25px;
        }

        .p1 {
            font-weight: bolder;
            color: #ff741e;
        }
    </style>
</head>
<body>
<h1>標(biāo)題</h1>
<p>段落1</p>
<p class="p1">段落2</p>
<p>Tiger earns its stripes as folk hero and role model</p>
</body>
</html>

常用寫法：

/*也可以填px，但不能超過900,相當(dāng)于bloder */
font-weight:bolder;
/*常用寫法(oblique斜體)*/
font:oblique bloder 12px "黑體";

3. 文本樣式

顏色-> color:單詞/#十六進數(shù)/rgb() / rgba();

/*
顏色表示方式：
1. 單詞   color: orange;
2. #十六進制數(shù)  color: #0ecbb6;
3. rgb()  color: rgb(255, 116, 30);
4. rgba() a為通明度   rgba(141, 234, 233, 0.8);
*/

文本對齊方式-> text-align:center;
首行縮進–> text-indent:2em;
行高–> line-height:50px; （單行文字上下居中 line-height=height）

修飾（下劃線）–> text-decoration;

/*下劃線*/
text-decoration:underline;
/*中劃線*/
text-decoration:line-through;
/*上劃線*/
text-decoration:overline;
/*超鏈接去下劃線*/
text-decoration:none;

圖片般妙、文字水平對齊 -> vertical-align: middle;

/*水平對齊纪铺，需要有參數(shù)物   a,b*/
img,span{
    vertical-align: middle;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本樣式</title>
    <style>
        /*
        顏色表示方式：
        1. 單詞   color: orange;
        2. #十六進制數(shù)  color: #0ecbb6;
        3. rgb()  color: rgb(255, 116, 30);
        4. rgba() a為通明度   rgba(141, 234, 233, 0.8);
        */
        h1 {
            color: rgba(141, 234, 233, 0.8);
            text-align: center;
        }

        /*首行縮進2個字符*/
        .p1 {
            text-indent: 2em;
        }

        .p3 {
            background: #0ecbb6;
            height: 80px;
            line-height: 80px;
        }

        /*下劃線*/
        .l1 {
            text-decoration: underline;
        }

        /*中劃線*/
        .l2 {
            text-decoration: line-through;
        }

        /*上劃線*/
        .l3 {
            text-decoration: overline;
        }

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

        /*水平對齊，需要有參數(shù)物   a,b*/
        img, span {
            vertical-align: middle;
        }
    </style>
</head>
<body>
<a href="">超鏈接去下劃線</a>
<p class="l1">下劃線</p>
<p class="l2">中劃線</p>
<p class="l3">上劃線</p>
<p>
    <img src="images/test01.png" alt="" width="100px">
    <span>測試圖片碟渺、文字水平對齊</span>
</p>
<h1>人工智能引發(fā)新浪潮</h1>
<p class="p1">為了識別2022年最重要的技術(shù)趨勢鲜锚，德國《商報》記者走訪了高校實驗室、研究機構(gòu)和企業(yè)苫拍，
    并與學(xué)界和業(yè)界的領(lǐng)軍人物探討芜繁，列出了2022年最熱門的15項技術(shù)。其中包括人工智能引發(fā)新浪潮绒极。
</p>
<p>總部位于德國海德堡的Aleph Alpha公司也許是人工智能領(lǐng)域最具雄心的初創(chuàng)企業(yè)骏令。其創(chuàng)始人約納斯·安德魯利斯正在研發(fā)新一代人工智能模型，
    他將其稱為“世界模型”垄提，因為它有著超強的計算能力榔袋，的確是在觀察整個世界。
</p>
<p class="p3">Tiger earns its stripes as folk hero and role model</p>
</body>
</html>

4. 文本陰影和超鏈接偽類

01铡俐、陰影

/*text-shadow:陰影顏色 水平偏移 垂直偏移 模糊半徑*/
#price {
    text-shadow: #468ec0 10px 10px 2px;
}

02凰兑、超鏈接偽類（常用 a，a:hover）

/*超鏈接默認(rèn)的顏色*/
a {
    text-decoration: none;
    color: black;
}

/*鼠標(biāo)懸浮的狀態(tài)（常用）*/
a:hover {
    color: orange;
    font-size: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超鏈接偽類</title>
    <style>
        /*超鏈接默認(rèn)的顏色*/
        a {
            text-decoration: none;
            color: black;
        }

        /*鼠標(biāo)懸浮的狀態(tài)（常用）*/
        a:hover {
            color: orange;
            font-size: 30px;
        }

        /*鼠標(biāo)按住未釋放的狀態(tài)*/
        a:active {
            color: green
        }

        /*點擊之后的狀態(tài)*/
        a:visited {
            color: #cc75ef;
        }

        /*text-shadow:陰影顏色 水平偏移 垂直偏移 模糊半徑*/
        #price {
            text-shadow: #468ec0 10px 10px 2px;
        }

        /*固定陰影*/
        a:link {
            background: #c4c4c4;
        }
    </style>
</head>
<body>
<a href="">
    <img src="images/test02.jpg" alt="">
</a>
<p>
    <a href="#"> 碼出高效：Java開發(fā)手冊</a>
</p>
<p>
    <a href="">作者：楊冠寶 高荷笄穑慧</a>
</p>
<p id="price">
    ￥99元
</p>
</body>
</html>

5. 列表 ul吏够、li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<div id="nav">
    <h2 class="title">全部商品分類</h2>
    <ul>
        <li><a href="#">圖書</a> <a href="#">影視</a> <a href="#">家電</a></li>
        <li><a href="#">配件</a> <a href="#">手機</a> <a href="#">數(shù)碼</a></li>
        <li><a href="#">電腦</a> <a href="#">辦公</a></li>
        <li><a href="#">家居</a> <a href="#">家裝</a> <a href="#">廚具</a></li>
        <li><a href="#">服飾鞋帽</a> <a href="#">個性化妝</a></li>
        <li><a href="#">禮品箱包</a> <a href="#">鐘表</a> <a href="#">珠寶</a></li>
        <li><a href="#">食品飲料</a> <a href="#">保健食品</a></li>
        <li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票務(wù)</a></li>
    </ul>
</div>
</body>
</html>

CSS 文件

#nav {
    width: 260px;
    background: #eeeded;
}

.title {
    font-size: 20px;
    font-weight: bold;
    text-indent: 1em; /*縮進*/
    line-height: 35px;
    background: #fcb150;
}

/*ul li*/
/*
list-style:
    none 去掉實心圓
    circle 空心圓
    square 正方形
*/
/*nav替換效果*/
/*ul {*/
/*    background: #d9d9d9;*/
/*}*/

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a {
    text-decoration: none;
    font-size: 14px;
    color: #0ecbb6;
}

a:hover {
    color: #ff741e;
    text-decoration: underline;
}

6. 背景

背景顏色：background；

背景圖片滩报。

background-image:url(""); /* 默認(rèn)是全部平鋪的 */
background-repeat:repeat-x; /* 水平平鋪 */
background-repeat:repeat-y; /* 垂直平鋪 */
background-repeat:no-repeat; /* 不平鋪 */

實例 1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            border: 1px solid #468ec0;
            background-image: url("images/001.png");
            /* 默認(rèn)是全部平鋪的 repeat */
        }

        /*水平平鋪*/
        .div1 {
            background-repeat: repeat-x;
        }

        /*垂直平鋪*/
        .div2 {
            background-repeat: repeat-y;
        }

        /*不平鋪*/
        .div3 {
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

實例 2：更改 ul 實例锅知，添加背景圖片

#nav {
    width: 260px;
    background: #eeeded;
}

.title {
    font-size: 20px;
    font-weight: bold;
    text-indent: 1em; /*縮進*/
    line-height: 35px;
    /*顏色 圖片地址 圖片位置 平鋪方式*/
    background: #fcb150 url("../images/d.png") 230px 8px no-repeat;
}

/*ul li*/
/*
list-style:
    none 去掉實心圓
    circle 空心圓
    square 正方形
*/
/*nav替換效果*/
/*ul {*/
/*    background: #d9d9d9;*/
/*}*/

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/r.png");
    background-repeat: no-repeat;
    background-position: 186px 1px;
}

a {
    text-decoration: none;
    font-size: 14px;
    color: #0ecbb6;
}

a:hover {
    color: #ff741e;
    text-decoration: underline;
}

7. 漸變

漸變背景網(wǎng)址：https://www.grabient.com
徑向漸變、圓形漸變露泊。

body{
    background-color: #4158D0;
    background-image: linear-gradient(315deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

四喉镰、盒子模型

1. 什么是盒子模型

position：定位類型旅择；
margin：外邊距惭笑；
padding：內(nèi)邊距；
border：邊框；

2. 邊框

border：粗細樣式顏色
- 邊框的粗細沉噩；
- 邊框的樣式捺宗；
- 邊框的顏色。

html 空格代碼

名稱	描述
&nbsp ;	不斷行的空白（1 個字符寬度）
&ensp ;	半個空白（1 字符寬度）
&emsp ;	一個空白（2 個字符寬度）
&thinsp ;	窄空白（小于 1 個字符寬度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子</title>
    <style>
        /*body總有一個默認(rèn)的外邊距川蒙，可以先將margin設(shè)為0*/
        /*h1, ul, li, a, body {*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    text-decoration: none;*/
        /*}*/

        /*border：粗細 樣式 顏色*/
        #box {
            width: 300px;
            border: 1px solid #ff741e;
        }

        h2 {
            font-size: 18px;
            background-color: #eeeded;
            line-height: 35px;
            margin: 0;
            color: #ef0707;
        }

        form {
            background: #ccf6ef;
        }

        div:nth-of-type(1) input {
            border: 3px solid seagreen;
        }

        div:nth-of-type(2) input {
            border: 3px dashed gray;
        }

        div:nth-of-type(3) input {
            border: 2px solid royalblue;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>會員登陸</h2>
    <form action="#">
        <div>
            <span>用戶名：</span>
            <input type="text">
        </div>
        <div>
            <span>密&emsp;碼：</span>
            <input type="text">
        </div>
        <div>
            <span>郵&emsp;箱：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

3. 外邊距

margin-left/right/top/bottom–> 表示四邊蚜厉，可分別設(shè)置，也可以同時設(shè)置畜眨，如下：

/* 分別表示上昼牛、右、下康聂、左贰健；從上開始順時針 */
margin:0 0 0 0;
/* 例1: 居中 auto表示左右自動 */
margin:0 auto;
/* 例2：表示上、右恬汁、下伶椿、左都為4px */
margin:4px;
/* 例3: 表示上為10px，左右為20px氓侧，下為30px */
margin:10px 20px 30px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外邊距</title>
    <style>
        #box {
            width: 300px;
            border: 1px solid #468ec0;
            margin: 0 auto;
        }

        h2 {
            font-size: 18px;
            background-color: #d9d9d9;
            line-height: 35px;
            margin: 0;
            color: #ff0000;
        }

        form {
            background: #adfaf0;
        }

        input {
            border: 1px solid #468ec0;
        }

        div:nth-of-type(1) {
            padding: 10px; /* 內(nèi)邊距10px */
        }
    </style>
</head>
<body>
<div id="box">
    <h2>會員登陸</h2>
    <form action="#">
        <div>
            <span>用戶名：</span>
            <input type="text">
        </div>
        <div>
            <span>密&emsp;碼：</span>
            <input type="text">
        </div>
        <div>
            <span>郵&emsp;箱：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

盒子的計算方式：
- margin+border+padding+內(nèi)容元素脊另。

總結(jié)：

body 總有一個默認(rèn)的外邊距，去除外邊距 margin:0;
常見操作：初始化约巷。

4. 圓角邊框

圓角邊框：border-radius偎痛；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圓角邊框</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 10px solid #468ec0;
            /* 一個border-radius只管一個圓的1/4 */
            /* 左上 右上 右下 左下 ,順時針方向 */
            border-radius: 50px 20px 20px 30px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圓形</title>
    <style>
        img {
            border-radius: 25px; /*圓角矩形25px*/
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<img src="images/001.png" alt="#">
</body>
</html>

5. 盒子陰影

/*box-shadow:盒子陰影顏色 水平偏移 垂直偏移 模糊半徑*/
box-shadow: #4d4d4d 5px 5px 3px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子陰影</title>
    <style>
        div {
            width: 300px;
            margin: 0 auto;
        }

        /*box-shadow:盒子陰影顏色 水平偏移 垂直偏移 模糊半徑*/
        img {
            box-shadow: #4d4d4d 5px 5px 3px;
        }
    </style>
</head>
<body>
<div>
    <img src="images/001.png" alt="">
</div>
</body>
</html>

五、浮動

1. 標(biāo)準(zhǔn)文檔流

塊級元素：獨占一行
```
h1~h6独郎、p看彼、div、ul…
```
行內(nèi)元素：不獨占一行
```
span囚聚、a靖榕、img、strong
```
注： 行內(nèi)元素可以包含在塊級元素中顽铸，反之則不可以茁计。

2. dispaly

block：塊元素；
inline：行內(nèi)元素谓松；
inline-block：是塊元素星压，但是可以內(nèi)聯(lián)，在一行鬼譬；
none: 隱藏娜膘；
這也是一種實現(xiàn)行內(nèi)元素排列的方式，但是我們很多情況用 float优质。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        /*
        display
        block：塊元素
        inline：行內(nèi)元素
        inline-block：塊元素竣贪，但是可以內(nèi)聯(lián)
        none：隱藏
        */
        div {
            width: 110px;
            height: 110px;
            border: 1px solid #468ec0;
            display: inline-block;
        }

        span {
            width: 110px;
            height: 110px;
            border: 1px solid #468ec0;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div 塊元素</div>
<span>span 行內(nèi)元素</span>
</body>
</html>

3. float:left/right

clear: both;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動 float</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
    <div class="layer01">
        <img src="images/t01.png" alt="">
    </div>
    <div class="layer02">
        <img src="images/t02.png" alt="">
    </div>
    <div class="layer03">
        <img src="images/t03.png" alt="">
    </div>
    <div class="layer04">
        浮動的盒子可以向左浮動军洼，也可以向右浮動，知道他的外邊緣碰到包含框或另一個浮動盒子為止演怎。
    </div>
</div>
</body>
</html>

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: right;
}

.layer03 {
    border: 1px #060 dashed;
    display: inline-block;
}

.layer04 {
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    clear: both;
}

4. 父級邊框塌陷的問題

clear：
- right：右側(cè)不允許有浮動元素匕争；
- left：左側(cè)不允許有浮動元素；
- both：兩側(cè)不允許有浮動元素爷耀；
- none：

解決塌陷問題方案：

方案一：增加父級元素的高度甘桑；

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

方案二：增加一個空的 div 標(biāo)簽，清除浮動歹叮。

<div class = "clear"></div>
<style>
    .clear{
        clear:both;
        margin:0;
        padding:0;
    }
</style>

方案三：在 父級元素中 增加一個 overflow 屬性跑杭。

overflow:hidden; /* 隱藏超出部分 */
overflow:scroll; /* 滾動 */

方案四（推薦）：父類添加一個偽類:after。

#father:after{
    content:'';
    display:block;
    clear:both;
}

小結(jié)：

浮動元素增加空 div：
- 簡單咆耿，代碼盡量避免空 div艘蹋；
設(shè)置父元素的高度：
- 簡單，但是元素假設(shè)有了固定的高度票灰，可能就會超出范圍女阀；
overflow：
- 簡單，下拉的一些場景避免使用屑迂；
父類添加一個偽類:after（推薦）：
- 寫法稍微復(fù)雜浸策，但是沒有副作用，推薦使惹盼；

display 與 float 對比：

display：方向不可以控制庸汗；
float：浮動起來會脫離標(biāo)準(zhǔn)文檔流，所以要解決父級邊框塌陷的問題手报。

六蚯舱、定位

1. 相對定位

相對定位：positon:relstive;

相對于原來的位置，進行指定的偏移掩蛤，相對定位枉昏，仍然在標(biāo)準(zhǔn)文檔流中，原來的位置會被保留揍鸟。

positon:relstive; /*先設(shè)置相對定位*/

top:-20px; /*向上偏移20px*/
left:20px; /*向右偏移20p*/
bottom:-10px; /*向下偏移10px*/
right:20px; /*向左偏移20px*/