使用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实现跳动的动画效果
Sep 12 HTML / CSS
css3中的calc函数浅析
Jul 10 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 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
模仿OSO的论坛(二)
2006/10/09 PHP
php mysql数据库操作类
2008/06/04 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
php 常用的系统函数
2017/02/07 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
js实现简易计算器小功能
2020/11/18 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
详解python之配置日志的几种方式
2017/05/22 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Python实现的端口扫描功能示例
2018/04/08 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
keras导入weights方式
2020/06/12 Python
python中random模块详解
2021/03/01 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
python四种出行路线规划的实现
2021/06/23 Python