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

博客列表 > 盒子模型与盒子对齐

盒子模型与盒子对齐

豌豆君
豌豆君 原创
2021年01月31日 14:05:52 1055浏览

盒子大小 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. :root {
  9. font-size: 10px;
  10. }
  11. .box {
  12. /* 宽 */
  13. width: 20em;
  14. /* 高 */
  15. height: 15em;
  16. /* 背景色 */
  17. background-color: blueviolet;
  18. }
  19. /* 此时,盒子的大小,宽200px,高150px */
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box"></div>
  24. </body>
  25. </html>

影响盒子大小的因素 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. :root {
  9. font-size: 10px;
  10. }
  11. .box {
  12. /* 宽 */
  13. width: 20em;
  14. /* 高 */
  15. height: 15em;
  16. /* 背景色 */
  17. background-color: blueviolet;
  18. }
  19. /* 给盒子添加padding(内边距),border(边框) */
  20. .box {
  21. padding: 1em;
  22. border: 2px solid;
  23. /* 将背景色裁切到内容区,让padding可视化 */
  24. background-clip: content-box;
  25. }
  26. /* 盒子尺寸的计算公式:width/height + padding*2 + border*2 */
  27. /* 宽度:200 + 10*2 + 2*2 = 224px */
  28. /* 高度:150 + 10*2 + 2*2 = 174px */
  29. /* 大家考虑一下,这种计算方式是否直观,方便? */
  30. /* width: 200px; height: 150px; 站在用户角度是希望这个值是一个固定值 */
  31. /* 使盒子大小不受width/height之外属性的影响(不受padding,border影响) */
  32. /* 这个问题曾困扰了前端界很久,有一个非常笨的解决方案 */
  33. /* 既然padding和border是后加的,所以减去就完了 */
  34. .box {
  35. width: calc(20em - 24px);
  36. height: calc(15em - 24px);
  37. }
  38. /* 当越来越多的程序员这么干,css标准制定者w3c妥协了,提供了新属性来解决这个问题 */
  39. /* box-sizing: 让用户决定计算盒子大小的方式(要不要将padding,border计算在内) */
  40. </style>
  41. </head>
  42. <body>
  43. <div class="box"></div>
  44. </body>
  45. </html>

box-sizing控制盒子计算方式 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>box-sizing控制盒子计算方式</title>
  7. <style>
  8. :root {
  9. font-size: 10px;
  10. }
  11. .box {
  12. /* 宽 */
  13. width: 20em;
  14. /* 高 */
  15. height: 15em;
  16. /* 背景色 */
  17. background-color: blueviolet;
  18. }
  19. /* 给盒子添加padding(内边距),border(边框) */
  20. .box {
  21. padding: 1em;
  22. border: 2px solid;
  23. /* 将背景色裁切到内容区,让padding可视化 */
  24. background-clip: content-box;
  25. }
  26. .box {
  27. /* width: calc(20em - 24px);
  28. height: calc(15em - 24px); */
  29. /* content-box: w3c标准盒子模型,width/height 不含padding/border */
  30. box-sizing: content-box;
  31. /* border-box: padding, border 计算在盒子大小内 */
  32. box-sizing: border-box;
  33. /* margin是盒子与盒子之间的距离 不是盒子的大小属性 */
  34. margin: 1em;
  35. }
  36. /* 这种盒子模型,最早是由微软的IE浏览器实现的,称之为IE盒子模型 */
  37. /* 而这种IE盒子与w3c的标准盒子不一样,又被称为“怪异盒模型” */
  38. </style>
  39. </head>
  40. <body>
  41. <div class="box"></div>
  42. </body>
  43. </html>

margin对盒子位置的影响 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>margin对盒子位置的影响</title>
  7. <style>
  8. :root {
  9. font-size: 10px;
  10. }
  11. .box {
  12. /* 宽 */
  13. width: 20em;
  14. /* 高 */
  15. height: 15em;
  16. /* 背景色 */
  17. background-color: blueviolet;
  18. box-sizing: border-box;
  19. padding: 1em;
  20. border: 2px solid;
  21. }
  22. /* margin对水平排列的元素的位置的影响 */
  23. /* 水平方向:margin 相加 */
  24. /* .box {
  25. float: left;
  26. } */
  27. .box:first-of-type {
  28. /* 垂直方向: margin折叠 */
  29. margin: 2em;
  30. }
  31. .box:first-of-type+* {
  32. /* 垂直方向: margin折叠 */
  33. margin: 3em;
  34. }
  35. /* margin折叠之后,大者胜出 */
  36. /* margin只会对页面中的元素位置或多个元素的排列产生影响,对盒子大小无影响 */
  37. </style>
  38. </head>
  39. <body>
  40. <div class="box"></div>
  41. <div class="box"></div>
  42. </body>
  43. </html>

