首页 > 代码库 > 暑假第四周·1
暑假第四周·1
昨天写了一张手机端页面,手机端的页面要注意的最重要的一点就是页面要随着手机界面大小的改变而改变,手机的屏幕很小,即使是很小的左右留白也给人一种浪费和不协调的感觉。
因此,大量的标签需要"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啦~
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。