关于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发光搜索表单分享
Apr 11 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 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查询搜索引擎排名位置的代码
2010/01/05 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
对python中return和print的一些理解
2017/08/18 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
python 画函数曲线示例
2019/12/04 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
主题党日活动总结
2014/07/08 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers
python 单机五子棋对战游戏
2022/04/28 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript