使用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 transform的skew属性值图文详解
Jul 21 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PHP 事件机制(2)
2011/03/23 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
Python生成8位随机字符串的方法分析
2017/12/05 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
促销活动总结模板
2014/07/01 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
惊天动地观后感
2015/06/10 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python
5个实用的JavaScript新特性
2022/06/16 Javascript