CSS–怪异盒子模型
怪异盒子模型
标准盒子宽度计算方法（扩张主义）border-left-width+width+padding-left+padding-right+border-right-width<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {width: 100px;height: 100px;border-left: 8px solid red;border-right: 3px solid red;padding-left: 20px;padding-right: 20px;margin-left:100px;margin-right: 20px;background-color: #368;}</style></head><body><div></div></body></html>}
怪异盒子模型（压缩主义）当内边距和边框宽度相加 < 内容 width 的时候，总宽度 就是 width 的值，会压缩content内容区域当内边距和边框宽度相加 > 内容 width 的时候，总宽度为 内边距+边框 内容content区域为0
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {box-sizing:border-box;width: 100px;height: 100px;border-left: 8px solid red;border-right: 3px solid red;padding-left: 20px;padding-right: 20px;margin-left:100px;margin-right: 20px;background-color: #368;}</style></head><body><div></div></body></html>}
两种盒子模型的区别用途：正常盒子模型主要用于pc端。怪异盒子模型主要用于手机端原理：正常盒子模型大小是由内而外的，由内部决定外部大小；而怪异盒子模型是由外而内的。box-sizing:border-box开启怪异盒子模型；
常规盒子模型：box-sizing:content-box
怪异盒子模型的应用
当父盒子无边框时，子盒子增加 margin 会造成外边距穿透 解决方法：给父盒子设置padding: 10px 0;实现子元素水平居中方法： 子元素设置margin: 10px atuo;（当子元素多时，该方法耗费计算力，每个子元素都要计算）父元素设置padding: 0 10px;（该方法需要重新更改父盒子 width 大小）调用怪异盒子模型，父元素设置padding: 0 10px;，此时不需要更改父盒子 width 大小,但是不能设置内容宽度，此时 width 是总宽度<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="keywords" content="tset"><mata name="descriptions" conten="This is a website for a test"><!-- <meta http-quiv="Page-Enter" content="revealTrans(reveal)"> --><title>test</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.box {box-sizing: border-box;width: 400px;margin: 30px auto;padding: 10px 10px;/* border: 1px solid red; */background-color: #368;}.wrap {width: 380px;height: 40px;margin: 10px 0;line-height: 40px;text-align: center;font-size: 18px;border: 1px solid black;background-color: green;}</style></head><body><div class="box"><ul><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li></ul></div></body></html>
正常盒子和怪异盒子的记忆方法
border=皮 padding=肉 content=骨骼 正常盒子：肉增加，皮有弹性，会撑大，总体增大怪异盒子：皮紧绷，定死，肉增加，会往里压缩骨骼怪异盒子解决的一个问题：
为什么会采用怪异盒子模型正常盒子下，当增加内边距时，如果想保证盒子和之前一样大，需要手动重新计算 width ，怪异盒子模型则省略该步
因为父盒子无边框时子元素增加 margin 会造成外边距穿透，此时需要给父盒子添加 padding ，添加 padding 会增大父盒子，需要手动重新计算父盒子 width ，因此利用怪异盒子模型省略重新计算 width 这一步。
