CSS-浮动+定位+动画

带毛的厕所除臭剂

已于 2025-03-26 19:38:58 修改

阅读量96

点赞数

文章标签： css css3 html

于 2023-04-08 10:51:25 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73791982/article/details/129956865

版权

一.浮动

多个块级元素纵向排列找标准流，多个块级元素横向排列找标准流
浮动的盒子不会发生外边距合并

1.浮动定义

float 属性用于创建浮动框，将其移动到一边，直到左边边缘或者右边缘触及包含块或另一个浮动框的边缘
语法：

选择器 {float: 属性；}

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动的定义</title>
    <style>
      .left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="left">左</div>
    <div class="right">右</div>
  </body>
</html>

浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        /* 浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离 */
        display: inline-block;
        width: 100px;
        height: 100px;
      }

      .one {
        background-color: pink;
      }

      .two {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="one">one</div>
    <div class="two">two</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 浮动的标签  顶对齐 */
      /* 浮动: 在一行排列, 宽高生效 -- 浮动后的标签具备行内块特点 */
      .one {
        width: 100px;
        height: 100px;
        background-color: pink;
        float: left;
        margin-top: 50px;
      }

      .two {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left;

        /* 因为有浮动, 不能生效 - 盒子无法水平居中 */
        margin: 0 auto;
      }

      .three {
        width: 300px;
        height: 300px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
  </body>
</html>

2.浮动的特性

浮动元素会脱离标准流

脱离标准普通流的控制（浮）移到指定位置（动），（俗称脱标）。
浮动的盒子不再保留原先的位置。

浮动的元素会在一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，则他们会按照属性值一行显示并且顶端对齐排列。
浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

浮动的元素会具有行内块元素的特性

任何元素都可以浮动，不管原先是什么模式，添加浮动之后具有行内块元素相似的特性。
如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度
如果块级盒子没有设置宽度，默认宽度和父亲一样宽，但是添加浮动后，它的大小根据内容来定。
默认宽度由内容决定，同时支持指定高宽，盒子之间没有空隙

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>浮动的元素具有行内块元素特点</title>
    <style>
      /* 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 */
      span,
      div {
        float: left;
        width: 200px;
        height: 100px;
        background-color: pink;
      }

      /* 如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度 */
      /*顶部没有对齐，原因是 p 标签自带的外边距 > span div 自带的外边距*/
      p {
        float: right;
        height: 200px;
        background-color: skyblue;
      }
    </style>
  </head>

  <body>
    <span>span1</span>
    <span>span2</span>
    <div>div</div>
    <p>pppppppppppppp</p>
  </body>
</html>

3.浮动元素经常与标准流父级搭配使用

为了约束浮动元素的位置：先用标准父级元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网特布局第一准则。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>浮动元素搭配标准流父盒子2</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* 取消 li 前的圆点 */
      li {
        list-style: none;
      }

      .box {
        width: 1226px;
        height: 285px;
        background-color: pink;
        /* 让大盒子水平居中 */
        margin: 0 auto;
      }

      .box li {
        width: 296px;
        height: 285px;
        background-color: gray;
        float: left;
        /* 每个小盒子用右边距隔开 */
        margin-right: 14px;
      }

      /* 取消最后一个小盒子的右外边距 */
      /* 这里必须写 .box .last 要注意权重的问题  20 */
      .box .last {
        margin-right: 0;
      }
    </style>
  </head>

  <body>
    <ul class="box">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li class="last">4</li>
    </ul>
  </body>
</html>

4.浮动的两个注意点

浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

一个元素浮动了，理论上其余兄弟也要浮动。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

5.清除浮动

由于父元素很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
由于浮动元素不占原文档的位置，所以它会对后面的元素排版产生影响。
清除浮动之后，父级元素就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
清除浮动的策略是：闭合浮动

5.1额外标签法

选择器{clear: 属性值；}

属性值	描述
left	不允许左侧有浮动元素（清除左浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

注意这个标签必须是块级元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 100%;
        border: 2px solid red;
      }
      .son {
        width: 300px;
        height: 300px;
        border: 2px solid blue;
        float: left;
      }
      .box {
        width: 100%;
        height: 300px;
        background-color: green;
      }
      .clear {
        clear: both;
      } /*  为标签设置清除浮动 */
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
      <div class="son"></div>
      <div class="clear"></div>
    </div>
    <div class="box"></div>
    <!-- 添加清除浮动标签 -->
  </body>
</html>

5.2给父级添加 overflow 属性

overflow属性，将其属性值设置为hidden、auto、scroll
块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立

.father {
        width: 100%;
        border: 2px solid red;
        overflow：hidden;
      }

5.3给父级添加after伪元素

利用after伪元素定义一个clearfix类，浮动元素的父级元素调用此类可以实现清除浮动的效果

	.clearfix::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .clearfix {
        /* IE6、7 专有 */
        *zoom: 1;
      }

5.4清除浮动的总结

为什么需要清除浮动
（1）父级没高度（2）子盒子浮动了（3）影响下面的布局，我们就应该清除浮动了

清除浮动的方式	优点	缺点
额外标签法	通俗易懂，书写方便	添加许多无意义的标签，结构化比较差
父级overflow：hidden；	书写简单	溢出隐藏
父级元素after伪元素	结构语义化正确	由于IE6-7不支持：after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持：after，兼容性问题

二.学成在线首页

<!DOCTYPE html>
< lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学成在线首页</title>
    <link rel="stylesheet" type="text/css" href="style8.css" />
  </head>
  <>
    <!-- 头部盒子 -->
    <div class="header w">
      <!-- logo部分 -->
      <div class="logo">
        <img src="images1/logo.png" alt="" />
      </div>
      <!-- 导航栏部分nav -->
      <div class="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">课程</a></li>
          <li><a href="#">职业规划</a></li>
        </ul>
      </div>
      <!-- 搜索模块 -->
      <div class="search">
        <input type="text" value="请输入文字" />
        <button></button>
      </div>
      <!-- 用户模块 -->
      <div class="user">
        <img src="images1/user.png" alt="" />
        qq-lilei
      </div>
    </div>
    <!-- banner部分 -->
    <div class="banner">
      <!-- 版心 -->
      <div class="w">
        <div class="subnav">
          <ul>
            <li>
              <a href="#">前端开发<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">后端开发<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">移动开发<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">人工智能<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">商业预测<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">云计算&大数据<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">运维&从测试<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">UI设计<span>&gt;</span></a>
            </li>
            <li>
              <a href="#">产品<span>&gt;</span></a>
            </li>
          </ul>
        </div>
        <!-- course课程表模块 -->
        <div class="course">
          <h2>我的课程表</h2>
          <div class="bd">
            <ul>
              <li>
                <h4>继续学习 程序设计语言</h4>
                <p>正在学习-使用对象</p>
              </li>
              <li>
                <h4>继续学习 程序设计语言</h4>
                <p>正在学习-使用对象</p>
              </li>
              <li>
                <h4>继续学习 程序设计语言</h4>
                <p>正在学习-使用对象</p>
              </li>
            </ul>
            <a href="#">全部课程</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 开始精品推荐 -->
    <div class="good w">
      <h3>精品推荐</h3>
      <ul>
          <li><a href="#">jQuery</a></li>
          <li><a href="#">Spark</a></li>
          <li><a href="#">MySQL</a></li>
          <li><a href="#">javaWeb</a></li>
          <li><a href="#">jQuery</a></li>
          <li><a href="#">MySQL</a></li>
      </ul>
      <a href="#">修改兴趣</a>
  </div>
  <!-- box核心内容区域开始 -->
  <div class="box w">
      <div class="box-hd">
          <h3>精品推荐</h3>
          <a href="#">查看全部</a>
      </div>
      <div class="box-bd">
          <ul class="clearfix">
              <li>
                  <img src="images1/pic.png" alt="">
                  <h4>
                      Think PHP 5.0 博客系统实战项目演练
                  </h4>
                  <div class="info">
                      <span>高级</span> • 1125人在学习
                  </div>
              </li>
              <li>
                  <img src="images1/pic.png" alt="">
                  <h4>
                      Think PHP 5.0 博客系统实战项目演练
                  </h4>
                  <div class="info">
                      <span>高级</span> • 1125人在学习
                  </div>
              </li>
              <li>
                  <img src="images1/pic.png" alt="">
                  <h4>
                      Think PHP 5.0 博客系统实战项目演练
                  </h4>
                  <div class="info">
                      <span>高级</span> • 1125人在学习
                  </div>
              </li>
              <li>
                  <img src="images1/pic.png" alt="">
                  <h4>
                      Think PHP 5.0 博客系统实战项目演练
                  </h4>
                  <div class="info">
                      <span>高级</span> • 1125人在学习
                  </div>
              </li>
              <li>
                  <img src="images1/pic.png" alt="">
                  <h4>
                      Think PHP 5.0 博客系统实战项目演练
                  </h4>
                  <div class="info">
                      <span>高级</span> • 1125人在学习
                  </div>
              </li>
              <li>
                  <img src="images1/pic.png" alt="">
                  <h4>
                      Think PHP 5.0 博客系统实战项目演练
                  </h4>
                  <div class="info">
                      <span>高级</span> • 1125人在学习
                  </div>
              </li>
              <li>
                  <img src="images1/pic.png" alt="">
                  <h4>
                      Think PHP 5.0 博客系统实战项目演练
                  </h4>
                  <div class="info">
                      <span>高级</span> • 1125人在学习
                  </div>
              </li>
              <li>
                  <img src="images1/pic.png" alt="">
                  <h4>
                      Think PHP 5.0 博客系统实战项目演练
                  </h4>
                  <div class="info">
                      <span>高级</span> • 1125人在学习
                  </div>
              </li>
              <li>
                  <img src="images1/pic.png" alt="">
                  <h4>
                      Think PHP 5.0 博客系统实战项目演练
                  </h4>
                  <div class="info">
                      <span>高级</span> • 1125人在学习
                  </div>
              </li>
              <li>
                  <img src="images1/pic.png" alt="">
                  <h4>
                      Think PHP 5.0 博客系统实战项目演练
                  </h4>
                  <div class="info">
                      <span>高级</span> • 1125人在学习
                  </div>
              </li>
          </ul>
      </div>
  </div>
  <!-- footer开始 -->
  <div class="footer ">
      <div class="w clearfix">
          <div class="copyright">
              <img src="images1/logo.png" alt="">
              <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                  © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
              <a href="#">下载APP</a>
          </div>
          <div class="links">
              <dl>
                  <dt>合作伙伴</dt>
                  <dd><a href="#">关于</a></dd>
                  <dd><a href="#">管理团队</a></dd>
                  <dd><a href="#">工作机会</a></dd>
                  <dd><a href="#">客户服务</a></dd>
                  <dd><a href="#">帮助</a></dd>
              </dl>
              <dl>
                  <dt>新手指南</dt>
                  <dd><a href="#">关于</a></dd>
                  <dd><a href="#">管理团队</a></dd>
                  <dd><a href="#">工作机会</a></dd>
                  <dd><a href="#">客户服务</a></dd>
                  <dd><a href="#">帮助</a></dd>
              </dl>
              <dl>
                  <dt>关于学成网</dt>
                  <dd><a href="#">关于</a></dd>
                  <dd><a href="#">管理团队</a></dd>
                  <dd><a href="#">工作机会</a></dd>
                  <dd><a href="#">客户服务</a></dd>
                  <dd><a href="#">帮助</a></dd>
              </dl>
          </div>
      </div>
  </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}
