浮动

" class="reference-link">

`<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动与浮动原理</title>
    <style>
      body {
        border: 5px solid #000;
        padding: 20px;
      }
      .box {
        width: 200px;
        height: 200px;
        background: rgb(189, 20, 20);
      }
      .box1 {
        width: 200px;
        height: 200px;
        background: rgb(61, 153, 25);
        float: left;
      }
      .box2 {
        width: 220px;
        height: 220px;
        background: rgb(82, 42, 175);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>`
--------

浮动的知识点：

1.box2浮动之后从文档流中脱离出来(意思就是会释放它原来在文档流中占据的空间)
2.浮动元素浮动之后，它后面的元素会自动填充它让出来空间的大小
3.浮动元素只会影响它后面的元素布局，对前面没有影响
4.行内元素用于最终内容的载体，不能充当容器/父级，不能设置宽高也是无效的
5.任何元素，一旦浮动都自动转为块级元素
6.不让它收到前面的浮动元素影响，可以增加代码：clear:both
7.浮动元素只能水平方向浮动
8.浮动元素的浮动边界仅限于内容区

浮动元素的塌陷与解决方案：

解决方案1：给父元素添加一个高度，但是此方法无法自适应.
解决方案2:把父元素浮动起来 ,会产生传导效应，级数越多很麻烦.
解决方案3: 添加一个专用元素用于清浮动,不建议
解决方案4：添加一个伪元素来解决，也可以
解决方案5: 最简单的解决方案,加overflow属性（hidden/auto）：
.container{overflow:hidden;}

使用定位与浮动完成一个三列经典布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用浮动完成一个三列布局</title>
    <style>
      /* 初始化 */
      * {
        margin: 0;
        padding: 0;
        /* 盒子改变下到边框级 */
        box-sizing: border-box;
      }
      li {
        /* li有样式,把前面的小黑点去掉 */
        list-style: none;
      }
      a {
        /* A标签的下划线去掉 */
        text-decoration: none;
        color: #666;
      }
      /* 页眉与页脚 */
      .header,
      .footer {
        height: 40px;
        background-color: darkcyan;
      }
      .content {
        width: 960px;
        margin: auto;
      }
      .content ul li {
        float: left;
        line-height: 40px;
        padding: 0 15px;
      }
      /* 鼠标悬停样式:背景色 */
      .content ul li:hover {
        background-color: rgb(231, 180, 13);
      }
      /* 页脚 */
      .content p {
        text-align: center;
        line-height: 40px;
      }
      /* 主体用定位来做 */
      .container {
        width: 960px;
        margin: px auto;
        min-height: 600px;
        /* 阻止浮动元素塌陷 */
        overflow: hidden;
      }
      .container > .left {
        width: 200px;
        background-color: rgb(141, 112, 15);
        min-height: 600px;
        float: left;
      }
      .container > .right {
        width: 200px;
        background-color: rgb(146, 211, 255);
        min-height: 600px;
        float: right;
      }
      .container > .main {
        background: rgb(122, 58, 131);
        min-height: 600px;
        width: 540px;
        float: left;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 页眉 -->
    <div class="header">
      <div class="content">
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">会场</a></li>
          <li><a href="">售后</a></li>
        </ul>
      </div>
    </div>
    <!-- 主体 -->
    <div class="container">
      <div class="left">左侧</div>
      <div class="main">内容</div>
      <div class="right">右侧</div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <div class="content">
        <p>某某科技有限公司</p>
      </div>
    </div>
  </body>
</html>

圣杯布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>圣杯布局：两头固定，中间自适应</title>
    <style>
      .container {
        border: 5px dashed;
        /* 把所有的元素包起来 */
        overflow: hidden;
      }
      .container > * {
        min-height: 400px;
      }
      /* 左右两侧固定 */
      .container > .left,
      .container > .right {
        width: 200px;
        background-color: rgb(236, 178, 53);
      }
      /* 中间样式 */
      .container > .main {
        width: 100%;
        background-color: rgb(72, 176, 218);
      }
      .container > * {
        float: left;
      }
      /* 使用内边距将左右两边的位置挤出来 */
      .container {
        padding-left: 200px;
        padding-right: 200px;
      }
      .container > .left {
        margin-left: -100%;
        /* 使用相对定位将他复位 */
        position: relative;
        top: 0;
        right: 200px;
      }
      .container > .right {
        margin-left: -200px;
        position: relative;
        top: 0;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 圣杯布局要求主体内容优先渲染 -->
      <div class="main">内容区</div>
      <div class="left">左侧</div>
      <div class="right">右侧</div>
    </div>
  </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：是新生吗? 作业进度太慢

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php学习第一天总结

2020-06-11 14:40:28