简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 盒模型中的百分比和auto探讨及居中的应用
Blogger Information
Blog 54
fans 6
comment 31
visits 106634
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
盒模型中的百分比和auto探讨及居中的应用
吾逍遥
Original
1319 people have browsed it

一、盒模型中百分比和auto

盒模型中属性值可以是数值、关键字、函数、百分比和auto等，本文重点探讨下常用的、非常相似的、都需要浏览器计算的的百分比和auto 。二者最大区别据某博文中总结是：auto与子元素有关，100%与父元素有关。 总体来说是正确的，但要修正一点就是margin的auto是与父元素有关 。下面是盒模型(只考虑 块级元素 )中各属性对百分比和auto处理情况。

几点重要说明：

  • 所有margin、padding默认清除 即*{margin:0;padding:0}
  • 块级元素的指明高度 就是CSS中用height指明的，可以是固定值、相对值或根据父父元素的百分比计算到。记 height-d (d表示定义或设置之意)。
  • 块级元素的内容高度 顾名思义就是内容撑开的高度，记 height-c(c表示内容之意)
  • 块级元素的真实高度 就是在chrome开发者工具中盒模型的高度或用户在浏览器中所看到的高度。记 height 。
  • height、height-d和height-c的关系:
    • 不指定height时，height-d=0,而height-c是随内容增加而增加的,此时height=height-c。
    • 指定了height时，height-d=指定高度，而height-c仍然是随内容增加而增加的，此时height=height-d。

下面在使用高度概念时要区分这三个标记，一定要看清上面的说明。

盒模型相关属性 百分比(chrome测试过结论) auto(chrome测试过结论)
width 父元素宽度的百分比 width+margin+border+padding等于父元素宽度
height 父元素指明高度height-d的百分比 计算结果为0，元素高度由内容撑开
margin 父元素宽度的百分比 左右时 是父元素宽度减去元素的宽度后左侧或最侧最大化分配。 上下时 则为0。
padding 父元素宽度的百分比 不支持
border 不支持 不支持
left 父元素宽度的百分比 left=0
right 父元素宽度的百分比 right=父元素宽-元素宽
top 父元素真实高度height的百分比 top=父元素内容高度height-c
bottom 父元素真实高度height的百分比 bottom=父元素真实高度height-元素真实高度height-top

从上面可以看出只有盒模型中width、height和margin完全支持百分比和auto,所以本文主要探讨宽度、高度和外边距。

二、宽度和高度中百分比和auto

用户阅读习惯决定了CSS对待宽度和高度不同处理方式，即宽度受限有最大宽度，而高度是可以滚动的没有最大高度。一般来说最大宽度不大于设备横向最大尺寸。

宽度和高度的默认值: 都是auto,具体表现见上面表中说明的。

1、宽度width中的百分比和auto

