关于box-sizing的全面理解


Posted in HTML / CSS onJuly 28, 2016

---恢复内容开始---

box-sizing

属性允许您以特定的方式定义匹配某个区域的特定元素。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

语法
box-sizing: content-box|border-box|inherit;

content-box :w3c标准(默认)

border-box :IE传统标准

关于box-sizing的全面理解

content-box:

.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

关于box-sizing的全面理解

test1 中的宽度200px 指的是 content的宽度,同理高度也是。

border-box:

.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

关于box-sizing的全面理解

test2 中的宽度200px指的是border的宽度,同理高度也是。

借助上面的例子可以理解 padding-box

关于box-sizing的全面理解

以上这篇关于box-sizing的全面理解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/pacyx/p/5661492.html

HTML / CSS 相关文章推荐
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
css3动画效果小结(推荐)
Jul 25 #HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 #HTML / CSS
浅谈css3中的前缀
Jul 20 #HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 #HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 #HTML / CSS
CSS3实现时间轴效果
Jul 11 #HTML / CSS
CSS3实现10种Loading效果
Jul 11 #HTML / CSS
You might like
ftp类(myftp.php)
2006/10/09 PHP
PHP PDO函数库详解
2010/04/27 PHP
PHP中的类型约束介绍
2015/05/11 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
canvas的神奇用法
2017/02/03 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python中单、双下划线的区别总结
2017/12/01 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
python selenium操作cookie的实现
2020/03/18 Python
Django中使用Celery的方法步骤
2020/12/07 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
什么是岗位职责
2013/11/12 职场文书
应届生如何写自荐信
2014/01/05 职场文书
教师节商场活动方案
2014/02/13 职场文书
报关报检委托书
2014/04/08 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书