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

计算

怪异模型|IE模型

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

标准模型

  1. div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化
代码
  1. <html>
  2. 	<head></head>
  3. 	<style>
  4. 		.demo {
  5. 			border: 1px solid;
  6. 		}
  7. 		.box {
  8. 			display: inline-block;
  9. 			width: 200px;
  10. 			height: 200px;
  11. 			border:10px solid;
  12. 			background-color:red;
  13. 			box-sizing: border-box;
  14. 		}
  15. 	</style>
  16. 	<body>
  17. 		<div class="demo">
  18. 			<div class="box">123</div>
  19. 			<div class="box">234</div>
  20. 		</div>
  21. 	</body>
  22. </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. Linux 下Shell的学习2

    0. 查看帮助(比如内置功能)    man bash    -->变量处理大全 1.-计算变量长度的不同方法及不同方法的耗时对比    尽可能的用内置的命令处理,速度快        time ...

  2. except but

    He didn't speak anything but Greek... 他只会说希腊语.The crew of the ship gave them nothing but bread to ea ...

  3. [SDOI2016]数字配对

    题目 发现要求配对的条件是这样 \[a_j|a_i,\frac{a_i}{a_j}=p_1\] 我们考虑一下再来一个\(a_k\),满足 \[a_k|a_j,\frac{a_j}{a_k}=p_2\] ...

  4. 《metasploit渗透测试魔鬼训练营》学习笔记第三章----情报搜集

    Kali渗透测试系统集成了metasploit开源的漏洞测试框架,是渗透测试必备的神器.下面是我在学习metasploit的笔记,有什么错误的地方请指出来,我会立即纠正的~ 一.情报搜集     1. ...

  5. Apollo2.5摄像头安装

    前言:在Apollo美研团队和长沙CiDi团队的支持下,最近完成了Apollo推荐的摄像头AR023ZWDR(Rev663F12)调试,在这里对Apollo的笔记做一个补充,希望以后的开发者不用在踩我 ...

  6. [转]VC++获取文件大小集锦

    方法一: WIN32_FIND_DATA fileInfo; HANDLE hFind; DWORD fileSize; const char *fileName = 文件的路径及名字; hFind ...

  7. Selenium封装

    import os from selenium import webdriver from selenium.webdriver.common.by import By from selenium.w ...

  8. Dubbo实践（十五）消费者引用服务

    Refer取得invoker的过程 <!-- 指定了哪种的注册中心,是基于zookeeper协议的,指定了注册中心的地址以及端口号 --> <dubbo:registry proto ...

  9. mac系统 IDEA+JFinal+Tomcat+Maven搭建

    1.下载Maven(http://maven.apache.org/download.cgi) 2.下载Tomcat(http://tomcat.apache.org/download-90.cgi) ...

  10. Factory（工厂）模式

    设计模式一 工厂模式Factory 在面向对象编程中, 最通常的方法是一个new操作符产生一个对象实例,new操作符就是用来构造对象实例的.但是在一些情况下, new操作符直接生成对象会带来一些问题. ...