详解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属性选择符介绍
Oct 17 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
HTML中的表格元素介绍
Feb 28 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
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
AngularJS入门之动画
2016/07/27 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
python encode和decode的妙用
2009/09/02 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
Python 数据结构之队列的实现
2017/01/22 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
十佳班主任事迹材料
2014/01/18 职场文书
中文师范生自荐信
2014/01/30 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
客户答谢会活动方案
2014/08/31 职场文书
三好学生事迹材料
2014/12/24 职场文书
起诉状范本
2015/05/20 职场文书
企业财务管理制度范本
2015/08/04 职场文书
Java中的Kotlin 内部类原理
2022/06/16 Java/Android