.w {
  width: 1200px;
  margin: auto;
}
body {
  background-color: #f3f5f7;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.header {
  height: 42px;
  /* 注意此地方会层叠w里面的margin */
  margin: 30px auto;
}
.logo {
  float: left;
  width: 198px;
  height: 42px;
}
.nav {
  float: left;
  margin-left: 60px;
}
.nav ul li {
  float: left;
  margin: 0 15px;
}
.nav ul li a {
  display: block;
  height: 42px;
  padding: 0 10px;
  line-height: 42px;
  font-size: 18px;
  color: #050505;
}
.nav ul li a:hover {
  border-bottom: 2px solid #00a4ff;
}
/* 搜索模块 */
.search {
  float: left;
  width: 412px;
  height: 42px;
  margin-left: 70px;
}
.search input {
  float: left;
  width: 345px;
  height: 40px;
  border: 1px solid #00a4ff;
  border-right: 0;
  color: #bfbfbf;
  font-size: 14px;
  padding-left: 15px; /*撑大盒子 */
}
.search button {
  float: left;
  width: 50px;
  height: 42px;
  /* botton默认有个边框需要我们手动去掉 */
  border: 0;
  background: url(images1/btn.png);
}
.user {
  float: right;
  margin-right: 30px;
  line-height: 42px;
  font-size: 14px;
  color: #666;
}
/* banner区域 */
.banner {
  height: 421px;
  background-color: #1c036c;
}
.banner .w {
  height: 421px;
  background: url(images1/banner.png) no-repeat top center;
}
.subnav {
  float: left;
  width: 190px;
  height: 421px;
  background: rgba(0, 0, 0, 0.3);
}
.subnav ul li {
  height: 45px;
  line-height: 45px;
  padding: 0 20px;
}
.subnav ul li a {
  font-size: 14px;
  color: #fff;
}
.subnav ul li a span {
  float: right;
}
.subnav ul li a:hover {
  color: #00a4ff;
}
.course {
  float: right;
  width: 230px;
  height: 300px;
  /* 浮动的盒子不会有外边距合并问题 */
  margin-top: 50px;
}
.course h2 {
  height: 48px;
  background-color: #9bceea;
  text-align: center;
  line-height: 48px;
  font-size: 18px;
  color: #fff;
}
.bd {
  padding: 0 20px;
}
.bd ul li {
  padding: 14px 0;
  border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
  font-size: 16px;
  color: #4e4e4e;
}
.bd ul li p {
  font-size: 12px;
  color: #a5a5a5;
}
.bd .more {
  display: block;
  width: 198px;
  height: 38px;
  border: 1px solid #22b0ff;
  margin-top: 5px;
  text-align: center;
  line-height: 38px;
  color: #00a4ff;
  font-size: 16px;
  font-weight: 700;
}
/* 开始精品推荐 */
.good {
  height: 60px;
  margin-top: 10px;
  box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
  line-height: 60px;
  background-color: #fff;
}
.good h3 {
  float: left;
  margin-left: 30px;
  font-size: 16px;
  color: #22b0ff;
}
.good ul {
  float: left;
  margin-left: 30px;
}
.good ul li {
  float: left;
}
.good ul li a {
  padding: 0 30px;
  font-size: 16px;
  color: #050505;
  border-left: 1px solid #ccc;
}
.good a {
  float: right;
  margin-right: 30px;
  font-size: 14px;
  color: #00a4ff;
}
/* box核心内容区域开始 */
.box {
  margin-top: 30px;
}
.box .box-hd {
  height: 40px;
}
.box-hd h3 {
  float: left;
  font-size: 20px;
  color: #494949;
}
.box-hd a {
  float: right;
  margin-right: 30px;
  margin-top: 10px;
  font-size: 12px;
  color: #a5a5a5;
}

