div大小布局--没有width height时,容器大小到底是由什么来决定的 大白话说清楚
·
box-sizing的默认值是content-box，决定宽度和高度的计算方式。大白话说，值为content-box时，盒子宽度不等于width属性值；值为border-box时，盒子宽度等于width属性值。
具体来说，
content-box时
宽高度计算方式：
width=content
盒子宽度是width+padding+border（padding border的存在）
height=content
盒子高度是height+padding+border（padding border的存在）
border-box时，
宽高度计算方式：
width=content
盒子宽度是width-padding-border（padding border的存在）
height=content
盒子高度是height-padding-border（padding border的存在）
<style> *{ margin: 0; padding: 0; } .big{ height: 90px; padding: 20px; border: 1px solid black; background-color: red; } </style> </head> <body> <div class="big" > gg </div> </body>
<style> *{ margin: 0; padding: 0; } .big{ box-sizing: border-box; height: 90px; padding: 20px; border: 1px solid black; background-color: red; } </style> </head> <body> <div class="big" > gg </div> </body>
132=90+20*2+2
注意：不设height width值时，盒子大小不由box-sizing决定大小。具体规则如下：
| 元素类型 | 无width值的盒子宽度 | 无height值的盒子高度(无内容时,内容高度为0) |
| 块级元素 | 撑满父元素内容区域,不由内容决定 | 内容高度+padding+border |
| 行内元素 | 由内容决定 | 内容高度+padding+border |
| 行内块级元素 | 由内容决定 | 内容高度+padding+border |
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)