先上自己写的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小小鸟阅读笔记

    “我们具有各自的独特性--我们兴趣各异,有不同的家庭背景,不同的知识储备,不同的思维方式……但在现实中,我们也会碰到类似的人生选择的关口,我们会犯类似的错误,有类似的迷惘,也会为类似的精彩鼓掌,而且很 ...

  2. EditPlus配置[C++] [Python] [Java] 编译运行环境

    以前一直用Codeblocks写C++,eclipse写Java,再在eclipse里面集成PyDev写Python,首先无法忍受代码自动补全功能(这个功能也许你万分喜欢),也无法忍受如此重量级的ID ...

  3. 引擎设计跟踪(九.14.2a) 导出插件问题修复和 Tangent Space 裂缝修复

    由于工作很忙, 近半年的业余时间没空搞了, 不过工作马上忙完了, 趁十一有时间修了一些小问题. 这次更新跟骨骼动画无关, 修复了一个之前的, 关于tangent space裂缝的问题: 引擎设计跟踪( ...

  4. 编写一函数用来实现左右循环移位。函数原型为move(value,n);n>0时右移n位，n<0时左移|n|位。

    #include<stdio.h> #include<stdlib.h> int main(){ setbuf(stdout,NULL); int move(int,int); ...

  5. uiview 单边圆角或者单边框

    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(120, 10, 80, 80)]; view2.backgroundColor = ...

  6. Apache CXF实现Web Service（3）——Tomcat容器和不借助Spring的普通Servlet实现JAX-RS(RESTful) web service

    起步 参照这一系列的另外一篇文章: Apache CXF实现Web Service(2)——不借助重量级Web容器和Spring实现一个纯的JAX-RS(RESTful) web service 首先 ...

  7. POC

    大概就是原型验证的意思 验证概念 编辑 概念验证(Proof of concept,简称POC)是对某些想法的一个不完整的实现,以证明其可行性,示范其原理,其目的是为了验证一些概念或理论.在计算机安全 ...

  8. Andoid自动判断输入是电话,网址或者Email的方法----Linkify的应用!

    本节要讲的是,当我们在一个EditText输入电话或者网址还是Email的时候,让Android自动判断,当我们输入的是电话,我们点击输入内容将调用打电话程序,当我们输入是网址点击将打开浏览器程序.而 ...

  9. System.getProperty()参数

    java.version Java 运行时环境版本 java.vendor Java 运行时环境供应商 java.vendor.url Java 供应商的 URL java.home Java 安装目 ...

  10. UVA 11401 - Triangle CountingTriangle Counting 数学

    You are given n rods of length 1,2, . . . , n. You have to pick any 3 of them and build a triangle. ...