css3 box-sizing属性
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
content-box,border和padding不计算入width之内
padding-box,padding计算入width内
border-box,border和padding计算入width之内,其实就是怪异模式了~
ie8+浏览器支持content-box和border-box;
ff则支持全部三个值。
使用时:
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
栗子:
<style type="text/css">.content-box{box-sizing:content-box;-moz-box-sizing:content-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #E6A43F;background: blue;}.padding-box{box-sizing:padding-box;-moz-box-sizing:padding-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #186645;background: red; }.border-box{box-sizing:border-box;-moz-box-sizing:border-box;width: 100px;height: 100px;padding: 20px;border: 5px solid #3DA3EF;background: yellow;} </style>
截图(ff):
box-sizing:content-box | border-box
默认值:content-box
适用于:所有接受width和height的元素
继承性:无
取值:
- content-box:
- padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding )
- 此属性表现为标准模式下的盒模型。
- border-box:
- padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )
- 此属性表现为怪异模式下的盒模型。
示例:
content-box:
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }
border-box:
.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
说明:
- 对应的脚本特性为boxSizing。
兼容性:
- 浅绿 = 支持
- 红色 = 不支持
- 墨绿 = 部分支持
- 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera |
---|---|---|---|---|---|
版本 | 6-7 | 4-18 | 5.1.7 | 9 | 7-12.5 |
版本 | 8 | ||||
版本 | 9 |
示例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-sizing_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test{width:200px;height:70px;padding:10px;border:15px solid #999;-moz-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box;background:#eee;}
.test2{width:200px;height:70px;padding:10px;border:15px solid #999;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;background:#eee;margin-top:20px;}
</style>
</head>
<body>
<div class="test">content-box</div>
<div class="test2">border-box</div>
</body>
</html>
css3 box-sizing属性相关推荐
- html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
- CSS盒子模型之CSS3可伸缩框属性(Flexible Box)
CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
- Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例 向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
- 浅谈CSS3中display属性的Flex布局,关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念 采用Fl ...
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- 过渡——CSS3动态效果 过渡属性
过渡--CSS3动态效果 过渡属性 一.什么是过渡: 通过 css3 可以在不使用 flash 动画或 javascript 的情况下,为元素从一种样式变换为另一种样式时添加过渡效果. css3 过渡 ...
- html表格如何两段对齐,用css3多列属性实现css两端对齐
要实现css两端对齐,我在网上找了很多方法,都不怎么实用,都是兼容性闹得,column是css3的属性,是多列布局,使用column来实现两端对齐简单实用,就要设置下模块的个数跟column的列数一致 ...
- css3 filter url,CSS3 filter(滤镜) 属性
CSS3 filter(滤镜) 属性 实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safa ...
- 在less中不能正常使用css3的calc属性的解决方法
在less中不能正常使用css3的calc属性的解决方法 参考文章: (1)在less中不能正常使用css3的calc属性的解决方法 (2)https://www.cnblogs.com/zhaozh ...
- html5火焰字体效果,CSS3文字特效属性text-shadow如何实现火焰文字的效果
CSS3文字特效属性text-shadow如何实现火焰文字的效果 发布时间:2020-07-14 09:15:52 来源:亿速云 阅读:177 作者:Leah 本篇文章给大家分享的是有关CSS3文字特 ...
最新文章
- Problem 58 怎样判断当前程序链接的是多线程版的Glibc还是单线程版的Glibc?
- python16进制字节序_第 1 章 套接字、IPv4和简单的客户端/服务器编程
- JS判断数字字母中文
- python3.1.1_python 3.1.1 with--enable shared:将不会构建任何扩展
- 分享一个文件上传工具类
- 投入20亿,赋能1万家,阿里云正式启动云原生合作伙伴计划
- Java基础入门笔记-重写
- 程序员恭喜了!10月起逼自己拿下这个证,年薪68万起!
- 什么是三层架构?它的优点是什么?_三层实木和多层实木地板各有什么优劣点
- Marlin 溫度感應器 數值轉換對應表
- 谈谈R中的乱码(一)
- 平分物品价值java_网易互联网8.8笔试_第2题平分物品_自己的题解记录
- 喜庆博客积分排名进入前3万
- 预测大盘最准确的指标_通达信大盘预测指标,通达信副图指标,需要写一个关于大盘每日成交量的指标高手请进啊...
- IT基础架构规划方案一(网络系统规划)
- 测试前的准备:搭建测试环境
- VMware Explore 2022 China,赋能中国企业加速实现云智能
- 数据结构与算法基本概念
- 代理ip网速慢的原因
- qnap raid5升级raid6_实践出真知!100TB的RAID5到底能否重建成功?
热门文章
- 【Android 逆向】函数拦截 ( 修改内存页属性 | x86 架构插桩拦截 )
- 【错误记录】Android Studio 编译报错 ( VirtualApp 编译 NDK 报错 | Error:A problem occurred configuring project ‘: )
- 【Flutter】Dart 函数 ( 函数构成 | 私有函数 | 匿名函数 | 函数总结 )
- DonkeyID---php扩展-64位自增ID生成器
- 图解 HTTP 笔记(四)——HTTP 状态码
- hdu 2021 发工资咯:)(c语言)
- jquery 数组的调用
- mybatis-config.xml整理
- bzoj 2809 Apio2012 dispatching
- 中断和异常,陷阱的区别和联系