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

CSS3属性box-sizing使用指南

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

本文主要包含css3属性,css3属性选择器,css3属性大全,css3新增属性,css3动画属性等相关知识,佚名 希望在学习及工作中可以帮助到您

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() 方法不受影响。

</div>

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

  • 总结30个CSS3选择器
  • CSS3利用text-shadow属性实现多种效果的文字样式展现方法
  • CSS3的column-fill属性对齐列内容高度的用法详解
  • CSS3中的常用选择器使用示例整理
  • CSS3中各种颜色属性的使用教程
  • CSS3中的content属性使用示例
  • 使用CSS3制作一个简单的Chrome模拟器
  • css3选择器基本介绍
  • CSS3属性background-size使用指南
  • CSS3属性box-shadow使用指南

相关文章

  • 2017-06-02CSS中垂直居中的简单实现方法
  • 2017-06-02CSS3中颜色线性渐变实战
  • 2017-06-02实例讲解使用CSS实现多边框和透明边框的方法
  • 2017-06-02如何利用CSS3制作3D效果文字具体实现样式
  • 2017-06-02css3 伪元素和伪类选择器详解
  • 2017-06-02基于CSS3实现图片模糊过滤效果
  • 2017-06-02使用CSS3配合IE滤镜实现渐变和投影的效果
  • 2017-06-02一款利用纯css3实现的win8加载动画的实例分析
  • 2017-06-02一款利用css3的鼠标经过动画显示详情特效的实例教程
  • 2017-06-02CSS3绘制不规则图形的一些方法示例

文章分类

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

最近更新的内容

    • 纯CSS3打造动感漂亮时尚的扇形菜单
    • 纯CSS3实现自定义Tooltip边框涂鸦风格的教程
    • 利用CSS3的flexbox实现水平垂直居中与三列等高布局
    • IE滤镜与CSS3效果(详细整理分享)
    • Css3+Js制作漂亮时钟(附源码)
    • CSS3实现简易版的刮刮乐效果
    • 使用css3背景渐变中的透明度来设置不同颜色的背景渐变
    • 利用CSS3伪元素实现逐渐发光的方格边框
    • 初探CSS3中的calc()功能
    • css背景图片的背景裁切、背景透明度、背景变换等效果运用

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

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