使用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 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
基于CSS3画一个iPhone
Apr 21 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文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
Yii快速入门经典教程
2015/12/28 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
实现vuex原理的示例
2020/10/21 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
Python部署web开发程序的几种方法
2017/05/05 Python
python自定义异常实例详解
2017/07/11 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Python:slice与indices的用法
2019/11/25 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Python如何获取文件指定行的内容
2020/05/27 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
承办会议欢迎词
2014/01/17 职场文书
十八大演讲稿
2014/05/22 职场文书
大二学生自我检讨书
2014/10/23 职场文书
联谊活动总结范文
2015/05/09 职场文书
Python中字符串对象语法分享
2022/02/24 Python
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python