css3——box-sizing属性
很多朋友们可能会疑惑，不知道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属性的更多相关文章
- CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...
- 学习笔记：CSS3的filter属性
CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...
- CSS3利用text-shadow属性实现多种效果的文字样式展现
一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- css3 的box-sizing属性理解
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...
随机推荐
- 「每日五分钟，玩转JVM」：对象内存布局
概览 一个对象根据不同情况可以被划分成两种情况,当对象是一个非数组对象的时候,对象头,实例数据,对齐填充在内存中三分天下,而数组对象中在对象头中多了一个用于描述数组对象长度的部分 对象头 对象头分为两 ...
- PythonI/O进阶学习笔记_3.2面向对象编程_python的封装
前言: 本篇相关内容分为3篇多态.继承.封装,这篇为第三篇 封装. 本篇内容围绕 python基础教程这段: 在面向对象编程中,术语对象大致意味着一系列数据(属性)以及一套访问和操作这些数据的方法.使 ...
- shell中日期循环的方式
第一种 # 这里的例子以周为循环 !/bin/bash begin_date="20160907" end_date="20170226" while [ &q ...
- 【Offer】[65] 【不用加减乘除做加法】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 牛客网刷题地址 思路分析 对数字做运算,除了四则运算外, ...
- java 代理模式-静态代理与动态代理
最近在研究SpringAOP,当然要学习AOP就要知道这么健硕.强大的功能的背后究竟隐藏着怎样不可告人的“秘密”?? 接下来就是查阅了许多资料详细的研究了一下Java的代理模式,感觉还是非常非常重要的 ...
- Java 编程语言中很少被人了解的特性-statement label
下面的语句会编译报错或者打印什么? System.out.print("baidu site :"); https://www.baidu.com; System.out.prin ...
- Mac破解软件下载的几个网站
一.关于破解(盗版)软件的个人看法(可忽略,网址在文末): 1.在经济(预算)允许的范围内,尽量支持正版: 2.软件如衣服,在不同的季节,不同的店铺买价格不一样,国内的一些代理网站经常会打折: 3.作 ...
- Android 图片处理之 Fresco
一.关于 Fresco github: https://github.com/facebook/fresco API: http://www.fresco-cn.org/javadoc/referen ...
- null==a和a==null的区别
在项目代码中在if判断中会经常看到一些老司机这样写:if(null == a),而我由于习惯会写成if(a == null),这两种有什么区别呢? 其实两种并没有什么区别,只是前者在细节处理上.我们在 ...
- Delphi - 调用外部程序并阻塞到外部程序中
Delphi 调用外部程序并阻塞到外部程序中 背景说明: 前段时间开发一个数据转换的系统,业务逻辑中说明数据需要压缩成.tar.gz格式. 我在Windows系统下采用,先生成批处理文件,然后调用Wi ...