浅谈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 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
html粘性页脚的具体使用
Jan 18 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
Angular2中监听数据更新的方法
2018/08/31 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
Python生成随机密码
2015/03/10 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python如何为图片添加水印
2016/11/25 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
车辆工程专业求职信
2014/04/28 职场文书
旗帜观后感
2015/06/08 职场文书
体育委员竞选稿
2015/11/21 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS