欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

网页布局盒子(box)相关属性和盒子居中

程序员文章站 2022-03-01 17:23:02
...

网页布局中盒子的相关属性：

一、盒子的基础属性：

1、width和height：设置盒子的宽度和高度：常见单位：px,em,rem,vh/vm等
2、background:color（设置背景颜色),image(设置背景图片)，repeat(设置背景图片如何重复)，clip(设置背景图片剪裁)，position|size(设置图片位置，和尺寸大小)，attachment(设置图片是否背景固定和滚动：值有fixed,scroll,local)
3、border(top|right|bottom|left):width style color（px,solid|double|dashed|dotted，颜色）
4、box-sizing:设置盒子的区域，值有：content-box（那内容为盒子大小基准）、border-box(以盒子宽高为盒子大小)
5、margin|padding:设置盒子的内外边距
6、overflow:设置内容溢出盒子的处理方法，常见值有auto|scroll|hidden|默认值visible
7、max|min-width|height:最小高度和最大高度
8、opacity:设置盒子的透明度：0-1
9、calc():CSS样式计算函数

二、盒子居中常见的几种方法：

常见的居中分为行内元素居中和块级元素居中：
1、行内元素居中：text-align:center;
2、行内元素垂直居中：line-height:值等于父级高度即可
3、块级元素居中：
方案一：容器不设置高度，利用padding挤压垂直居中，内容通过margin设置水平居中；
方案二：利用position位置属性，把top|left|bottom|right这个四个属性设置为0；再利用margin:auto;把盒子中的元素居中；

三、盒子居中小案例：

1、代码

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. 

  7.     <title>CSS布局-盒子居中小案例</title>
    8. 

  8.     <style>
    9. 

  9.         *{
    10. 

  10.             margin:0;
    11. 

  11.             padding: 0;
    12. 

  12.             box-sizing:border-box;
    13. 

  13.         }
    14. 

    15. 

  15.         .box{
    16. 

  16.             background-color: lightcoral;
    17. 

  17.             width: 200px;
    18. 

  18.             height: 200px;
    19. 

  19.             opacity:1;
    20. 

  20.             /* 控制容器的行内元素的居中 */
    21. 

  21.             text-align: center;
    22. 

  22.             line-height: 200px; 
    23. 

  23.             /* 控制盒子居中 */
    24. 

  24.             margin:auto;
    25. 

  25.             position: absolute;
    26. 

  26.             top:0;
    27. 

  27.             right: 0;
    28. 

  28.             bottom: 0;
    29. 

  29.             left:0;
    30. 

    31. 

    32. 

  32.         }
    33. 

  33.         .box span{
    34. 

  34.             background-color: lightblue;
    35. 

  35.         }
    36. 

  36.         /* 利用marin和padding把盒子居中 */
    37. 

  37.         .box1{
    38. 

  38.             border: 2px solid #008000;
    39. 

  39.             padding: 40px;
    40. 

  40.             /* padding: 40px; */
    41. 

  41.             background-color: olive;
    42. 

  42.         }
    43. 

  43.         .small{
    44. 

  44.             width: 100px;
    45. 

  45.             height: 100px;
    46. 

  46.             background-color: #42B983;
    47. 

  47.             margin: 0 auto;
    48. 

  48.         }
    49. 

  49.     </style>
    50. 

  50. </head>
    51. 

  51. <body>
    52. 

  52.     <div class="box">
    53. 

  53.         <span>我行内元素</span>
    54. 

  54.     </div>
    55. 

  55.     <div class="box1">
    56. 

  56.         <div class="small">
    57. 

    58. 

  58.         </div>
    59. 

  59.     </div>
    60. 

  60. </body>
    61. 

  61. </html>
    62.

2、运行结果
网页布局盒子(box)相关属性和盒子居中

上一篇： Think PHP框架清除运行时缓存（php文件目录递归删除）

下一篇： ThinkPHP的使用笔记：验证码的使用和session的使用

推荐阅读