PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > CSS盒模型以及CSS定位

CSS盒模型以及CSS定位

Blastix Riotz
Blastix Riotz 原创
2021年03月26日 16:20:20 606浏览

盒模型

所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>盒模型</title>
  8. <style>
  9. /* 初始化 */
  10. * {
  11. margin: 0;
  12. padding: 0:;
  13. box-sizing: border-box;
  14. }
  15. root{
  16. font-size: 10px;
  17. }
  18. .box {
  19. font-size: 30px;
  20. /* width: 12.5em;
  21. height: 12.5em; */
  22. width: 20rem;
  23. height: 20rem;
  24. border: 2px solid;
  25. background: skyblue;
  26. /* padding: 上 右 下 左;顺时针顺序 */
  27. padding: 10px 5px 5px 10px;
  28. box-sizing: content-box;
  29. background-clip: content-box;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="box">box</div>
  35. </body>
  36. </html>


em:根据元素的上下文来确定他的值
rem:根据根元素的字号来设置
配合root{font-size: 10px;}标准让盒子大小易于计算


相对定位与绝对定位

  • 默认:静态定位,就是没有定位position: static;
  • 相对定位:相对于它在文档流中的原始位置进行定位position: relative;

    实例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>定位</title>
    8. <style>
    9. .box {
    10. width: 20em;
    11. height: 15em;
    12. background-color: lightseagreen;
    13. /* 相对定位 */
    14. position: relative;
    15. top: 5em;
    16. left: 4em;
    17. }
    18. </style>
    19. </head>
    20. <body>
    21. <div class="box"></div>
    22. <h2>Hellow World</h2>
    23. </body>
    24. </html>
  • 绝对定位:脱离了文档流,相对于html来进行定位;当有定位父级时,相对于定位父级来定位position: absolute;

    实例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>定位</title>
    8. <style>
    9. .box {
    10. width: 20em;
    11. height: 15em;
    12. background-color: lightseagreen;
    13. /* 绝对定位 */
    14. position: absolute;
    15. top: 5em;
    16. left: 4em;
    17. }
    18. .parent {
    19. border: 1px solid #000;
    20. position: relative;
    21. top:4em;
    22. left: 4em;
    23. min-height: 30em;
    24. }
    25. </style>
    26. </head>
    27. <body>
    28. <div class="parent">
    29. <!-- 父级定位元素 -->
    30. <div class="box"></div>
    31. </div>
    32. </body>
    33. </html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议