博客列表 >《盒模型大小属性、元素对齐方式》20201218

《盒模型大小属性、元素对齐方式》20201218

杨凡的博客
杨凡的博客原创
2020年12月21日 16:12:15554浏览

盒子的大小及属性

内边距及边框

  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. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box">
  24. <span>PHP中文网</span>
  25. </div>
  26. </body>
  27. </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方式的水平垂直居中

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