先上自己写的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. hibernate---核心开发接口1(重点)

    面试考这个比较少 a) Session session = sessionFactory.openSession();    永远都是打开新的 记得要 close b)  Session sessio ...

  2. Spring Batch学习

    今天准备研究下Spring Batch,然后看了一系列资料,如下还是比较好的教程吧. 链接: http://www.cnblogs.com/gulvzhe/archive/2011/12/20/229 ...

  3. iOS开发之runtime的运用-获取当前网络状态

    之前写过runtime的一些东西,这次通过runtime获取一些苹果官方不想让你拿到的东西,比如,状态栏内部的控件属性.本文将通过runtime带你一步步拿到状态栏中显示网络状态的控件,然后通过监测该 ...

  4. 图片放大镜插件 Cloud Zoom v3.1

    Cloud Zoom是一个图像放大jQuery插件,效果堪比Magic Zoom.相对于流行jQZoom插件,Cloud Zoom体积小,有更多的功能和更强大的跨浏览器兼容性. 猛击这里查看演示DEM ...

  5. 6 高级IO函数

    6.1 pipe函数 pipe函数创建一个管道,用于实现进程间通信 #include<unistd.h> ]); 参数包含两个文件描述符fd[0]和fd[1],往fd[1]写入的数据可以从 ...

  6. Python中__init__方法/__name__系统变量讲解

    __init__方法在类的一个对象被建立时,马上运行.这个方法可以用来对你的对象做一些你希望的初始化. 代码例子 test.py#!/usr/bin/python# Filename: class_i ...

  7. Hbase的连接池--HTablePool被Deprecated之后

      说明: 最近两天在调研HBase的连接池,有了一些收获,特此记录下来. 本文先将官方文档(http://hbase.apache.org/book.html)9.3.1.1节翻译,方便大家阅读,然 ...

  8. 驱动笔记 - IO端口和IO内存

    访问IO端口 (#include <asm/io.h>) 设备资源struct resource{ resource_size_t start; //资源起始物理地址 resource_s ...

  9. 编写更好的CSS

    编写好的CSS代码能提升页面的渲染速度.本质上,一条规则都没有引擎解析的最快.MDN上将CSS选择符归拆分成四个主要类别,如下所示,性能依次降低. ID 规则 Class 规则 标签规则 通用规则 对 ...

  10. asp.net @reqister指令

    @register指令通过声明将自定义 ASP.NET 服务器控件添加到页或用户控件中. 1.@register 指令有两种用法如下 <%@ Register tagprefix="t ...