.box-bd ul {
  width: 1225px;
}

.box-bd ul li {
  float: left;
  width: 228px;
  height: 270px;
  background-color: #fff;
  margin: 0px 15px 15px 0px;
}
.box-bd ul li img {
  width: 100%;
}
.box-bd ul li h4 {
  margin: 20px 20px 20px 25px;
  font-size: 14px;
  color: #050505;
  font-weight: 400;
}
.box-bd .info {
  margin: 0 20px 0 25px;
  font-size: 12px;
  color: #999;
}
.box-bd .info span {
  color: #ff7c2d;
}
/* footer开始 */
.footer {
  background-color: #fff;
}
.copyright {
  float: left;
  padding-left: 20px;
  padding-top: 30px;
}
.copyright p {
  margin-top: 20px;
  font-size: 12px;
  color: #666666;
}
.copyright a {
  display: block;
  width: 118px;
  height: 33px;
  text-align: center;
  line-height: 33px;
  margin-top: 19px;
  border: 1px solid #00a4ff;
  color: #00a4ff;
}
.footer .links {
  float: right;
  padding-top: 30px;
  padding-right: 35px;
}
.links dl {
  float: right;
  margin-left: 100px;
}
.links dl dt {
  margin-bottom: 15px;
  font-size: 16px;
  color: #333333;
}
.links dl dd a {
  font-size: 12px;
  color: #333333;
}

