前端基础 02、CSS3 入门

一、什么是 CSS

1. CSS

Cascading Style Sheet 层叠样式表。
CSS：表现（美化网页）。
- 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...

2. CSS 发展史

CSS 1.0：1994年10月提出；
CSS 2.0：DIV（块）+ CSS，HTML与 CSS 结构分离的思想，网页变得简单，SEO；
CSS 2.1：浮动，定位；
CSS 3.0：圆角、阴影、动画…浏览器兼容性。

3. 快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3快速入门</title>
    <!-- 规范：<style>可以编写 CSS 的代码，每一个声明最好以“;”结尾
    语法:
        选择器{
              声明1;
              声明2;
              声明3;
        }
    -->
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
<h1>CSS样式 h1标题</h1>
</body>
</html>

建议使用这种规范（单独写一个 css 文件，用 link 标签引入 css 文件效果）。

CSS 的优势：

内容和表现分离；
网页结构表现统一，可以实现复用；
样式十分的丰富；
建议使用独立于 html 的 css 文件；
利用 SEO，容易被搜索引擎收录！

CSS 的 3 种常用导入方式：

行内样式
内部样式
外部样式

优先级：就近原则（1. 行内样式 2. 内部样式哪个离元素更近）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3快速入门</title>
    <!--3. 外部样式-->
    <link rel="stylesheet" href="css/style.css">
    <style>
        /*2. 内部样式*/
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
<!--优先级：就近原则 —— 1.行内样式  2.内部样式，外部样式哪个离元素更近-->
<!--1. 行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:aquamarine">CSS3测试</h1>
</body>
</html>

拓展：外部样式两种方法。

链接式（推荐）：HTML

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

导入式（不推荐使用）：@import 是 CSS 2.1 特有的。

<!--导入式-->
<style>
    @import url("css/style.css");
</style>

二、CSS 选择器（重点）

作用：选择页面上的某一个，或者某一类元素。

1. 基本选择器

01、标签选择器：选择一类标签。

格式：标签名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</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>标签选择器</h1>
<h3>前端-CSS3</h3>
<p>Android</p>
</body>
</html>

02、类选择器 class：选择所有 class 一致的标签，可以跨标签。

格式：.类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*
        类选择器的格式：.class的名称{}
        好处：可以多个标签归类,是同一个class,可以复用！
         */
        .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名称{}
        不遵循就近原则,优先级是固定的
        id 选择器 > class类选择器 > 标签选择器
         */
        #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">标题1</h1>
<h1 id="test02" class="test01">标题2</h1>
<h1 class="test02">标题3</h1>
<h1>标题4</h1>
</body>
</html>

id 选择器优先级：id > class > 标签。

2. 层次选择器

01、后代选择器：在某个元素的后面（所有的选择标签）；
```
/*后代选择器*/
body p {
  background: deeppink;
}
```

02、子选择器：一代（只包含下一级）；

/*子选择器*/
body > p {
  background: #0ecbb6;
}

03、相邻的兄弟选择器：同辈（只选择一个，相邻且向下）；

/*相邻兄弟选择器：只选择一个,相邻向下*/
.active + p {
  background: #f1e889;
}

04、通用选择器：当前选中元素的向下的 所有兄弟元素。

/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.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. 通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
        .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. 结构伪类选择器

伪类：条件

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

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

/*
  选中 p1：定位到父元素,选择当前的第一个元素选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！（顺序，会受到其它标签影响）
*/
p:nth-child(2) {
    background: greenyellow;
}

/*选中父元素下的第二个p元素，按类型（不会受其它标签影响）*/
p:nth-of-type(2) {
    background: lightseagreen;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child {
            background: orange;
        }

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

        /*
        选中 p1：定位到父元素,选择当前的第一个元素
            选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！（顺序，会受到其它标签影响）
         */
        p:nth-child(2) {
            background: greenyellow;
        }

        /*选中父元素下的第二个p元素，按类型（不会受其它标签影响）*/
        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 结合

属性名、属性名 = 属性值（正则）
- = ：绝对等于
- *= ：包含
- ^=：以...开头
- $= ：以...结尾

<!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;
        }

        /*
        属性名、属性名 = 属性值（正则）
             = 表示绝对等于
             *= 表示包含
             ^= 表示以...开头
             $= 表示以...结尾
         */
        /*存在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结尾的元素*/
        a[href$=pdf] {
            background: #0553ee;
        }
    </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="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>

