资讯专栏INFORMATION COLUMN

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

K_B_Z / 813人阅读

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

盒模型的组成大家肯定都懂,由里向外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 就不会再溢出,而是向内收缩的,这个效果感觉非常实用的

 

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

转载请注明本文地址: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元查看
<