关于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中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
javascript 数组排序函数
2009/08/20 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
复习Python中的字符串知识点
2015/04/14 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Python 寻找局部最高点的实现
2019/12/05 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
安全负责人任命书
2014/06/06 职场文书
班级文化建设标语
2014/06/23 职场文书
实训报告范文大全
2014/11/04 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript
如何利用python实现Simhash算法
2022/06/28 Python