使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题


Posted in HTML / CSS onJune 28, 2016

有时我们会给页面的元素(比如div)设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话,那么这个div就会被撑大。也就是其实际的尺寸变成了:设置的宽高尺寸+内边距+边框。
这样就有可能对我们的布局造成影响,如果不想让内边距和边框影响到我们设置的固定尺寸,可以借助 box-sizing 这个css属性来实现。

1,box-sizing 属性介绍
box-sizing 允许我们以特定的方式定义匹配某个区域的特定元素。

CSS Code复制内容到剪贴板
  1. box-sizing: content-box|border-box|inherit;  
描述
content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。

2,设置元素内容尺寸(box-sizing:content-box)
content-box 是 box-sizing 属性的默认值。当元素的box-sizing是content-box的时候,我们给元素设置的宽度、高度实际上是设置这个元素内容的宽度、高度。而元素的内边距和边框会在宽度和高度之外绘制。

比如下面样例,我们设置宽高尺寸为:200px * 34px

CSS Code复制内容到剪贴板
  1. <style>   
  2.     .form-control {   
  3.           width200px;   
  4.           height34px;   
  5.           padding6px 12px;   
  6.           line-height: 1.42857143;   
  7.           color#555555;            
  8.           border1px solid #cccccc;   
  9.           border-radius: 4px;   
  10.     }   
  11. </style>   
  12. <input class="form-control" type="text" placeholder="Email地址">  

但加上内边距和边框后,输入框的实际尺寸变成:226px * 48px
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题

3,设置元素边框盒尺寸(box-sizing:border-box)
当元素的 box-sizing 是 border-box 的时候,我们给元素设置的宽度、高度实际上是设置这个元素边框盒的宽度、高度。也就是说内边距、边框都是在这个内部绘制,而不会把元素撑开。
还是同样的样例,设置为border-box后:

CSS Code复制内容到剪贴板
  1. <style>   
  2.     .form-control {   
  3.           width200px;   
  4.           height34px;   
  5.           box-sizing: border-box;   
  6.           padding6px 12px;   
  7.           line-height: 1.42857143;   
  8.           color#555555;            
  9.           border1px solid #cccccc;   
  10.           border-radius: 4px;   
  11.     }   
  12. </style>   
  13. <input class="form-control" type="text" placeholder="Email地址">  

不管内边距和边框设置是多少,输入框尺寸固定是:200px * 34px
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题

HTML / CSS 相关文章推荐
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 #HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 #HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 #HTML / CSS
CSS3实现3D翻书效果
Jun 20 #HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 #HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 #HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 #HTML / CSS
You might like
php 常用类汇总 推荐收藏
2010/05/13 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php解决约瑟夫环示例
2014/04/09 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
Vue关于组件化开发知识点详解
2020/05/13 Javascript
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
大专计算机个人求职的自我评价
2013/10/21 职场文书
结婚邀请函范文
2014/01/14 职场文书
标准自荐信范文
2014/01/29 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
法学自荐信
2014/06/20 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
教师节标语大全
2014/10/07 职场文书
保送生自荐信范文
2015/03/26 职场文书
二手房购房意向书
2015/05/09 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Python中的嵌套循环详情
2022/03/23 Python
mysql 获取相邻数据项
2022/05/11 MySQL