search

博客列表 >盒模型所有常用属性 以及一些实例

盒模型所有常用属性 以及一些实例

刹那永恒个人博客
刹那永恒个人博客原创
2020年06月22日 14:17:02885浏览

1.盒模型的常用属性

  • 宽度 width: 200px;
  • 高度 height: 200px;
  • 内边距 padding: 10px;
  • 背景色 background-color: cadetblue;
  • 边框 border: 1px solid #000;
  • 规定背景的绘制区域background-clip: content-box;
    1.       /* border-box    背景被裁剪到边框盒。 */
    2.       /* padding-box    背景被裁剪到内边距框。 */
    3.       /* content-box    背景被裁剪到内容框。 */
  • 外边距 margin: 1px 2px 3px 4px 顺序为上右下左

  • 定位 position

    • 相对定位position:relative,生成相对定位的元素，相对于其正常位置进行定位。
      因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
    • 绝对定位position:absolute，相对于 static 定位以外的第一个父元素进行定位。
      元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    • 固定定位 position: fixed;相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    • position:static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

  • 实际测试案例

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8" />
    5.   <style>
    6.     .box {
    7.       /* 元素的宽度 */
    8.       width: 200px;
    9.       /* 元素的高度 */
    10.       height: 200px;
    11.     }
    12.     .box-1 {
    13.       /* 内边距 */
    14.       padding: 10px;
    15.       /* 背景色 */
    16.       background-color: cadetblue;
    17.       /* 边框 */
    18.       border: 1px solid #000;
    19.       /* 规定背景的绘制区域： */
    20.       /* border-box    背景被裁剪到边框盒。 */
    21.       /* padding-box    背景被裁剪到内边距框。 */
    22.       /* content-box    背景被裁剪到内容框。 */
    23.       background-clip: content-box;
    24.       /* 设置下外边距 */
    25.       margin-bottom: 10px;
    26.     }
    27.     .box-2 {
    28.       /* 内边距 */
    29.       padding: 10px;
    30.       /* 背景色 */
    31.       background-color: chartreuse;
    32.       /* 边框 */
    33.       border: 1px solid #000;
    34.       /* 规定背景的绘制区域： */
    35.       /* border-box    背景被裁剪到边框盒。 */
    36.       /* padding-box    背景被裁剪到内边距框。 */
    37.       /* content-box    背景被裁剪到内容框。 */
    38.       background-clip: content-box;
    39.       margin-bottom: 10px;
    40.     }
    41.     .boxx {
    42.       width: 200px;
    43.       height: 200px;
    44.       background-color: rgb(218, 8, 8);
    45.       /* 相对定位 */
    46.       position: relative;
    47.     }
    48.     .box3 {
    49.       height: 100px;
    50.       width: 100px;
    51.       background: cornflowerblue;
    52.       /* 绝对定位 */
    53.       position: absolute;
    54.       top: 20px;
    55.       left: 15px;
    56.     }
    57.     .guding {
    58.       width: 110px;
    59.       height: 110px;
    60.       background-color: fuchsia;
    61.       /* 固定定位 */
    62.       position: fixed;
    63.       top: 50px;
    64.       left: 500px;
    65.     }
    66.   </style>
    67.   <title>06.盒模型常用属性</title>
    68. </head>
    69. <body>
    70.   <div class="box box-1"></div>
    71.   <div class="box box-2"></div>
    72.   <hr />
    73.   <div class="boxx">
    74.     <div class="box3"></div>
    75.   </div>
    76.   <hr />
    77.   <div class="guding"></div>
    78. </body>
    79. </html>

    2. 理解元素大小的重新计算： box-sizing的用法，并举例

  • 默认情况下，元素的宽度与高度计算方式如下：
    width(宽) + padding(内边距) + border(边框) = 元素实际宽度
    height(高) + padding(内边距) + border(边框) = 元素实际高度

  • 在盒子内无内容时，这么计算是没有问题的，但是当盒子内的padding值改变时，盒子的大小也跟着改变了。

