人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。

box-sizing: 盒大小,盒模型.

我们经常遇到左右模块宽度为50%，加个边框会掉下去，加一个这个样式就能解决，看下栗子：

<!DOCTYPE html>

<html>

<head>

<style>

div.container

{

width:300px;

border:10px solid blue;

}

div.box

{

box-sizing:border-box;

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

width:50%;

height:80px;

padding:10px;

border:10px solid red;

float:left;

}

</style>

</head>

<body>

<div class="container">

<div class="box">这个 div 占据左半部分。</div>

<div class="box">这个 div 占据右半部分。</div>

<div style="clear:both;"></div>

</div>

</body>

</html>

aaarticlea/png;base64,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" alt="" />

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了。

梨子：

<style type="text/css">

    .content-box{

        box-sizing:content-box;

        -moz-box-sizing:content-box;

        width: 100px;

        height: 100px;

        padding: 20px;

        border: 5px solid #E6A43F;

        background: blue;

    }

    .padding-box{

        box-sizing:padding-box;

        -moz-box-sizing:padding-box;

        width: 100px;

        height: 100px;

        padding: 20px;

        border: 5px solid #186645;

        background: red;

    }

    .border-box{

        box-sizing:border-box;

        -moz-box-sizing:border-box;

        width: 100px;

        height: 100px;

        padding: 20px;

        border: 5px solid #3DA3EF;

        background: yellow;

    }

</style>

aaarticlea/png;base64,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" alt="" />

css3 box-sizing详解。的更多相关文章

  1. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  2. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  3. 第94天：CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  4. CSS3属性transform详解【转载】

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  5. CSS3 中border-image详解

    CSS3 border-image详解.应用及jQuery插件 一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊 ...

  6. Windows渗透利器之Pentest BOX使用详解（一）

    内容概览:                                     知识科普                                    优缺点总结 功能参数详解翻译: 控制 ...

  7. 第93天：CSS3 中边框详解

    CSS3 边框详解 其中边框圆角.边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握. 一.边框圆角  border-radius    每个角可以设置两个值 ...

  8. css3系列之详解perspective

    perspective 简单来说,就是设置这个属性后,那么,就可以模拟出像我们人看电脑上的显示的元素一样.比如说, perspective:800px   意思就是,我在离屏幕800px 的地方观看这 ...

  9. css3径向渐变详解-遁地龙卷风

    (-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及-,这篇是为后续做准备. (0)快速使用 background-image: ...

  10. css3系列之详解border-image

     border-image border-image呢,是给 边框加上背景图片的.没错,就是平常那一小小条的边框,也能加图片. 参数: border-image-source border-image ...

随机推荐

  1. Flexible variants in STVARV

    DATA: lv_time TYPE TVARV_VAL, lv_tvarvc(25) . CONSTANTS lv_prefix(25) VALUE 'ZZXXS_'. CONCATENATE lv ...

  2. java_13.1 javaAPI

    1 API概念 API:是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节.2 String类的概念和不变性 Stri ...

  3. 数据库存储 datetime，时差问题

    var offset = moment().utcOffset(); var localText = moment.utc(datetime from database).utcOffset(offs ...

  4. 13-linux定时任务不起作用到的问题解决办法

    基本操作下面这篇: centos定时任务-不起作用- 没指明路径!!! 最大的问题是路径问题,以及权限问题. 用定时任务执行某些脚本是出现一系列问题,一步一步解决. 问题一:定时任务没反应: 查看日志 ...

  5. golang 实现延迟消息原理与方法

    实现延迟消息具体思路我是看的下面这篇文章 https://mp.weixin.qq.com/s/eDMV25YqCPYjxQG-dvqSqQ 实现延迟消息最主要的两个结构: 环形队列:通过golang ...

  6. sqlserver window身份验证时切换账户的快捷键

    sqlserver window身份验证时切换账户的快捷键:ctrl+alt_del

  7. 【Android优化篇】提升Activity加载速度的方法

    文章转自:http://www.jianshu.com/p/2007ca0290d3 作者: CoderFan 前言 这个也是我面试遇到的问题,当时只回答了一种情况,异步加载数据,没想到别的方式,回来 ...

  8. angular2.0学习笔记5.关于组件

    1.组件文件应在/src/app文件夹下 2.组件文件命名应遵循小写中线形式,每个单词之间用中线分隔,并且以.component.ts结尾. 如:HeroDetailComponent类应该放在her ...

  9. 洛谷3084 [USACO13OPEN]照片Photo

    原题链接 神仙\(DP\)啊... 题解请移步隔壁大佬的博客\(QAQ\) #include<cstdio> using namespace std; const int N = 2e5 ...

  10. Luogu 2577[ZJOI2005]午餐 - 动态规划

    Solution 啊... 我太菜了唔 不看题解是不可能的, 这辈子都不可能的. 首先一个队伍中排队轮到某个人的时间是递增的, 又要加上吃饭时间, 所以只能使吃饭时间递减, 才能满足最优,于是以吃饭时 ...