全局的盒子大小的设置 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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 和 padding 是透明的所以统一做初始化 */
  10. margin: 0;
  11. padding: 0;
  12. /* 全局使用IE盒子模型 */
  13. box-sizing: border-box;
  14. }
  15. body {
  16. border: 1px solid red;
  17. height: 100vh;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <ul>
  23. <li>item1</li>
  24. </ul>
  25. <p></p>
  26. </body>
  27. </html>

元素的高度:内容超出样式 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. /* 1.文档流:是元素默认布局方式 */
  9. :root {
  10. font-size: 10px;
  11. }
  12. .box {
  13. width: 20em;
  14. height: 15em;
  15. background-color: lightblue;
  16. /* 应该使用内容将元素的高度抄完开,而不是直接它设置高度 */
  17. border: 1px solid black;
  18. /* 显示溢出的内容,默认值 */
  19. overflow: visible;
  20. /* 隐藏溢出的内容*/
  21. overflow: hidden;
  22. /* 使用滚动条查看被隐藏的内容 */
  23. overflow: scroll;
  24. /* 自动适应,不超出没有滚动条,超出会出右滚动条 */
  25. overflow: auto;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div class="box">
  31. 人工智能确实有很多优越的地方,可以给我们的工作和生活提供很多方便,帮我们解决不少难题。人工智能也是一把双刃剑,既能做好事,也能做坏事。这是我们研究智能社会时不能忽视的问题。现在的计算机、互联网、大数据等新的科学技术给我们的社会发展提供了技术支撑,开拓了发展空间。但是,我们在社会治理中运用这些智能技术的时候,是不是应该有一个底线?哪些是我们可以让人工智能尽力去完成的,哪些是不应该让人工智能去完成的?我们不能让人工智能变成无所不能,更不能让人工智能变成人类社会的主宰。人类创造人工智能的初衷是善良的,但是其发挥的作用也可能是邪恶的。比如说,人工智能就可能侵害到我们的隐私权。
  32. </div>
  33. </body>
  34. </html>

容器最小高度与最大高度 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. body>* {
  9. margin: 1em;
  10. }
  11. body div {
  12. border: 1px solid black;
  13. }
  14. body div:first-of-type{
  15. /* 默认高度由内容撑开 */
  16. height: auto;
  17. }
  18. body div:nth-of-type(2){
  19. /* 最小高度 */
  20. min-height: 5em;
  21. /* 只限制最小高度未限制最大高度
  22. 当内容超过最小高度时会自动伸展
  23. 当内容不足时使用最小高度,保证页面不会塌掉 */
  24. }
  25. body div:nth-of-type(3){
  26. /* 最大高度 */
  27. max-height: 5em;
  28. background-color: lightgreen;
  29. /* 这时我设置了最大高度,超过这个高度的内容就溢出了 */
  30. overflow: auto;
  31. }
  32. body div:nth-of-type(4){
  33. /* 最小宽度 */
  34. max-width: 5em;
  35. background-color:lightsalmon;
  36. overflow: auto;
  37. }
  38. body div:nth-of-type(5){
  39. /* 最大宽度 */
  40. max-width: 10em;
  41. background-color:red;
  42. overflow: auto;
  43. }
  44. body div:nth-of-type(6){
  45. /* 最大宽度 */
  46. max-width: 10em;
  47. background-color:royalblue;
  48. /* 左右滚动要用 white-space 防止换行并向下撑开 */
  49. white-space: nowrap;
  50. overflow:auto hidden;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div>物理学家和相对主义者都声称:宇宙的形成是从无到有的。</div>
  56. <div>
  57. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  58. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  59. </div>
  60. <div>
  61. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  62. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  63. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  64. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  65. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  66. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  67. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  68. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  69. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  70. 物理学家和相对主义者都声称:宇宙的形成是从无到有的。<br>
  71. </div>
  72. <div>物理学家和相对主义者都声称:宇宙的形成是从无到有的。</div>
  73. <div>物理学家和相对主义者都声称:宇宙的形成是从无到有的。</div>
  74. <div>物理学家和相对主义者都声称:宇宙的形成是从无到有的。物理学家和相对主义者都声称:宇宙的形成是从无到有的。</div>
  75. </body>
  76. </html>

水平居中问题 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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: 15em;
  10. height: 15em;
  11. border: 1px solid black;
  12. }
  13. /* 1.行内或行内块水平居中 */
  14. .box {
  15. text-align: center;
  16. }
  17. /* 2.块元素的水平居中 */
  18. .box>div{
  19. width: 5em;
  20. height: 5em;
  21. background-color: yellow;
  22. }
  23. /* 使用margin来实现块的水平居中 左右挤压式的居中 */
  24. .box>div{
  25. /* auto: 这个值由浏览器根据上下文自动计算 */
  26. margin-left: auto;
  27. margin-right: auto;
  28. margin: auto;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="box">
  34. <!-- <a href="">php.cn</a> -->
  35. <!-- <img src="https://www.php.cn/static/images/index_yunv.jpg" width="150" alt=""> -->
  36. <div></div>
  37. </div>
  38. </body>
  39. </html>

垂直居中问题:行内元素 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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: 15em;
  10. height: 15em;
  11. border: 1px solid black;
  12. }
  13. .box a {
  14. line-height: 15em;
  15. }
  16. .box img {
  17. /* 图片是块元素所以line-height无效 */
  18. line-height: 15em;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="box">
  24. <a href="">php.cn</a>
  25. <!-- <img src="https://www.php.cn/static/images/index_yunv.jpg" width="150" alt=""> -->
  26. </div>
  27. </body>
  28. </html>

垂直居中问题:padding 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>垂直居中问题:padding</title>
  7. <style>
  8. /* padding 是最简单粗爆的方式 */
  9. .box {
  10. width: 15em;
  11. /* 不要给高度,这个高度应该由padding挤出来 */
  12. /* height: 15em; */
  13. border: 1px solid black;
  14. }
  15. .box {
  16. padding: 5em 0;
  17. }
  18. .box>div{
  19. width: 5em;
  20. height: 5em;
  21. background-color: yellow;
  22. /* margin: auto; */
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="box">
  28. <!-- <img src="https://www.php.cn/static/images/index_yunv.jpg" width="150" alt=""> -->
  29. <div></div>
  30. </div>
  31. </body>
  32. </html>

水平且垂直的解决方案:行内元素 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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: 15em;
  10. height: 15em;
  11. border: 1px solid black;
  12. }
  13. /* .box {
  14. text-align: center;
  15. line-height: 15em;
  16. } */
  17. /* ----------------------------- */
  18. /* 2.padding 实现水平和垂直居中 */
  19. .box {
  20. width: auto;
  21. height: auto;
  22. padding: 5em;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="box">
  28. <a href="">php.cn</a>
  29. </div>
  30. </body>
  31. </html>

水平且垂直的解决方案 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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: 15em;
  10. height: 15em;
  11. border: 1px solid black;
  12. box-sizing: border-box;
  13. }
  14. /* .box {
  15. text-align: center;
  16. line-height: 15em;
  17. } */
  18. /* ----------------------------- */
  19. /* 2.padding 实现水平和垂直居中 */
  20. .box {
  21. padding: 5em;
  22. }
  23. .box>div {
  24. width: 5em;
  25. height: 5em;
  26. background-color: yellow;
  27. }
  28. /* ----------------------------- */
  29. /* 3.margin来实现 */
  30. .box {
  31. position: relative;
  32. }
  33. .box div {
  34. position: absolute;
  35. top: 0;
  36. left: 0;
  37. right: 0;
  38. bottom: 0;
  39. margin: auto;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div class="box">
  45. <!-- <a href="">php.cn</a> -->
  46. <div></div>
  47. </div>
  48. </body>
  49. </html>

总结:

1.盒子大小

  • 属性 width 和 height

2.影响盒子大小的因素:

  • box-sizing盒子模型(content-box和border-box) padding(内边距),border(边框)
  • content-box: w3c标准盒子模型,width/height 不含padding/border
  • border-box:width/height 不含padding/border又被称为“怪异盒模型”

3.margin对盒子位置的影响:

  • 水平方向相加, 垂直方向折叠(大者胜出)

4.盒子初始化:

  • margin,padding,box-sizing

5.元素的内容超出高度:

  • 使用overflow处理 有(visible,hidden,scroll,auto)

6.容器最小高度与最大高度,最小宽度与最大宽度。

  • 最小为小于最小值时为最小值,最大为大于最大值时为最大值。

7.水平居中:

  • 行内或行内块水平居中(text-align: center),块元素的水平居中margin来实现

8.垂直居中:

  • 行内元素(line-height值和父类高度值一样), 块元素(padding不要给高度由padding挤出来)

9.水平且垂直:

  • 行内元素(text-align: center,line-height: 15em), 块元素(padding和margin)

10.盒子对齐最好使用border-box盒子模型

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