三.定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

1.定位组成

定位=定位模式+边偏移
定位模式用于指定一个元素在文档里的定位方式，边偏移则决定了该元素的最终位置

2.1 定位模式

定位模式决定元素的定位方式，通过CSS的position属性来设置

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2.11相对定位

相对定位是元素在移动的位置的时候，是相对于它原来的位置来说的
选择器{position: relative;}
相对定位的特点：

它是相对原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对待它（不脱标，继续保留原来的位置）

2.12绝对定位

绝对定位是元素在移动的位置的时候，是相对于它祖先元素来说的
选择器{position: absolute;}
如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不占有原先的位置（脱标）

2.13静态定位

静态定位是元素的默认定位方式，无定位的意思
选择器{position: static;}
静态定位按标准流特性摆放位置，它没有边偏移

2.14固定定位

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
选择器{position: fixed;}
固定定位特点：

以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动
固定定位不在占有原先的位置

固定定位小技巧-固定到版心右侧
让固定定位的盒子left：50% 走到浏览器可视区的一半位置
让固定定位的盒子margin-left：版心距离的一般。多走版心距离的一半位置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .w {
        width: 800px;
        height: 800px;
        background-color: pink;
        margin: 0 auto;
      }
      .fixed {
        position: fixed;
        /* 浏览器宽度的一半 */
        left: 50%;
        /* 利用margin走版心盒子宽度的一半 */
        margin-left: 400px;
        width: 50px;
        height: 150px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800px</div>
  </body>
</html>

在这里插入图片描述

2.2边偏移

边偏移则决定了该元素的最终位置

边偏移属性	示例	描述
top	top：80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	top：80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	top：80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	top：80px	右侧偏移量，定义元素相对于其父元素右边线的距离

2.3子绝父相

子绝父相：子级是绝对定位的话（不需要占有位置），父级元素要用相对定位（需要占有位置）
子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此父亲只能是相对定位
相对定位经常用来作为绝对定位的父级

2.4 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合

选择器{position: sticky;top:10px}

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素（固定定位的特点）
粘性定位占有原先的位置（相对定位的特点）
必须添加top、left、right、bottom其中一个才有效

2.定位扩展

2.1绝对定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中

  left: 50%;   /* 让盒子的左侧移动到父级元素的水平中心位置；*/
   margin-left: -100px;   /*让盒子向左移动自身宽度的一半。*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        position: absolute;
        /* 水平居中 */
        /* left: 50%;走50%父容器宽度的一半 */
        left: 50%;
        /* margin 负值 往左边走 自己盒子宽度的一半 */
        margin-left: -100px;
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 垂直居中 */
        top: 50%;
        margin-top: -100px;
      }
    </style>
  </head>
  <body>
    <div class="box">草莓熊</div>
  </body>
