使用
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. 使用 grep 的 -o 和 -E 选项进行正则的精确匹配

    sed 命令可以很好的进行行匹配,但从某一行中精确匹配某些内容,则使用 grep 命令并辅以 -o 和 -E 选项可达到此目的.其中 -o 表示“only-matching”,即“仅匹配”之意.光用它 ...

  2. redis主从，哨兵，集群

    本次所有操作在docker下进行,搭建方便,迅速构建redis集群. 1. docker安装redis 获取redis:latest(使用官方最新的) 镜像 $ docker pull redis r ...

  3. [UOJ 0034] 多项式乘法

    #34. 多项式乘法 统计 描述 提交 自定义测试 这是一道模板题. 给你两个多项式,请输出乘起来后的多项式. 输入格式 第一行两个整数 nn 和 mm,分别表示两个多项式的次数. 第二行 n+1n+ ...

  4. 把所有的小图标一起做成雪碧图吧 请用gulp-css-spriter.

    用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spriter https://www.npmjs.com ...

  5. 使用Visual Studio Code编写和激活ABAP代码 (上)

    猪年春节后的第一篇,Jerry祝各位猪年大吉! 2019年的六分之一马上就快过完了,不知道大家在新的一年是否给自己定了新的小目标呢?这里Jerry先预祝大家到2019年年底的时候,在年初制定的小目标都 ...

  6. scala流程控制语句以及方法和函数

    1.if else表达式 scala中没有三目运算符,因为根本不需要.scala中if else表达式是有返回值的,如果if或者else返回的类型不一样,就返回Any类型(所有类型的公共超类型). 例 ...

  7. ios 性能优化概述

    在开发IOS程序的时候,不止是简简单单的把代码堆砌起来,或者说有一个比较好的架构,程序就ok的.还需要在程序性能上进行优化.所谓优化,并非只是简单的优化几个算法,让程序看起来跑的更快.优化是有目标的, ...

  8. form表单提交行为

    项目中有一个表单如下图,当我填完数据源名称这个input后,点击回车键本意是想跳到下一个input处,然而呢却触发了下面的添加这个按钮的事件,这是怎么回事呢,明明添加这个按钮并没有设置type=&qu ...

  9. AESUtil 加密

    package com.hxqc.basic.dependency.util; import org.apache.commons.lang.StringUtils; import sun.misc. ...

  10. BZOJ3926:[ZJOI2015]诸神眷顾的幻想乡(广义SAM)

    Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看. ...