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

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

乐作人生
乐作人生原创
2020年08月19日 00:32:16544浏览
  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>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议