</html>

在这里插入图片描述

2.2堆叠顺序

使用定位布局的时候，可能会出现盒子重叠的情况，此时可以使用z-index来控制盒子的前后次序（z轴）

选择器：{z-index：1；}

数值可以是正整数、负整数或者0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有有定位的盒子才有z-index属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 200px;
        height: 200px;
      }
      .xiongda {
        background-color: skyblue;
        z-index: 1;
      }
      .xionger {
        background-color: coral;
        left: 50px;
        top: 50px;
      }
      .xiong {
        background-color: pink;
        left: 100px;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box xiongda">熊大</div>
    <div class="box xionger">熊二</div>
    <div class="box xiong">草莓熊</div>
  </body>
</html>

在这里插入图片描述

2.3定位的特殊性

行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

2.4 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住下面的标准流盒子里面的文字（图片）
但是绝对定位(固定定位)会压住下面标准流所有内容
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        /* 1.浮动的元素不会压住下面标准流的文字 */
        /* float: left; */
        /* 2.绝对定位（固定定位会压住下面标准流所有的内容 */
        position: absolute;
        width: 150px;
        height: 150px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <p>我是一只草莓熊，我也是带毛的厕所除臭剂</p>
  </body>
</html>

浮动的元素不会压住下面标准流的文字
绝对定位（固定定位会压住下面标准流所有的内容）

3.定位总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative相对定位	否（占有位置）	相对于自身位置移动	常用
absolute绝对定位	是（不占有位置）	带有定位的父级	常用
fixed固定定位	是（不占有位置）	浏览器可视区	常用
sticky粘性定位	否（占有位置）	浏览器可视区	当前阶段少

一定要记住相对定位、固定定位、绝对定位两个大的特点：（1）是否占有位置（脱标否）（2）以谁为基准点移动位置
学定位重点学会子绝父相
注意：

边偏移需要和定位模式联合使用，单独使用无效
top 和 bottom 不要同时使用
left 和 right 不要同时使用
淘宝轮插图做法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>淘宝轮播图做法</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      .tb-promo {
        /* 子绝父相 */
        position: relative;
        width: 520px;
        height: 280px;
        background-color: pink;
        margin: 100px auto;
      }
      .tb-promo img {
        width: 520px;
        height: 280px;
      }
      /* 并集选择器 */
      .prev,
      .next {
        /* 加了绝对定位的盒子可以直接设置高度和宽度 */
        position: absolute;
        width: 20px;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.7);
        text-align: center;
        line-height: 30px;
        color: #fff;
        text-decoration: none;
        /* 绝对定位的盒子垂直居中 */
        top: 50%;
        margin-top: -15px;
      }
      .prev {
        left: 0px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
      }
      .next {
        right: 0px;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
      }
      .promo-nav {
        position: absolute;
        bottom: 15px;
        left: 50%;
        width: 70px;
        height: 13px;
        margin-left: -35px;
        /* background-color: pink; */
        background: rgba(255, 255, 255, 0.3);
        border-radius: 7px;
      }
      .promo-nav li {
        width: 8px;
        float: left;
        height: 8px;
        background-color: #fff;
        border-radius: 50%;
        margin: 3px;
      }
      .promo-nav .selected {
        background-color: #ff5000;
      }
    </style>
  </head>
  <body>
    <div class="tb-promo">
      <img src="images/草莓熊1.png" alt="" />
      <!-- 左侧按钮箭头 -->
      <a href="#" class="prev">&lt;</a>
      <!-- 右侧按钮箭头 -->
      <a href="#" class="next">&gt;</a>
      <!-- 小圆点 -->
      <ul class="promo-nav">
        <li class="selected"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
