详解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 09 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 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
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
深入PHP变量存储的详解
2013/06/13 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
jQuery级联操作绑定事件实例
2014/09/02 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
python使用pil生成缩略图的方法
2015/03/26 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
苹果Mac升级:MacSales.com
2017/11/20 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
升职自荐书范文
2013/11/28 职场文书
个人自我评价分享
2013/12/20 职场文书
应届生求职信
2014/05/31 职场文书
六一亲子活动感想
2015/08/07 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
详解python字符串驻留技术
2021/05/21 Python
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS