使用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 相关文章推荐
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 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 Mysql日期和时间函数集合
2007/11/16 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
php流量统计功能的实现代码
2012/09/29 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
简单介绍python封装的基本知识
2019/08/10 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
自我推荐书
2013/12/04 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
建材投资建议书
2014/05/16 职场文书
见习报告格式范文
2014/11/08 职场文书
聚会通知怎么写
2015/04/23 职场文书
质量承诺书格式范文
2015/04/28 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技
Spring Boot实现文件上传下载
2022/08/14 Java/Android