人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 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. Mac下IntelliJ的Git、GitHub配置及使用

    1.git简介 Git是目前流行的分布式版本管理系统.它拥有两套版本库,本地库和远程库,在不进行合并和删除之类的操作时这两套版本库互不影响.也因此其近乎所有的操作都是本地执行,所以在断网的情况下任然可 ...

  2. MongoDB的索引（六）

    数据准备:在mongodb命令行终端执行如下代码 for(var i=0;i<100000;i++) { ... db.users.insert({username:"user&quo ...

  3. chorem浏览器无法下载

    下载的时候指定字节的长度 context.Response.AddHeader("Content-Length", bytes.Length.ToString()); contex ...

  4. Split Array into Consecutive Subsequences

    659. Split Array into Consecutive Subsequences You are given an integer array sorted in ascending or ...

  5. openshift上传java web项目

    下载当前客户端 OC(Openshift Client) https://mirror.openshift.com/pub/openshift-v3/clients/3.9.14/windows/oc ...

  6. Vmware黑屏解决方法

    此原因是显卡性能差,显示选项开启了3D加速导致的,具体修改步骤: 英文路径:VM->Settings->Hardware->Display 在右面的内容栏中将 Accelerate ...

  7. js 变量大小写

    js对变量是区分大小写的.完毕.

  8. Linux安装命令出现如下错误：cannot find a valid baseurl for repo :base/7x86_64

    今天刚回到家,在我的虚拟机上有安装了一个Linux系统,安装好之后,想要安装如下命令,yum install wget,yum install gcc,yum install vim,发现一个也没有安 ...

  9. c#devexpres窗体划分 以及panelcontrol 相关操作

    想模仿flashfxp  做一个svn上传的客户端 左侧为本地目录,右侧为svn服务器目录 准备用devexpress 的 控件实现,顺便练习一下devexpress 相关使用. 1:要实现菜单栏工具 ...

  10. Oracle_SQL(3) DML增删改

    sql语言按功能分为:数据定义语言DDL.数据操纵语言DML.数据查询语言DQL.数据控制语言DCL 一.数据操纵语言DML1.insert 新增 语法:insert into <表名> ...