示例如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>用户自定义元素大小的计算方式</title>
  7.     <style>
  8.       .box {
  9.         width: 200px;
  10.         height: 200px;
  11.         border: 3px solid #000;
  12.         padding: 10px;
  13.         background-color: pink;
  14.         background-clip: content-box;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div class="box"></div>
  20.   </body>
  21. </html>
  • 效果如下
    • 这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。
      box-sizing 属性可以被用来调整这些表现:
      content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
      border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。
      示例如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>用户自定义元素大小的计算方式</title>
  7.     <style>
  8.       .box {
  9.         width: 200px;
  10.         height: 200px;
  11.         border: 3px solid #000;
  12.         padding: 10px;
  13.         background-color: red;
  14.         /* 属性规定背景的绘制区域为盒子部内部 */
  15.         background-clip: content-box;
  16.         /* 重新计算盒大小，宽和高只用在内容区部分 */
  17.         box-sizing: content-box;
  18.         /* 将边框包含在内容区的宽和高 */
  19.         box-sizing: border-box;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="box"></div>
  25.   </body>
  26. </html>

元素的水平于垂直对齐

1.文本在div中的水平与垂直对齐

  • 文本的水平居中可以使用 text-align: center;
  • 文本的垂直居中可以使用line-height 来设置
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>盒子水平居中于垂直居中</title>
  7.     <style>
  8.       .box {
  9.         width: 200px;
  10.         height: 200px;
  11.         background-color: #999;
  12.         /* 设置相对定位属性 */
  13.         position: relative;
  14.       }
  15.       .box .box1 {
  16.         width: 150px;
  17.         height: 150px;
  18.         background-color: coral;
  19.         /* 水平居中 */
  20.         margin: auto;
  21.         /* 设置绝对定位属性 */
  22.         position: absolute;
  23.         /* 左上上角开始 */
  24.         top: 0;
  25.         left: 0;
  26.         /* 右下角结束 */
  27.         right: 0;
  28.         bottom: 0;
  29.         /* 设置文字水平居中 */
  30.         text-align: center;
  31.         /* 设置文字在盒子中的垂直居中-等于盒子的高度*/
  32.         line-height: 150px;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="box">
  38.       <div class="box1">你好我是box1</div>
  39.     </div>
  40.   </body>
  41. </html>
  • 效果如下

    2.块级元素的居中与对齐

  • 块级元素的水平对齐通常使用margin:auto;让浏览器自动计算左右外边距来实现水平居中。

    • 水平居中对齐
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <style>
    7.    .box {
    8.      height: 300px;
    9.      width: 300px;
    10.      background-color: seagreen;
    11.    }
    12.    .box1 {
    13.      height: 100px;
    14.      width: 100px;
    15.      background-color: pink;
    16.      margin: auto;
    17.    }
    18.  </style>
    19.  <title>块级元素的水平对齐</title>
    20. </head>
    21. <body>
    22.  <div class="box">
    23.    <div class="box1"></div>
    24.  </div>
    25. </body>
    26. </html>

  • 垂直居中对齐，要实现垂直居中，我们可以通过定位来实现。通过设置父级容器的top、bottom、left、right值为0

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <style>
    7.    .box {
    8.      height: 300px;
    9.      width: 300px;
    10.      background-color: seagreen;
    11.      position: relative;
    12.    }
    13.    .box1 {
    14.      height: 100px;
    15.      width: 100px;
    16.      background-color: pink;
    17.      margin: auto;
    18.      position: absolute;
    19.      left: 0;
    20.      top: 0;
    21.      right: 0;
    22.      bottom: 0;
    23.    }
    24.  </style>
    25.  <title>块级元素的垂直对齐</title>
    26. </head>
    27. <body>
    28.  <div class="box">
    29.    <div class="box1"></div>
    30.  </div>
    31. </body>
    32. </html>

  • 总结 打不好基础都白玩，要经常写写写

上一条：信息表以及注册表下一条：PHP7.3.x连接sqlserver2008数据库
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多