</html>

4. 网页布局总结

一个完整的网页，有标准流、浮动、定位一起完成布局的，每个都有自己的专门用法

标准流
可以让盒子上下排列或者左右排列的，垂直的块级盒子就用标准流布局
浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局

四.CSS3的新特性-过渡

过度变化：是一个状态渐渐的过渡到另一个状态，经常和：hover一起搭配使用。
过渡使用口决：谁过渡给谁加

transition：变化的属性 花费时间 运动时间 何时开始;

属性：想要变化的CSS属性，宽度高度背景颜色内外边距都可以。如果想要多个属性都变化，属性写all就可以了
花费时间：单位是秒（必须写单位）比如0.5s
运动曲线：默认是ease（可以省略）
何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s(可以省略)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* transition: 变化的属性 花费时间 运动时间 何时开始; */
        /* 单个变化属性 */
        /* transition: width 0.5s ease 0.5s; */
        /* 如果想要写多个属性,利用逗号进行分割 */
        /* transition: width 0.5s ease 0.5s, height 0.5s ease 0.5s; */
        /* transition: width 0.5s, height 0.5s; */
        /* 如果想要多个属性都变化，属性写all就可以了 */
        transition: all 0.5s;
      }
      div:hover {
        width: 400px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

进度条案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>进度条案例</title>
    <style>
      .bar {
        width: 150px;
        height: 15px;
        border: 1px solid red;
        border-radius: 7px;
        padding: 1px;
      }
      .bar_in {
        width: 50%;
        height: 100%;
        background-color: red;
        transition: all 0.7s;
      }
      .bar:hover .bar_in {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="bar">
      <div class="bar_in"></div>
    </div>
  </body>
</html>
</title>
    <style>
      .bar {
        width: 150px;
        height: 15px;
        border: 1px solid red;
        border-radius: 7px;
        padding: 1px;
      }
      .bar_in {
        width: 50%;
        height: 100%;
        background-color: red;
        transition: all 0.7s;
      }
      .bar:hover .bar_in {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="bar">
      <div class="bar_in"></div>
    </div>
  </body>
</html>

仿3D 凸起效果

<div class="box">
    <span>CHINA</span>
</div>

body {
    background-color: rgb(245, 245, 245);
}

div.box {
    width:  200px;
    height: 325px;
    background-color: #fff;

    /*过渡效果*/
    transition: all .25s linear;

    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}
div.box span {
    color: #ff0000;
    letter-spacing: 5px;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;

    transition: all .25s linear;
}

div.box:hover {
    transform: translateY(-1px);
    box-shadow: 2px 2px 10px 2px #808080;
}
div.box:hover > span {
    font-size: 35px;
}

五.2D转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果

5.1 移动

transform:translate(x,y);
transform: translateX(n);
transform:translateY(n);

重点：

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点就是不会影响其他元素的位置
translate中的百分比单位是相对于自身元素的translate：（50%，50%）
对行内标签没有效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>进度条案例</title>
    <style>
        /* 移动盒子的位置：定位 盒子的外边距 2d 转换移动 */
      div {
        width: 200px;
        height: 200px;
       background-color: pink;
        /* x就是x轴上移动的位置，y就是y轴上移动的位置 中间用逗号分隔 */
        /* transform: translate(x,y); */
        transform: translate(100px,100px);
        /* 如果我们只是移动x坐标 */
        /* transform: translate(100px,0px); */
        /* 可以分开写 */
        /* transform: translateX(100px); */
        /* 如果我们只是移动y坐标 */
         /* transform: translate(100px,0px); */
         /* transform: translateY(100px); */
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>让盒子实现水平和垂直居中</title>
    <style>
      div {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
        /* 我们translate里面的参数是可以用% ，移动的距离就是盒子自身的宽度或者高度来对比的 */
        /* 这里的50%就是50px因为盒子宽度是100px */
        /* transform: translateX(50%); */
      }
      p {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        background-color: purple;
        /* margin-top: -100px;
        margin-left: -100px; */
        /* transform: translate(-50%, -50%);盒子往上走自己高度的一半宽度的一半 */
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

5.2旋转

2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转

transform：rotate（度数）；

重点：

rotate里面跟度数，单位是deg，比如rotate（45deg）
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

5.3转换中心点

可以设置元素转换的中心点

transform- origin：x y;

重点

注意后面的参数x和y用空格隔开
XY默认转换的中心点是元素的中心点（50% 50%）
还可以x y设置像素或者方位名词（top bottom left center）

5.4缩放

可以放大和缩小

transform：scale（x,y）;

注意点：

注意其中x y用逗号分隔
transform：scale（1，1）；：宽高都放大一倍，相对于没有放大
transform：scale（2，2）；：宽和高都放大了2倍
transform：scale（2）；：只写一个参数，相当于scale（2，2）
transform：scale（0.5，0.5）；：缩小
scale缩放的最大优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

5.4 2D转换综合写法

transform：translate（） rotate（） scale（）

其顺序会影响转换的效果（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记得要将位移放到最前

六. 动画

动画可以实现更多的变化，更多的控制，连续自动播放等效果

6.1基本使用

先定义动画
再使用（调用）动画

用key frames定义动画（类似定义类选择器）

@keyframes 动画名称{
   0%{
       Width:100px;
   }
   100%{
       Width:200px;
   }
}

元素使用动画

div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/*调用动画 */
animation-name ：动画名称;
/*持续时间 */
animation-duration：持续时间；

0%是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS 样式，就能创建由当前样式逐渐改为新样式的动面效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式、任意多的次数。
用百分比来规定变化发生的时间，或用关键词"from”和“to’，等同于 0%和 100%。

6.2动画常用属性

属性	含义
@keyframes	定义动画
animation	所有动画属性的简写属性，除了animation-play-state属性。
animation-name（必须写）	规定@keyframes动画的名称。
animation-duration（必须写）	规定动画完成一个周期所花费的秒或毫秒，默认是0。
animation-timing-function	规定动画的速度曲线，默认是"ease"。
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite（循环）
animation-direction	规定动画是否在下一-周期逆向播放，默认是"normal ",alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"paused"（暂停）。
animation-fill-mode	规定动画结束后状态,保持forwards，回到起始backwards

动画简写属性
animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态


animation: myfirst 5s 1inear 2s infinite alternate;

简写属性里面不包含 animation-play-state；
暂停动画：animation-play-state： puased; 经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来：animation-direction ： alternate；
盒子动画结束后，停在结束位置：animation-fill-mode : forwards；

animation-timing-tunction ：规定动画的速度曲线，默认是"ease’

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps0	指定了时间函数中的间隔数量（步长）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大数据焦点图</title>
    <style>
      .map {
        position: relative;
        width: 747px;
        height: 616px;
        background-color: darkgray;
        margin: 0 auto;
      }
      .city {
        position: absolute;
        top: 227px;
        right: 193px;
        color: #fff;
      }
      .dotted {
        width: 8px;
        height: 8px;
        background-color: #09f;
        border-radius: 50%;
      }
      .city div[class^="pulse"] {
        /* 保证小波纹垂直水平居中 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        box-shadow: 0 0 12px #009dfd;
        border-radius: 50%;
        animation: pulse 1.2s linear infinite;
      }
      .city div.pulse2 {
        animation-delay: 0.4s;
      }
      .city div.pulse3 {
        animation-delay: 0.8s;
      }
      @keyframes pulse {
        0% {
        }
        70% {
          width: 40px;
          height: 40px;
          opacity: 1;
        }
        100% {
          width: 70px;
          height: 70px;
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="map">
      <div class="city">
        <div class="dotted"></div>
        <div class="pulse1"></div>
        <div class="pulse2"></div>
        <div class="pulse3"></div>
      </div>
    </div>
  </body>
</html>