浅谈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实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 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
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
Python操作MongoDB详解及实例
2017/05/18 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python 字典操作提取key,value的方法
2019/06/26 Python
python 同时读取多个文件的例子
2019/07/16 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
python如何获取apk的packagename和activity
2020/01/10 Python
jupyter notebook 多行输出实例
2020/04/09 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
python动态规划算法实例详解
2020/11/22 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
社团招新策划书
2014/02/04 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
Django操作cookie的实现
2021/05/26 Python
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript