盒模型分为标准盒模型和怪异盒模型(IE模型),盒模型示意图如下:
当我们给这个元素给上下面属性的时候,会决定元素到底是怎么计算盒子的宽度和高度的
box-sizing:content-box //标准盒模型 box-sizing:border-box //怪异盒模型
标准盒模型计算方式:元素的真实宽度 = width + padding + border;
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .div { width: 100px; height: 100px; padding: 15px; border: 5px #000 solid; margin: 5px; background: red; box-sizing:content-box; } </style> </head> <body> <div class="div"> </div> </body> <html>
此刻,可以清楚的看到,div的高度和宽度都是140px,很明显,除了margin是都计算在内的。
那么,怪异模式计算公式: 元素的真实宽度 = width;
意思则是你设置该元素多少宽度那就是多少宽度,不会把之前提到的任何计算在内,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .div { box-sizing: border-box; width: 100px; height: 100px; padding: 15px; border: 5px #000 solid; margin: 5px; background: red; } </style> </head> <body> <div class="div"> </div> </body> <html>
此刻可以清楚的看到,该div元素宽和高就是设置的宽和高,没有任何改变,此刻宽度 = 设置的宽度 - padding * 2 - border * 2
标签: CSS
还木有评论哦,快来抢沙发吧~