-
{
////////////////////////////////////////////////////
-webkit-box-sizing: border-box;
box-sizing: border-box;
////////////////////////////////////////////////////-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
outline: none;
}
昨天在排察问题的时候在浏览器看到mui.css里的这个样式
上面这个两个box-sizing会产生以下问题：
1.在设置沉浸式状态栏的时候header的padding-top无效
解决问题的办法是设置了padding-top还要设置header的高度
或者在header里设置样式 box-sizing为content-box
2.在列表中设置一个列表的高度后再padding无效
官方为什么这样设置这个样式呢
这样的话每个搞前端的人员在按照常规来写样式表的时候，都会造成问题，
比如说设置样式的padding 、border等这样式的时候都会和平常的不一样，
让前端感到疑惑
现在，都不敢改这个地方，怕在引用mui样式组件的地方发生变型
2 个回复
不做大哥好多年 - IS
你好，你这个问题解决了吗
五叶神 - 世界上没有免费的午餐，也不要有一颗贪婪的心
我只能说你不是一位合格的前端，盒子模型都不知道，默认是外扩的，border-box是向内，固定宽高元素padding只会向内，没感受到它的好？自己去百度吧。。。 移动端各大UI框架都是这个盒子模型
设置header的高度auto就随你玩了
fuckmi
垃圾
2017-08-31 18:09
fuckmi
回复 五叶神:垃圾五叶神，菜鸟一个，装逼
2017-09-02 11:38