很多朋友们可能会疑惑，不知道box-sizing属性是有什么作用，自己也很少会用到，但是想必不少人在做网页布局的时候经常遇到一个问题就是我明明设置了父元素设置了假如是宽高500px，5个子元素左浮动设置宽高均是100px都设置有边框。为什么第五个元素被挤下到第二排呢？

例子1：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>加边框的</title>

     <style>

         .box{

             width: 300px;

             height: 300px;

             border: 1px solid black;

             margin: 0 auto;

         }

         .first {

             width: 150px;

             height: 100px;

             float: left;

             background: pink;

             border: 1px solid red;    /*增加了边框*/   /*解决方法在这里增加box-sizing:border-box*/

         }

         .second {

             width: 100px;

             height: 100px;

             background: blue;

             float: left;

         }

         .third{

             width: 50px;

             height: 100px;

             float: left;

             background: green;

         }

     </style>

 </head>

 <body>

  <div class="box">

     <div class="first">123</div>

     <div class="second">456</div>

     <div class="third">789</div>

  </div>

 </body>

 </html>

效果如下：

　　　　　　

此时你可能会疑惑，我明明设置了子元素总宽度跟父元素相等了，为什么子元素没有合并到一行呢，请看代码的第18行多个了边框，边框设置了1px，css默认情况下不会将边框也计算在宽度内的所以你可以这样计算字元素宽度：

子元素150px+100+2+50=302px；超出父元素300px，所以第三个元素才不会合并在一行内。宽度左右边框共占用2px。

解决的方法：

　　1.父元素设置为302px。

　　2.在设置了边框的子元素中增加：box-sizing:border-box;

box-sizing:border-box;的作用是将第三个子元素设置的宽度（包含边框）一起算在width:100px里面。

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

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

padding-box，padding计算入width内

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

css3——box-sizing属性的更多相关文章

  1. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  2. 半深入理解CSS3 object-position/object-fit属性

    半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

  3. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  4. CSS3外轮廓属性

    外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...

  5. 学习笔记：CSS3的filter属性

    CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...

  6. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  7. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  8. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  9. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  10. css3 的box-sizing属性理解

    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...

随机推荐

  1. JavaScript数组方法速查,32个数组的常用方法和属性

    JavaScript数组方法速查手册极简版 http://30ke.cn/doc/js-array-method JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方 ...

  2. d3.js 实现烟花鲜果

    今天在d3.js官网上看到了一个烟花的DEMO,是canvas制作的,于是我想用d3.js来实现它,js代码只有几行.好了废话不多说,先上图. 1 js 类 因为烟花要有下落的效果,所以里面用到了一些 ...

  3. 9道JavaScript字符串类面试题

    本文来源于笔者的开源项目前端面试与进阶指南 点击关注本公众号获取文档最新更新,并可以领取配套于本指南的 <前端面试手册> 以及最标准的简历模板. 解析 URL Params 为对象 let ...

  4. [1]尝试用Unity3d制作一个王者荣耀(持续更新)->AssetBundle管理器

    如果已经看过本章节:目录传送门:这是目录鸭~ 1.AssetBundleManager: 首先我们创建一个文件夹,叫AssetBundleManager,再创建Csharp(即C#)脚本,名为Asse ...

  5. 使用ant编译web工程步骤

    1.把写好的web工程拷贝到tomcat7.x下的webapps目录中 2.如果已经安装过ant的在doc下面直接输入:ant compile编译工程,如果成功最后会有BUILD SUCCESSFUL ...

  6. Redis相关安装TCL

    安装相关命令 wget http://downloads.sourceforge.net/tcl/tcl8.6.1-src.tar.gzsudo tar -xzvf tcl8.6.1-src.tar. ...

  7. 即时聊天APP（二） - MainActivity

    主活动包含三个Fragment,分别是会话.联系人和设置,初始布局隐藏所有碎片,然后把应该显示的显示出来: //隐藏所有Fragment private void hideAll(){ Fragmen ...

  8. Linux 笔记 - 第四章 Linux 文件和目录管理

    博客地址:http://www.moonxy.com 1. 绝对路径和相对路径 绝对路径:由根目录 "/" 写起的.如:/usr/local/mysql 相对路径:不是由根目录 & ...

  9. ThinkPHP 5.x远程命令执行漏洞复现

    ThinkPHP 5.x远程命令执行漏洞复现 一.漏洞描述 2018年12月10日,ThinkPHP官方发布了安全更新,其中修复了ThinkPHP5框架的一个高危漏洞: https://blog.th ...

  10. Spark学习之RDDs介绍

    什么是RDDS? RDDS即Resilient distributed datasets(弹性分布式数据集). Spark中,所有计算都是通过RDDs的创建,转换,操作完成的. 一个RDD是一个不可改 ...