详解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将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 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
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
php如何获取文件的扩展名
2015/10/28 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
arguments对象
2006/11/20 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
python批量提取word内信息
2015/08/09 Python
python实现按行分割文件
2019/07/22 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
python openCV自制绘画板
2020/10/27 Python
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
承认错误的检讨书
2014/01/30 职场文书
运动会入场解说词
2014/02/07 职场文书
会议主持词
2014/03/17 职场文书
小学生演讲稿大全
2014/04/25 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
优秀员工推荐材料
2014/12/20 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
Redis唯一ID生成器的实现
2022/07/07 Redis