search

博客列表 >盒模型、相对定位、绝对定位、圣杯布局

盒模型、相对定位、绝对定位、圣杯布局

乐作人生
乐作人生原创
2020年08月19日 00:32:16551浏览
  1. 盒模型的大小与位置的设置与计算
    1. <style>
    2.  .container {
    3.    border: 1px solid #f00;
    4.    margin-bottom: 20px;
    5.  }
    6.  .container .box1 {
    7.    background-color: #ddd;
    8.    width: 100px;
    9.    height: 100px;
    10.    /* 设置内边距，距离box1黄色边框的距离；内外边距大小设置规律：上(top)、右(right)、下(bottom)、左(left) */
    11.    padding: 10px;
    12.    /* 设置外边距；距离父级元素：container红色边框的距离 */
    13.    margin: 20px 10px;
    14.    /* 设置边框 */
    15.    border: 5px dashed yellow;
    16.  }
    17. </style>
    18. <body>
    19.  <div class="container">
    20.    <div class="box1"></div>
    21.  </div>
    22. </body>
  2. box-sizing解决了什么问题,实例演示
    1. <style>
    2.  .container {
    3.    border: 1px solid #f00;
    4.    margin-bottom: 20px;
    5.  }
    6.  .container .box1 {
    7.    background-color: #ddd;
    8.    width: 100px;
    9.    height: 100px;
    10.    /* 设置内边距，距离box1黄色边框的距离；内外边距大小设置规律：上(top)、右(right)、下(bottom)、左(left) */
    11.    padding: 10px;
    12.    /* 设置外边距；距离父级元素：container红色边框的距离 */
    13.    margin: 20px 10px;
    14.    /* 设置边框 */
    15.    border: 5px dashed yellow;
    16.    /* 设置为border-box：盒子的大小始终等于本身设置的大小，但盒子的内容区会被压缩；盒子大小等于内边距和盒子边框大小之和 */
    17.    box-sizing: border-box;
    18.  }
    19. </style>
    20. <body>
    21.  <div class="container">
    22.    <div class="box1"></div>
    23.  </div>
    24. </body>
  3. 绝对定位与相对定位的区别与应用,实例演示

  4. 固定定位与绝对定位的区别是什么,实例演示

    1. <style>
    2.  .main {
    3.    margin-bottom: 300px;
    4.  }
    5.  .main .item1 {
    6.    background-color: aquamarine;
    7.    width: 200px;
    8.    height: 200px;
    9.    padding: 10px;
    10.    /* 绝对定位：一定要有一个定位父级，如果没有就相对于当前窗口进行定位（body/html） */
    11.    position: absolute;
    12.    top: 0;
    13.    left: 40px;
    14.  }
    15.  .main .item2 {
    16.    background-color: bisque;
    17.    width: 150px;
    18.    height: 100px;
    19.    /* 相对定位：总是相对于自己的当前位置进行定位 */
    20.    position: relative;
    21.    top: 10px;
    22.    left: 0;
    23.  }
    24.  .main .item3 {
    25.    background-color: aqua;
    26.    width: 100px;
    27.    /* 固定定位：始终将当前窗口做为定位父级，如客服按钮，无论页面如何滑动，按钮始终在窗口右下角的固定位置 */
    28.    position: fixed;
    29.    bottom: 10px;
    30.    right: 10px;
    31.    padding: 8px 10px;
    32.    text-align: center;
    33.  }
    34. </style>
    35. <body>
    36.  <div class="main">
    37.    <div class="item1">
    38.      <div class="item2"></div>
    39.    </div>
    40.    <div class="item3">客服按钮</div>
    41.  </div>
    42. </body>


    绝对定位：一定要有一个定位父级，如果没有就相对于当前窗口进行定位（body/html）;
    相对定位：总是相对于自己的当前位置进行定位；
    固定定位：始终将当前窗口做为定位父级，如客服按钮，无论页面如何滑动，按钮始终在窗口右下角的固定位置。

  5. 为什么垂直居中如此困难, 使用绝对定位如何实现

    1. <style>
    2.  .box {
    3.    margin-top: 200px;
    4.    width: 300px;
    5.    height: 300px;
    6.    background-color: blanchedalmond;
    7.    position: relative;
    8.  }
    9.  .box .box_left {
    10.    background-color: chartreuse;
    11.    width: 50px;
    12.    height: 50px;
    13.    position: absolute;
    14.    /* 定位起点 */
    15.    /* top、left、right、bottom均为0表示使当前元素的定位的上下文充满整个父级容器 */
    16.    top: 0;
    17.    left: 0;
    18.    /* 定位终点 */
    19.    right: 0;
    20.    bottom: 0;
    21.    /* 只水平居中：margin-left:auto;margin-left:auto;只垂直居中：margin-top:auto;margin-bottom:auto； */
    22.    margin: auto;
    23.  }
    24. </style>
    25. <body>
    26.  <div class="box">
    27.    <div class="box_left">盒子1</div>
    28.  </div>
    29. </body>

  6. 使用绝对定位实现二列布局
    1. <style>
    2.  /* 先初始化，将所有的内外边距注释掉 */
    3.  * {
    4.    margin: 0;
    5.    padding: 0;
    6.    box-sizing: border-box;
    7.  }
    8.  a {
    9.    /* 设置a标签下划线 */
    10.    text-decoration: none;
    11.    color: #333;
    12.  }
    13.  /* 设置鼠标滑过及聚焦状态 */
    14.  a:hover,
    15.  a:focus {
    16.    color: #f00;
    17.  }
    18.  .header,
    19.  .footer {
    20.    height: 60px;
    21.    background-color: #dbdbdb;
    22.  }
    23.  .container {
    24.    width: 600px;
    25.    /* 设置水平居中 */
    26.    margin: auto;
    27.    /* 设置垂直居中，line-height的值与父级元素header、footer的高度60px相等 */
    28.    line-height: 60px;
    29.  }
    30.  .container ul li {
    31.    /* 去掉li前面圆点 */
    32.    list-style: none;
    33.    float: left;
    34.    /* 设置li内边距，使两个li之间保持距离 */
    35.    padding: 0 20px;
    36.  }
    37.  /* 设置底部文本水平居中 */
    38.  .container p {
    39.    text-align: center;
    40.    margin: auto;
    41.  }
    42.  .content {
    43.    /* 将中间内容区水平居中 */
    44.    width: 600px;
    45.    margin: 10px auto;
    46.    background-color: #f4f4f4;
    47.    /* 转为定位元素，做为i子元素的定位父级 */
    48.    position: relative;
    49.    /* 设置最小高度，将子元素包住 */
    50.    min-height: 200px;
    51.  }
    52.  .content .left {
    53.    /* 绝对定位，以父级元素左上角为定位起点 */
    54.    position: absolute;
    55.    top: 0;
    56.    left: 0;
    57.    background-color: bisque;
    58.    min-height: 200px;
    59.    width: 200px;
    60.  }
    61.  .content .right {
    62.    /* 绝对定位，以父级元素右上角为定位起点 */
    63.    position: absolute;
    64.    top: 0;
    65.    right: 0;
    66.    background-color: aqua;
    67.    min-height: 200px;
    68.    width: 200px;
    69.  }
    70. </style>
    71. <body>
    72.  <div class="header">
    73.    <div class="container">
    74.      <ul>
    75.        <li><a href="">首页</a></li>
    76.        <li><a href="">产品</a></li>
    77.        <li><a href="">关于我们</a></li>
    78.        <li><a href="">联系我们</a></li>
    79.      </ul>
    80.    </div>
    81.  </div>
    82.  <div class="content">
    83.    <div class="left">左侧内容区</div>
    84.    <div class="right">右侧内容区</div>
    85.  </div>
    86.  <div class="footer">
    87.    <div class="container">
    88.      <p>Copyright © 2020 All Rights Reserved 版权所有 中文网</p>
    89.    </div>
    90.  </div>
    91. </body>
  7. 使用浮动实现三列布局
    1. <style>
    2.  /* 先初始化，将所有的内外边距注释掉 */
    3.  * {
    4.    margin: 0;
    5.    padding: 0;
    6.    /* box-sizing: border-box; */
    7.  }
    8.  a {
    9.    /* 设置a标签下划线 */
    10.    text-decoration: none;
    11.    color: #333;
    12.  }
    13.  /* 设置鼠标滑过及聚焦状态 */
    14.  a:hover,
    15.  a:focus {
    16.    color: #f00;
    17.  }
    18.  .header,
    19.  .footer {
    20.    height: 60px;
    21.    background-color: #dbdbdb;
    22.  }
    23.  .container {
    24.    width: 600px;
    25.    /* 设置水平居中 */
    26.    margin: auto;
    27.    /* 设置垂直居中，line-height的值与父级元素header、footer的高度60px相等 */
    28.    line-height: 60px;
    29.  }
    30.  .container ul li {
    31.    /* 去掉li前面圆点 */
    32.    list-style: none;
    33.    float: left;
    34.    /* 设置li内边距，使两个li之间保持距离 */
    35.    padding: 0 20px;
    36.  }
    37.  /* 设置底部文本水平居中 */
    38.  .container p {
    39.    text-align: center;
    40.    margin: auto;
    41.  }
    42.  .content {
    43.    background-color: #f00;
    44.    width: 600px;
    45.    margin: 10px auto;
    46.    overflow: hidden;
    47.    border: 1px solid #000;
    48.  }
    49.  .content .left,
    50.  .content .right {
    51.    width: 200px;
    52.    min-height: 300px;
    53.    background-color: aqua;
    54.  }
    55.  .content .left {
    56.    /* 设置左侧浮动 */
    57.    float: left;
    58.  }
    59.  .content .right {
    60.    float: right;
    61.  }
    62.  .content .center {
    63.    width: 200px;
    64.    min-height: 300px;
    65.    background-color: chartreuse;
    66.    float: left;
    67.  }
    68. </style>
    69. <body>
    70.  <div class="header">
    71.    <div class="container">
    72.      <ul>
    73.        <li><a href="">首页</a></li>
    74.        <li><a href="">产品</a></li>
    75.        <li><a href="">关于我们</a></li>
    76.        <li><a href="">联系我们</a></li>
    77.      </ul>
    78.    </div>
    79.  </div>
    80.  <div class="content">
    81.    <div class="left">左侧内容区</div>
    82.    <div class="center">中间内容区</div>
    83.    <div class="right">右侧内容区</div>
    84.  </div>
    85.  <div class="footer">
    86.    <div class="container">
    87.      <p>Copyright © 2020 All Rights Reserved 版权所有 中文网</p>
    88.    </div>
    89.  </div>
    90. </body>
  8. 默写出圣杯布局的思想,并用圣杯布局实现三列布局
    1. <style>
    2.  .container {
    3.    border: 3px solid #000;
    4.  }
    5.  .container > * {
    6.    min-height: 300px;
    7.  }
    8.  /* 内容区：默认宽度100%，自适应 */
    9.  .container .content {
    10.    width: 100%;
    11.    background-color: #f00;
    12.  }
    13.  /* 左侧、右侧设置各自的宽度 */
    14.  .container .left,
    15.  .container .right {
    16.    width: 100px;
    17.    background-color: cadetblue;
    18.  }
    19.  /* 圣杯容器中的所有子元素全部浮动 */
    20.  .container * {
    21.    float: left;
    22.  }
    23.  /* 使父级容器包含住浮动的子元素 */
    24.  .container {
    25.    overflow: hidden;
    26.  }
    27.  /* 将左侧部分放在内容区的左侧 */
    28.  .container .left {
    29.    margin-left: -100%;
    30.  }
    31.  /* 将右侧部分放在内容区的右侧 */
    32.  .container .right {
    33.    margin-left: -100px;
    34.  }
    35.  .container {
    36.    padding: 0 100px;
    37.  }
    38.  .container .left {
    39.    position: relative;
    40.    right: 100px;
    41.  }
    42.  .container .right {
    43.    position: relative;
    44.    left: 100px;
    45.  }
    46.  /* 圣杯布局的步骤：
    47.  1、内容区优先进行渲染，即将content元素放在前面；
    48.  2、主体内容区必须自适应，占据整个容器的全部空间，即宽度设为width:100%;
    49.  3、内容区、左侧、右侧全部设为左浮动（float:left;）；
    50.  4、通过给左（margin-left:-100%；）、右（margin-left:-右侧元素自己的宽度；）两侧设置margin的负值将左侧、右侧元素回到容器中的正确位置；
    51.  5、给容器（container）设置左右两侧的padding值（padding:0 宽度值；）；宽度与左右两侧的宽度相同，即将左右区域挤出来；
    52.  6、通过给左侧、右侧进行相对定位（position: relative;），左侧（right: 100px;）、右侧（left: 100px;），将它们放到正确位置上。 */
    53. </style>
    54. <body>
    55.  <div class="container">
    56.    <div class="content">
    57.      内容区青海是我很向往的地方，走过那么多的城市，青海依旧很能给我宁静感！
    58.      上个月，再次燃起去青海的念头，于是二话不说拉上闺蜜和朋友，来一次走就走的旅行！青海是我很向往的地方，走过那么多的城市，青海依旧很能给我宁静感！
    59.      上个月，再次燃起去青海的念头，于是二话不说拉上闺蜜和朋友，来一次走就走的旅行！青海是我很向往的地方，走过那么多的城市，青海依旧很能给我宁静感！
    60.      上个月，再次燃起去青海的念头，于是二话不说拉上闺蜜和朋友，来一次走就走的旅行！青海是我很向往的地方，走过那么多的城市，青海依旧很能给我宁静感！
    61.      上个月，再次燃起去青海的念头，于是二话不说拉上闺蜜和朋友，来一次走就走的旅行！青海是我很向往的地方，走过那么多的城市，青海依旧很能给我宁静感！
    62.      上个月，再次燃起去青海的念头，于是二话不说拉上闺蜜和朋友，来一次走就走的旅行！青海是我很向往的地方，走过那么多的城市，青海依旧很能给我宁静感！
    63.      上个月，再次燃起去青海的念头，于是二话不说拉上闺蜜和朋友，来一次走就走的旅行！青海是我很向往的地方，走过那么多的城市，青海依旧很能给我宁静感！
    64.    </div>
    65.    <div class="left">左侧</div>
    66.    <div class="right">右侧</div>
    67.  </div>
    68. </body>
上一条：php.cn_week5_day1作业提交【php变量常量过滤器】下一条：【Mysql】使用宝塔面板搭建并管理数据库服务器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议