三、美化网页

1. 为什么要美化网页

有效的传递页面信息；
美化网页，页面漂亮才能吸引客户；
凸显页面的主题；
提高用户的体验。

span 标签：重点要突出的字，使用 span 标签（约定俗成）套起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美化网页</title>
    <style>
        #title {
            font-size: 25px;
        }
    </style>
</head>
<body>
<!--span 替换成任意自定义标签，不会影响实现效果，但约定一般使用 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>标题</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,相当于bloder */
font-weight:bolder;
/*常用写法(oblique斜体)*/
font:oblique bloder 12px "黑体";

3. 文本样式

颜色-> color:单词/#十六进数/rgb() / rgba();

/*
颜色表示方式：
1. 单词   color: orange;
2. #十六进制数  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;

/*水平对齐，需要有参数物   a,b*/
img,span{
    vertical-align: middle;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        /*
        颜色表示方式：
        1. 单词   color: orange;
        2. #十六进制数  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;
        }

        /*水平对齐，需要有参数物   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>人工智能引发新浪潮</h1>
<p class="p1">为了识别2022年最重要的技术趋势，德国《商报》记者走访了高校实验室、研究机构和企业，
    并与学界和业界的领军人物探讨，列出了2022年最热门的15项技术。其中包括人工智能引发新浪潮。
</p>
<p>总部位于德国海德堡的Aleph Alpha公司也许是人工智能领域最具雄心的初创企业。其创始人约纳斯·安德鲁利斯正在研发新一代人工智能模型，
    他将其称为“世界模型”，因为它有着超强的计算能力，的确是在观察整个世界。
</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）

/*超链接默认的颜色*/
a {
    text-decoration: none;
    color: black;
}

/*鼠标悬浮的状态（常用）*/
a:hover {
    color: orange;
    font-size: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        /*超链接默认的颜色*/
        a {
            text-decoration: none;
            color: black;
        }

        /*鼠标悬浮的状态（常用）*/
        a:hover {
            color: orange;
            font-size: 30px;
        }

        /*鼠标按住未释放的状态*/
        a:active {
            color: green
        }

        /*点击之后的状态*/
        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开发手册</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="#">数码</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="#">票务</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(""); /* 默认是全部平铺的 */
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");
            /* 默认是全部平铺的 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. 渐变

渐变背景网址：https://www.grabient.com
径向渐变、圆形渐变。

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

四、盒子模型

1. 什么是盒子模型

position：定位类型；
margin：外边距；
padding：内边距；
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总有一个默认的外边距，可以先将margin设为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–> 表示四边，可分别设置，也可以同时设置，如下：

/* 分别表示上、右、下、左；从上开始顺时针 */
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; /* 内边距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+内容元素。

总结：

body 总有一个默认的外边距，去除外边距 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. 标准文档流

块级元素：独占一行
```
h1~h6、p、div、ul…
```
行内元素：不独占一行
```
span、a、img、strong
```
注： 行内元素可以包含在块级元素中，反之则不可以。

2. dispaly

block：块元素；
inline：行内元素；
inline-block：是块元素，但是可以内联，在一行；
none: 隐藏；
这也是一种实现行内元素排列的方式，但是我们很多情况用 float。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        /*
        display
        block：块元素
        inline：行内元素
        inline-block：块元素，但是可以内联
        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 行内元素</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：右侧不允许有浮动元素；
- left：左侧不允许有浮动元素；
- both：两侧不允许有浮动元素；
- none：

解决塌陷问题方案：

方案一：增加父级元素的高度；

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

方案二：增加一个空的 div 标签，清除浮动。

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

小结：

浮动元素增加空 div：
- 简单，代码尽量避免空 div；
设置父元素的高度：
- 简单，但是元素假设有了固定的高度，可能就会超出范围；
overflow：
- 简单，下拉的一些场景避免使用；
父类添加一个伪类:after（推荐）：
- 写法稍微复杂，但是没有副作用，推荐使；

display 与 float 对比：

display：方向不可以控制；
float：浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题。

六、定位

1. 相对定位

相对定位：positon:relstive;

相对于原来的位置，进行指定的偏移，相对定位，仍然在标准文档流中，原来的位置会被保留。

positon:relstive; /*先设置相对定位*/

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