热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

box-sizing属性的使用方法

小编给大家分享一下box-sizing属性的使用方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!css3中的box-sizing属性允许以特定

小编给大家分享一下box-sizing属性的使用方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

css3中的box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。

CSS3  box-sizing属性

作用:允许您以确切的方式定义适应某个区域的具体内容。

说明:Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。

语法:

box-sizing: content-box|border-box|inherit;
描述
content-box

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

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

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

border-box

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

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

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

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

CSS3  box-sizing属性的使用示例







这个 div 占据左半部分。
这个 div 占据右半部分。

效果图:

box-sizing属性的使用方法

看完了这篇文章,相信你对box-sizing属性的使用方法有了一定的了解,想了解更多相关知识,欢迎关注编程笔记行业资讯频道,感谢各位的阅读!


推荐阅读
author-avatar
wangimcf
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有