CSSbox-sizing：改变盒子模型

默认情况下，网页中元素的实际宽度或高度取决于元素内容区的宽度或高度、内边距以及边框属性的大小，因此我们在为元素布局时还需要考虑元素的内边距和边框属性所占的页面空间，这一点我们已经在《CSS盒子模型》中进行了讲解。

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站制作、成都网站设计、秦州网络推广、小程序定制开发、秦州网络营销、秦州企业策划、秦州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供秦州建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

正是由于上述原因，当您为页面元素设置宽度和高度时，元素的实际大小往往比您设置的要大。为此 CSS3 中添加了 box-sizing 属性来改变默认的盒子模型，通过 box-sizing 属性可以将元素的内边距和外边距在元素内容区内绘制，以使元素呈现的宽度和高度与设置的宽度和高度相同。

box-sizing 属性的可选值如下：

值	描述
content-box	默认值，元素的实际宽度或高度等于元素内容区的宽度或高度、内边距和边框的和
border-box	在元素的内容区内绘制内边距或边框，内边距或边框不会影响元素的实际宽度或高度
inherit	从父元素继承 box-sizing 属性的值。

【示例】下面通过一个示例来演示 box-sizing 属性的使用：




    


    默认情况
    box-sizing: content-box;
    box-sizing: border-box;

运行结果如下图所示：

图：box-sizing 属性演示

提示：当为元素定义 box-sizing: border-box; 属性时，元素内容区的实际宽度和高度是 width 和 height 属性中减去各边的边框和内边距的宽度。

分享文章：CSSbox-sizing：改变盒子模型
标题URL：http://www.shufengxianlan.com/qtweb/news23/511273.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容