经典对比

  1. width:auto，此时div的高度为100px,左右margin为40px,上下margin为10px;
  2. width:100%，此时div的高度和左右margin同上
  1. <style>
  2.     .box { height: 100px; margin: 10px 40px; background-color: #0072d0; }
  3.     /* 1. width:auto */
  4.     .auto { width: auto; }
  5.     /* width:100% */
  6.     .per { width: 100%; }
  7. </style>
  8. <body>
  9.    <div class="box auto">width:auto</div>
  10.    <div class="box per">width:100%</div>
  11. </body>

两个效果

widthauto
width100per

结论：

  • width为auto时，width+左右两边的margin为其父元素的width ，与其内容无关,会占据一整行但是不会出现滚动条**。
  • width为 100% 时，width的值为其父元素的width，与margin无关，margin-left显示，margin-right没有显示。100%时使用margin，出现滚动条。

2、高度height中的百分比和auto

结论：

  1. 高度为auto 高度计算为0，内容撑开元素高度，与其父元素高度无关。
  2. 高度为百分比% 可根据本文开头测试过数据表中得出：指明高度时有效，结果为指明高度height-d的百分比；而内容高度时无效，此时为0。。
  1. <style>
  2.     body { 
  3.     /*指明高度  */
  4.     /* height: 100px; */
  5.     background-color: lightcyan;
  6.     }
  7.     .box {
  8.     width: 800px;
  9.     margin: 10px 40px;
  10.     background-color: #0072d0;
  11.     }
  12.     /* 1. height:auto */
  13.     .auto { height: auto;
  14.     }
  15.     /* height:100% */
  16.     .per { height: 100%; }
  17. </style>
  18. <body>
  19. <h1>未显示指明父元素高度时，由内容撑开高度</h1>
  20. <div class="box auto">height:auto</div>
  21. <div class="box per">height:100%</div>
  22. </body>

两个效果

none
have

三、外边距margin中百分比和auto

正如本文开头所说，外边距margin的百分比和auto是和父元素密切相关的 ，也是布局中常用的技巧，如常见的水平居中和垂直居中均可以借助margin来实现。

1、 正常情况下外边距的百分比和auto。

  • 1、左右外边距
    • 取值百分比时，是按父元素宽度计算。
    • 取值auto时，若margin-left:auto则父宽度减去元素宽度全部分配给左边距，若margin-right为auto则同样全部分配给右边距，若左右为auto则平均分即水平居中。
  • 2、上下外边距
    • 取值百分比时，仍然是按父元素宽度计算。
    • 取值auto时，不论父元素是否指明高度，计算结果均为0。
  1. <style>
  2.     .container {
  3.     width: 800px;
  4.     height: 600px;
  5.     background-color: lightgray;
  6.     }
  7.     .box {
  8.     width: 300px;
  9.     background-color: #007d20;        
  10.     }
  11.     .auto{ margin:auto; }
  12.     .per{ margin:10%; }
  13. </style>
  14. <div class="container">
  15.     <div class="box auto">外边距margin的auto</div>
  16.     <div class="box per">外边距margin的百分比</div>
  17. </div>

margin1

2、 定位情况下外边距的百分比和auto

经典定位方案是：父元素或容器相对定位，元素是绝对定位。它们总是满足如下规律：

  • 父宽度=left+margin-left+元素宽度+margin-right+right
  • 父真实高度height=top+margin-top+元素真实高度height+margin-bottom+bottom

需要说明的是:

  • left、right、top和bottom取值百分比或auto时，计算结果见本文开头的表说明。
  • 在日常使用中left/right/top/bottom一般不用auto，可百分比、固定值或相对单位值。
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. .wrapper {
  6.   display: flex;
  7.   justify-content: space-around;
  8.   margin-top: 50px;
  9.   margin-bottom: 100px;
  10. }
  11. /* 一、父元素未指定高度 */
  12. .container {
  13.   background-color: lightgray;
  14.   position: relative;
  15. }
  16. /* 二、父元素指定高度 */
  17. .con-fixed{
  18.   width:40vw;
  19.   height: 30vh;
  20. }
  21. /* 1.元素未指明宽和高，即都是width:auto；height:auto; */
  22. .box {
  23.   position: absolute;
  24.   left: 0;
  25.   top: 0;
  26.   right: 0;
  27.   bottom: 0;
  28. }
  29. /* 2.元素指明宽度 */
  30. .box-fixed {
  31.   width:20vw;
  32.   height: 10vh;
  33. }
  34. /* margin百分比和auto */
  35. .auto {
  36.   background-color: #007d20;
  37.   opacity: 0.9;
  38.   margin: auto;
  39. }
  40. .per {
  41.   background-color: lightsalmon;
  42.   opacity: 0.9;
  43.   margin: 5%;
  44. }
  45. </style>
  47. <div class="wrapper">
  48.   <div class="container">
  49.     <h1>未指明父元素宽度和高度</h1>
  50.     <h1>未指明父元素宽度和高度</h1>
  51.     <div class="box auto">未指明元素宽高，即都为auto,margin也是auto</div>
  52.     <div class="box per">未指明元素宽高，即都为auto,margin是百分比</div>
  53.   </div>
  54.   <div class="container">
  55.     <h1>未指明父元素宽度和高度</h1>
  56.     <h1>未指明父元素宽度和高度</h1>
  57.     <div class="box box-fixed auto">元素宽度为20vw,高度为10vh,margin是auto</div>
  58.     <div class="box box-fixed per">元素宽度为20vw,高度为10vh,margin是百分比</div>
  59.   </div>
  60. </div>
  61. <div class="wrapper">
  62.   <div class="container con-fixed">
  63.     <h1>父元素宽度为40vw,高度为30vh</h1>
  64.     <h1>父元素宽度为40vw,高度为30vh</h1>
  65.     <div class="box auto">未指明元素宽高，即都为auto,margin也是auto</div>
  66.     <div class="box per">未指明元素宽高，即都为auto,margin是百分比</div>
  67.   </div>
  68.   <div class="container con-fixed">
  69.     <h1>父元素宽度为40vw,高度为30vh</h1>
  70.     <h1>父元素宽度为40vw,高度为30vh</h1>
  71.     <div class="box box-fixed auto">元素宽度为20vw,高度为10vh,margin是auto</div>
  72.     <div class="box box-fixed per">元素宽度为20vw,高度为10vh,margin是百分比</div>
  73.   </div>
  74. </div>

margin-per-atuo

空间分配原则: 元素或margin中有值的优先分配给定值的空间，然后值都是auto时，元素优先分配空间，此时对应的横向或竖向的margin为0。若只有margin是auto时，则平均分配父元素减去元素的空间，就产生居中效果。

四、百分比和auto在块级元素的水平居中和垂直居中应用

1、 父元素或容器指明宽高

  • 元素也指明宽高时，left=right,top=bottom,margin=auto即可实现水平和垂直居中
  • 元素未指明宽高时，left=right,top=bottom,margin=auto或百分比都可实现水平和垂直居中，此时内容区域自适应。

2、 父元素或容器未指明宽高

  • 元素也指明宽高时，left=right,top=bottom,margin=auto即可实现水平和垂直居中
  • 元素未指明宽高时，left=right,top=bottom,margin=auto或百分比都可实现水平和垂直居中，此时内容区域自适应。

更多的居中技巧演示见参考文章中。

参考文章

  1. CSS | width、height中auto与100%与固定值有什么不同 https://blog.csdn.net/R_banyan0820/article/details/80956848
  2. css中元素居中总结 https://www.cnblogs.com/libin-1/p/5918477.html
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！