昨天写了一张手机端页面，手机端的页面要注意的最重要的一点就是页面要随着手机界面大小的改变而改变，手机的屏幕很小，即使是很小的左右留白也给人一种浪费和不协调的感觉。
因此，大量的标签需要"width:100%"，但是元素width的算法默认为“width”=width+padding+margin。它所产生的问题是设置width:100%，加上padding、margin使手机端的页面需要横向滑动才能看到，我有幸体验过，说实话感觉非常不好。
这里我介绍css3中的一个元素
box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box |
这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 |
| border-box |
为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
box-sizing:border-box;属性将width=“width”+padding+margin。所以之后设置了width：100%之后，我们就可以尽情的设置padding、margin啦~
暑假第四周·1
时间： 2024-10-10 09:44:38