Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 《盒模型大小属性、元素对齐方式》20201218
Blogger Information
Blog 26
fans 1
comment 1
visits 19665
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
《盒模型大小属性、元素对齐方式》20201218
杨凡的博客
Original
553 people have browsed it

盒子的大小及属性

内边距及边框

  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.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         :root{
  13.             /* 设置网页根节点字号像素 */
  14.             font-size: 20px;
  15.         }
  16.         .box{
  17.             /* 盒宽 */
  18.             width: 20em;
  19.             /* 盒高 */
  20.             height: 15em;
  21.             /* 背景色 */
  22.             background-color: pink;
  23.         }
  24.         .box{
  25.             /* padding内边距 */
  26.             padding: 1em;
  27.             /* border边框线 solid实线 green边框线颜色绿色*/
  28.             border: 2px solid green;
  29.             /* 背景只裁切到内容区 让padding不被盒子内容覆盖*/
  30.             background-clip: content-box;
  31.         }
  32.         /* 使盒子大小不受宽高以外的因素影响 */
  33.         /* box-sizing 是否计算盒子padding和border的属性*/
  34.         .box{
  35.             box-sizing: border-box;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <div class="box"></div>
  41. </body>
  42. </html>

外边距

  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.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         :root{
  13.             /* 设置网页根节点字号像素 */
  14.             font-size: 12px;
  15.         }
  16.         .box{
  17.             /* 盒宽 */
  18.             width: 10em;
  19.             /* 盒高 */
  20.             height: 10em;
  21.             /* 背景色 */
  22.             background-color: yellow;
  23.         }
  24.         .box{
  25.             /* padding内边距 */
  26.             padding: 1em;
  27.             /* border边框线 solid实线 green边框线颜色绿色*/
  28.             border: 2px solid red;
  29.             /* 背景只裁切到内容区 让padding不被盒子内容覆盖*/
  30.             background-clip: content-box;
  31.         }
  32.         /* 使盒子大小不受宽高以外的因素影响 */
  33.         /* box-sizing 是否计算盒子padding和border的属性*/
  34.         .box{
  35.             box-sizing: border-box;
  36.         }
  37.         /* 水平方向margin累加；垂直方向margin折叠，margin大的覆盖margin小的  */
  38.         .box:first-of-type{
  39.             margin: 2em;
  40.         }
  41.         .box:last-of-type{
  42.             margin: 3em;
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.     <div class="box"></div>
  48.     <div class="box"></div>
  49. </body>
  50. </html>

**总结：

  1. padding是用来设置盒子的内边距，用来撑开盒子边框与内容的区域；
  2. border是用来设置盒子的边框线，可以通过宽度、线的类型、颜色来控制边框；
  3. 盒子最终的宽高默认是通过设置的盒子宽高+盒子的内边距+边框宽度来计算的，box-sizing: border-box;的设置，通过压缩盒子的宽高，将内边距和边框线计算在内，不会撑开原有盒子的宽高
  4. 水平方向margin累加；垂直方向margin折叠，margin大的覆盖margin小的**

元素对齐方式

行内元素的水平且垂直居中

  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.         /* 行内元素的水平且垂直居中 */
  9.         .box{
  10.             width: 15em;
  11.             height: 15em;
  12.             border: 1px solid #000;
  13.             box-sizing: border-box;
  14.         }
  15.         .box{
  16.              /* 文本水平居中 */
  17.             text-align: center;
  18.             line-height: 15em;
  19.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <span>PHP中文网</span>
  26.     </div>
  27. </body>
  28. </html>

总结：通过text-align可设置行内元素内容水平居中，通过line-height设置成与父元素div相同高度即可实现垂直居中

块级元素的水平且垂直居中

  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.         /* 行内元素的水平且垂直居中 */
  9.         .box{
  10.             width: 15em;
  11.             height: 15em;
  12.             border: 1px solid #000;
  13.             box-sizing: border-box;
  14.         }
  15.         .box{
  16.            padding: 5em;
  17.         }
  18.         .box>div{
  19.             width: 5em;
  20.             height: 5em;
  21.             background-color: yellowgreen;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="box">
  27.         <div>PHP中文网</div>
  28.     </div>
  29. </body>
  30. </html>

总结：通过 box-sizing: border-box;挤压设置和padding的挤压形成padding方式的水平垂直居中

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post