先上自己写的DEMO代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>box-sizing的学习</title>

	</head>

	<style>

		.one {

			width: 50px;

			height: 50px;

			background-color: blue;

		}

		.two {

			width: 50px;

			height: 50px;

			background-color: red;

			padding: 10px;

		}

		.three {

			width: 50px;

			height: 50px;

			background-color: yellow;

			padding: 10px;

			-webkit-box-sizing: border-box;

			-moz-box-sizing: border-box;

			box-sizing: border-box;

		}

	</style>

	<body>

		<!--

        	作者：43352901@qq.com

        	时间：2016-03-22

        	描述：针对DIV 的 box-sizing的学习

        	结论：设置box-sizing时，使用的padding，不会增加DIV的整体宽高

        -->

		<div class="one">1

		</div>

		<div class="two">2

		</div>

		<div class="three">3

		</div>

	</body>

</html>

　　

结论：

设置box-sizing时，使用的padding，不会增加DIV的整体宽高

box-sizing的学习和认识的更多相关文章

  1. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  2. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  3. amazeui学习笔记--css（基本样式2）--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  4. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  5. CSS3学习基本记录

    CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上 右上 右下 左下 box-shadow:阴影 box-shadow: ...

  6. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  7. css3学习笔记之用户界面

    CSS3 调整尺寸(Resizing) CSS3中,resize属性指定一个元素是否应该由用户去调整大小. 这个 div 元素由用户调整大小. (在 Firefox 4+, Chrome, 和 Saf ...

  8. CSS3总结学习（一）：CSS3用户界面

    在CSS3中,新的用户界面属性有很多,本文重点介绍resize,box-sizing,offset. 浏览器支持,如下图,图片源于W3school 1.CSS Resizing 在css3,resiz ...

  9. Vagrant 安装Oracle19c RAC测试环境的简单学习

    1. 学习自网站: https://xiaoyu.blog.csdn.net/article/details/103135158 简单学习了下 能够将oracle RAC开起来了 但是 对后期的维护和 ...

  10. Css 进阶篇

    一.Css2 高阶知识(常用) 1. css 优先权 优先权(从低到高) 浏览器缺省设置 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) 因此, ...

随机推荐

  1. 看我是一只IT小小鸟有感

    当我看了<我是一只IT小小鸟>后,有许多的感想.就像许多作者一样,在接触计算机这个专业时都有许多的抱怨,对这个专业的不了解,对这个专业不知道从何学起有深深的无助感,对这个专业在未来的发展有 ...

  2. WEB学习总结 +数据结构

    HTML5  <h1>会员注册界面</h1><form action="process.aspx" method="post" n ...

  3. 【BZOJ】【3171】【TJOI2013】循环格

    网络流/费用流 最后能走回出发点……说明全部是环= = 而二分图上的环说明什么呢……完备匹配 对于每个点,它都有四个可能的匹配点,且已知它已经(伪)匹配的一个点,那么我们于已知每条(伪)匹配边,我们连 ...

  4. Leetcode#115 Distinct Subsequences

    原题地址 转化为求非重路径数问题,用动态规划求解,这种方法还挺常见的 举个例子,S="aabb",T="ab".构造如下地图("."表示空位 ...

  5. string为什么可以写入共享内存

    我今天在想这个vector,map为什么不能写入共享内存,原来是因为new的时候只是new了这个对象在共享内存上,而真正的堆上的内存并没有在共享内存里面的,如果要想vector 可以共享就要重写分配器 ...

  6. windows phone MVVM开发心得第一天

    之前刚刚学了asp.net网站的三层架构,为其中的优点着迷,可惜寒假本来决定学下MVC的计划泡汤了,刚开学,学了下windows phone 的MVVM模式的开发,在此留下点心得和脚印,第一天只是学了 ...

  7. JavaScript之数据类型讲解

    JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String.还有1种复杂数据类型——Object,Object本质上是由一 ...

  8. UML标准图（转载）

    在前面的章节中,我们已经讨论过的构建和其他必要的UML元素.现在,我们需要明白的地方使用这些元素. 元素都可以以不同的方式,使一个被称为图的完整的UML图片,如:组件.所以这是非常重要的,要了解不同的 ...

  9. 数据库表 copy

    db1为原数据库,db2为要导出到的数据库,fromtable 是要导出的表名 1.方法一:登录导出到的数据库,执行create table fromtable select * from db1.f ...

  10. uva 11294

    Problem E: Wedding Up to thirty couples will attend a wedding feast, at which they will be seated on ...