浅谈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中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
JavaScript 参考教程
2006/12/29 Javascript
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python算法学习之计数排序实例
2013/12/18 Python
Python的randrange()方法使用教程
2015/05/15 Python
Python3字符串学习教程
2015/08/20 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
django富文本编辑器的实现示例
2019/04/10 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
如何在django中实现分页功能
2020/04/22 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
用python计算文件的MD5值
2020/12/23 Python
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
员工工作表扬信范文
2014/01/13 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
MySQL分布式恢复进阶
2022/07/23 MySQL