暑假第四周·1

2024-07-13 09:03:12 225人阅读

　　昨天写了一张手机端页面，手机端的页面要注意的最重要的一点就是页面要随着手机界面大小的改变而改变，手机的屏幕很小，即使是很小的左右留白也给人一种浪费和不协调的感觉。

　　因此，大量的标签需要"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 属性的值。

值

描述

content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit

规定应从父元素继承 box-sizing 属性的值。

　　box-sizing:border-box;属性将width=“width”+padding+margin。所以之后设置了width：100%之后，我们就可以尽情的设置padding、margin啦~

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们