详解CSS3中的box-sizing(content-box与border-box)


Posted in HTML / CSS onApril 19, 2019

CSS3中的box-sizing(content-box与border-box)

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式:

content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型

border-box:怪异盒模型,低版本IE浏览器中的盒模型

现代浏览器和IE9+默认值是content-box。

语法格式:

box-sizing:content-box | border-box

区别:

content-box:padding和border不被包含在定义的width和height之内。

盒子的实际宽度=设置的width+padding+border

border-box:padding和border被包含在定义的width和height之内。

盒子的实际宽度=设置的width(padding和border不会影响实际宽度)

总结

以上所述是小编给大家介绍的CSS3中的box-sizing(content-box与border-box),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
需要知道的CSS3动画技术
Jan 01 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 #HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 #HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 #HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 #HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 #HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 #HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 #HTML / CSS
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php中apc缓存使用示例
2013/12/25 PHP
php实现json编码的方法
2015/07/30 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
浅谈Python中的闭包
2015/07/08 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
大二法学专业职业生涯规划范文
2014/02/12 职场文书
三八妇女节寄语
2015/02/27 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
go xorm框架的使用
2021/05/22 Golang
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript