资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/浅谈CSS3 box-sizing 属性 有趣的盒模型

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

K_B_Z / 840人阅读

摘要：盒模型的组成大家肯定都懂，由里向外盒模型是有两种标准的，一个是标准模型，一个是模型。指定元素的宽度和高度最小最大属性适用于的宽度和高度。

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

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

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

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

css如何设置两种模型

这里用到了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 就不会再溢出，而是向内收缩的，这个效果感觉非常实用的

 

云服务器 GPU云服务器 设计浅谈 浅谈javascript 浅谈sdwan解决方案 浅谈正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1021.html

相关文章

  • 扯一下似乎被遗忘的盒模型

    摘要：不过想想，现在都让微软给退下了，还有多少呢。接着就是要提到的一点，盒模型的计算方式，标准方式和模式是不同的，不知道又想知道的同学请问谷哥或者度娘吧，记得几年前我那本破书上也又提到，还做了一些测试。扯远了，盒模型大概的情况就是这样。 前段时间为了组里在扩充人员，在面试的过程中有过几次扯到盒模型这个东西。对于盒模型以前是经常提到，现在被CSS3的风头给盖下去了，已经没多少人去讲盒模型，也导...

    Barry_Ng 评论0 收藏0

  • 深入css布局 (1) — 盒模型 & 元素分类

    摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。从元素的布局特性来分，主要可以分为三类元素块级元素，行内元素，行内块级元素。行内级元素属性取的元素。  深入css布局（1）—— 盒模型 & 元素分类       在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们...

    ky0ncheng 评论0 收藏0

  • 深入css布局(1) — 盒模型 & 元素分类

    摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准，在以后支持了标准盒模型。行内级元素属性取的元素。 深入css布局（1）—— 盒模型 & 元素分类     在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重...

    blankyao 评论0 收藏0

  • 《50道CSS基础面试题（附答案）》中的答案真的就只是答案吗？

    摘要：背景想想自己为什么要写这个，难道不是因为这篇道基础面试题附答案文章最近被转载的多，比较多而凑热闹蹭热点显然，肯定是因为这样我才打算写的。继承得到的样式的优先级最低。 背景 想想自己为什么要写这个，难道不是因为这篇《50道CSS基础面试题（附答案）》文章最近被转载的多，比较多而凑热闹蹭热点？显然，肯定是因为这样我才打算写的。而且还有就是，我的公众号也很久没有更新了，微信说长期不更新会关掉...

    DataPipeline 评论0 收藏0

  • CSS中各种布局的背后(*FC)

    摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box M...

    miracledan 评论0 收藏0

发表评论

登陆后可评论

0条评论

K_B_Z

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<