使用
box-sizing:content-box || border-box || inherit
原理图

计算

怪异模型|IE模型

div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化

标准模型

div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化
代码
<html>

	<head></head>

	<style>

		.demo {

			border: 1px solid;

		}

		.box {

			display: inline-block;

			width: 200px;

			height: 200px;

			border:10px solid;

			background-color:red;

			box-sizing: border-box;

		}

	</style>

	<body>

		<div class="demo">

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

			<div class="box">234</div>

		</div>

	</body>

</html>
要点
  1. 当不对Doctype进行定义时，会触发怪异模式
  2. 一般布局采用怪异模型（border-box）解析，这样可以很好的保持网页布局显示
参考

https://www.jianshu.com/p/cc2bc404269b

ie的盒模型和标准模型的更多相关文章

  1. 【CSS】309- 复习 CSS盒模型

    点击上方"前端自习课"关注,学习起来~ 一.概念 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding ...

  2. CSS3盒模型温故

    CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...

  3. 任务二：1、选择器 2、连接集中状态的顺序 3、浮动的用发和原理 4、盒模型在IE和Google等不同浏览器的区别与联系

    1.选择器类型 标签选择器,类选择器,ID选择器,组合选择器,伪类和伪元素,属性选择器,子选择器,同胞选择器, :not()选择器 1.同胞选择器 相邻同胞标签: h2 + p{ color:red; ...

  4. 标准盒模型与IE盒模型之间的转换

    首先上图,这两张很明显可以看出IE盒模型和标准盒模型之间的差别. 当然今天不是去细细追究两种模型具体是怎么去计算布局的,那个很多文章已经已经有过了,不再重复.以前刚开始学习盒模型的时候,就学到的是IE ...

  5. css3 盒模型记

    css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...

  6. 深入理解CSS盒模型

    如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起.这种看似简单的题其实是最不好答的. 下面本文章将会从以下几个方面谈谈盒模型. 基本概念:标准模型 和IE模型 CSS如何设置这两种 ...

  7. box-sizing -- 盒模型

    项目开发中,在浏览同事的代码,发现他经常用一个属性--box-sizing,很好奇是什么,于是乎,上网查阅资料学了起来. 首先我们先复习一下盒模型的组成:一个div通常由 content(内容)+ma ...

  8. 浅谈CSS3 box-sizing 属性 有趣的盒模型

    盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是 ...

  9. CSS盒模型深入理解

    前言 所有文档元素都生成一个矩形框,这称为元素框(element box),它描述了一个元素在文档布局中所占的空间大小.而且,每个框影响着其他元素框的位置和大小 宽高 宽度width被定义为从左内边界 ...

随机推荐

  1. 测试你的 In-app Billing 程序

    测试你的 In-app Billing 程序 为了保证 In-app Billing 可以在你程序中正常使用,你应该在把应用程序发布到Google Play之前进行测试.早期的测试有助于确保用户对于你 ...

  2. Python学习---JSONP学习180130

    同源策略机制      同源:协议://IP:端口[协议,域名,端口相同]      跨域:知道对方接口,同时对方返回的数据也必须是Jsonp格式的 问题描述:Ajax跨域请求数据的时候,实际浏览器已 ...

  3. contextlib

    contextlib with 语句   上下文 任何对象,只要正确实现了上下文管理,就可以用于with语句. 实现上下文管理是通过__enter__和__exit__这两个方法实现的. 例如,下面的 ...

  4. mongodb的安装和启动

    1.在mongodb的官网上下载安装包 https://www.mongodb.com/download-center 选择对应你的系统的安装包下载 如果下载不了 可以使用这个链接下载http://d ...

  5. Android开发–Intent-filter属性详解

    Android开发–Intent-filter属性详解 2011年05月09日 ⁄ Andriod ⁄ 暂无评论 ⁄ 被围观 1,396 views+ 如果一个 Intent 请求在一片数据上执行一个 ...

  6. [BZOJ 2763][JLOI 2011] 飞行路线

    2763: [JLOI2011]飞行路线 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3203  Solved: 1223[Submit][Stat ...

  7. codeforces 703E Mishka and Divisors

    codeforces 703E Mishka and Divisors 题面 给出大小为\(1000\)的数组和一个数\(k\),求长度最短的一个子序列使得子序列的元素之积是\(k\)的倍数,如果有多 ...

  8. python异常处理及内置模块

    异常处理 有时候我们在写程序的时候会出现错误或者异常,导致程序终止,如下这个例子: #!/usr/bin/env python a = 2/0 print(a) 结果提示如下错误: Traceback ...

  9. Mac下安装sbt

    为了可以用Eclipse编译基于Scala的Spark Project,需要安装sbt 环境:OS X Yosemite 10.10.3 1.安装Xcode 因为要在终端用macports安装sbt, ...

  10. What Shape Layers Are-CAShapeLayer

    矢量图.gpu直接使用.占用内存小 What Shape Layers Are Shape layers are layers capable of defining shapes as vector ...