摘要:盒模型的组成大家肯定都懂,由里向外盒模型是有两种标准的,一个是标准模型,一个是模型。指定元素的宽度和高度最小最大属性适用于的宽度和高度。
盒模型的组成大家肯定都懂,由里向外content,padding,border,margin.
盒模型是有两种标准的,一个是标准模型,一个是IE模型。
从上面两图不难看出在标准模型中,盒模型的宽高只是内容(content)的宽高,
而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
这里用到了CSS3 的属性 box-sizing(默认值:content-box)
1 /* 标准模型 */ 2 box-sizing:content-box; 3 4 /*IE模型*/ 5 box-sizing:border-box;
content-box: 这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box: 指定宽度和高度(最小/最大属性)确定元素边框box。也就是说,对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算
测试参考案例
理想中的效果和代码如下图:
.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;(默认的可不写) }
应用在有用 bootstrap框架 的项目中发现bootstrap.min.css 样式里默认 box-sizing: border-box; 会干扰搜索框的宽高
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
这个属性导致页面出现的样子:
.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; }
这个时候想要实现理想中的效果必须把样式调整成:
.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 就不会再溢出,而是向内收缩的,这个效果感觉非常实用的
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1021.html
摘要:不过想想,现在都让微软给退下了,还有多少呢。接着就是要提到的一点,盒模型的计算方式,标准方式和模式是不同的,不知道又想知道的同学请问谷哥或者度娘吧,记得几年前我那本破书上也又提到,还做了一些测试。扯远了,盒模型大概的情况就是这样。 前段时间为了组里在扩充人员,在面试的过程中有过几次扯到盒模型这个东西。对于盒模型以前是经常提到,现在被CSS3的风头给盖下去了,已经没多少人去讲盒模型,也导...
摘要:深入布局盒模型元素分类在知识体系中,除了选择器,样式属性等基础知识外,布局相关的知识才是比较核心和重要的点。从元素的布局特性来分,主要可以分为三类元素块级元素,行内元素,行内块级元素。行内级元素属性取的元素。 深入css布局(1)—— 盒模型 & 元素分类 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点。今天我们...
摘要:深入布局盒模型元素分类在知识体系中,除了选择器,样式属性等基础知识外,布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准,在以后支持了标准盒模型。行内级元素属性取的元素。 深入css布局(1)—— 盒模型 & 元素分类 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重...
摘要:背景想想自己为什么要写这个,难道不是因为这篇道基础面试题附答案文章最近被转载的多,比较多而凑热闹蹭热点显然,肯定是因为这样我才打算写的。继承得到的样式的优先级最低。 背景 想想自己为什么要写这个,难道不是因为这篇《50道CSS基础面试题(附答案)》文章最近被转载的多,比较多而凑热闹蹭热点?显然,肯定是因为这样我才打算写的。而且还有就是,我的公众号也很久没有更新了,微信说长期不更新会关掉...
摘要:中各种布局的背后,实质上是各种的组合。相反,一些块容器盒,比如非替换行内块及非替换表格单元格,不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒,用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后,实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box M...
阅读 2521·2021-10-11 10:58
阅读 962·2019-08-29 13:58
阅读 1630·2019-08-26 13:32
阅读 797·2019-08-26 10:40
阅读 3215·2019-08-26 10:18
阅读 1740·2019-08-23 14:18
阅读 1082·2019-08-23 10:54
阅读 416·2019-08-22 18:39