浅谈CSS3 box-sizing 属性 有趣的盒模型


Posted in HTML / CSS onApril 02, 2019

盒模型的组成大家肯定都懂,由里向外content,padding,border,margin.

盒模型是有两种标准的,一个是标准模型,一个是IE模型。

浅谈CSS3 box-sizing 属性 有趣的盒模型

浅谈CSS3 box-sizing 属性 有趣的盒模型

从上面两图不难看出在标准模型中,盒模型的宽高只是内容(content)的宽高,

而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

css如何设置两种模型

这里用到了CSS3 的属性 box-sizing(默认值:content-box)

/* 标准模型 */ 
 box-sizing:content-box;
  /*IE模型*/
 box-sizing:border-box;

content-box: 这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

border-box: 指定宽度和高度(最小/最大属性)确定元素边框box。也就是说,对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算

测试参考案例

理想中的效果和代码如下图:

浅谈CSS3 box-sizing 属性 有趣的盒模型

.input { width: 146px; height: 36px; line-height: 36px; background: transparent; border: 2px solid #0D349A; color: #bdbdbd; padding-left: 10px; padding-right: 30px; font-size: 14px;
box-sizing:content-box;(默认的可不写)}

浅谈CSS3 box-sizing 属性 有趣的盒模型

应用在有用 bootstrap框架 的项目中发现bootstrap.min.css 样式里默认box-sizing: border-box; 会干扰搜索框的宽高

* { -webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
 box-sizing: border-box;}

这个属性导致页面出现的样子:

浅谈CSS3 box-sizing 属性 有趣的盒模型

.input { width: 146px; height:
 36px;
 line-height: 36px; 
background: transparent; 
border: 2px solid #0D349A;
 color: #bdbdbd; padding-left: 10px;
 padding-right: 30px; 
font-size: 14px; box-sizing:border-box;}

浅谈CSS3 box-sizing 属性 有趣的盒模型

这个时候想要实现理想中的效果必须把样式调整成:

.input { width: 190px;
 height: 40px; line-height: 
40px; background: transparent; 
border: 2px solid #0D349A;
 color: #bdbdbd; padding-left: 10px; 
padding-right: 30px;
 font-size: 14px; 
box-sizing:border-box;}

PS技巧: 当一个容器宽度定义为 width:100%; 之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的

如果使用该样式,指定为box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果感觉非常实用的

总结

以上所述是小编给大家介绍的浅谈CSS3 box-sizing 属性 有趣的盒模型 ,希望对大家有所帮助,如果大家有任何iwen欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 #HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 #HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 #HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 #HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 #HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 #HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 #HTML / CSS
You might like
国内php原创论坛
2006/10/09 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
python开发之thread线程基础实例入门
2015/11/11 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
中专毕业生自荐信范文
2013/11/28 职场文书
污水厂厂长岗位职责
2014/01/04 职场文书
横幅标语大全
2014/06/17 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
土建施工员岗位职责
2015/04/11 职场文书
公务员保密工作承诺书
2015/05/04 职场文书