使用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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 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数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
python编程实现归并排序
2017/04/14 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python实现微信机器人的方法
2019/09/06 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
python自动化办公操作PPT的实现
2021/02/05 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
初三化学教学反思
2014/01/23 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
学校运动会开幕词
2016/03/03 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript