• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS3属性box-sizing使用指南

CSS3属性box-sizing使用指南

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS3,box-sizing等相关知识,佚名 希望在学习及工作中可以帮助到您

box-sizing用于改变CSS盒子模型,从而改变元素宽高的计算方式。

box-sizing取值如下:


默认值是  content-box ,对应CSS2.1规范中标准的盒子模型计算方式,即 width 和 height 是内容区的宽与高, 不包括边框,内边距,外边距;

 padding-box 根据MDN的说法,目前还是一个实验性的属性, width 和 height 包括内容区和内边距,不包括边框和外边据;

 border-box 包括内边距与边框,不包括外边距。这是IE 怪异模式(Quirks mode)使用的 盒模型 。

例子(摘自MDN)


对JS的影响
根据MDN的叙述:

由window.getComputedStyle 获取height时不会考虑box-sizing, 至少 Firefox 18 (bug 520992) 与 Internet Explorer 9 是这样,  不过Chrome 24 不是(其它浏览器未测试). 注意 IE9 currentStyle 不能返回正确的height值。

关于Firefox 18及IE9之后的版本,我还没有测试。

关于jQuery中 .width() 和 .height() 的返回值
jQuery 1.8 版本之后增加了对 box-sizing 的支持,但这还与浏览器是否支持 box-sizing 有关,简而言之,1.8版本之后, .width() 和 .height() 返回的永远都是内容区的宽和高,见如下代码:


各浏览器打印结果如下

IE6/7 : 500
IE8/9/10: 480
Safari5/6: 480
Chrome21/Firefox14: 480
 IE6/7不支持box-sizing,内容区的宽度是500,所以输出的值也是500,而其他支持该属性的浏览器,内容区宽度减去了 padding 和 border 的值,变成了480.

另:jquery中的 .outerWidth() 和 .outerHeight() 方法不受影响。

您可能想查找下面的文章:

  • 使用CSS3制作一个简单的进度条(demo)
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果
  • CSS3实现自定义Checkbox特效实例代码
  • 总结30个CSS3选择器
  • CSS3模拟动画下拉菜单效果
  • CSS3动画:5种预载动画效果实例
  • CSS3 仿微信聊天小气泡实例代码

相关文章

  • 2017-08-06html+css给单独某一表格定义样式示例
  • 2017-08-06一款纯css3实现的鼠标经过按钮特效教程
  • 2017-08-06Web页面中5种超酷的Hover效果分享
  • 2017-08-06JS+CSS实现侧边栏跟随浏览器滚动效果
  • 2017-08-06csshover.htc在IE7下使用:active伪类无效解决方法
  • 2017-08-06图片上添加文字的两种常用方式
  • 2017-08-06css实现不再让内容把td撑开的常用解决方法
  • 2017-08-06CSS表格样式:圆角,隔行,变色的具体实现
  • 2017-08-06举例详解CSS中的继承
  • 2017-09-27css上传文件样式修改

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS实现让文字半透明显示在图片上的方法
    • ie6下a标签的onclick事件不执行问题解决方案
    • CSS中display:block的作用介绍
    • css绘制透明三角形
    • 网页布局教程 掌握CSS网页布局属性
    • css 等宽导航栏设计技巧
    • 浅谈css中图片定位之所有图标放在一张图上
    • div中加入span右对齐后出现换行显示两种解决思路
    • 19楼网页广告设计规范
    • CSS实现连续数字和英文的自动换行的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有