ie的盒模型和标准模型
使用
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>
要点
- 当不对Doctype进行定义时，会触发怪异模式
- 一般布局采用怪异模型（border-box）解析，这样可以很好的保持网页布局显示
参考
ie的盒模型和标准模型的更多相关文章
- 【CSS】309- 复习 CSS盒模型
点击上方"前端自习课"关注,学习起来~ 一.概念 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding ...
- CSS3盒模型温故
CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...
- 任务二：1、选择器 2、连接集中状态的顺序 3、浮动的用发和原理 4、盒模型在IE和Google等不同浏览器的区别与联系
1.选择器类型 标签选择器,类选择器,ID选择器,组合选择器,伪类和伪元素,属性选择器,子选择器,同胞选择器, :not()选择器 1.同胞选择器 相邻同胞标签: h2 + p{ color:red; ...
- 标准盒模型与IE盒模型之间的转换
首先上图,这两张很明显可以看出IE盒模型和标准盒模型之间的差别. 当然今天不是去细细追究两种模型具体是怎么去计算布局的,那个很多文章已经已经有过了,不再重复.以前刚开始学习盒模型的时候,就学到的是IE ...
- css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
- 深入理解CSS盒模型
如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起.这种看似简单的题其实是最不好答的. 下面本文章将会从以下几个方面谈谈盒模型. 基本概念:标准模型 和IE模型 CSS如何设置这两种 ...
- box-sizing -- 盒模型
项目开发中,在浏览同事的代码,发现他经常用一个属性--box-sizing,很好奇是什么,于是乎,上网查阅资料学了起来. 首先我们先复习一下盒模型的组成:一个div通常由 content(内容)+ma ...
- 浅谈CSS3 box-sizing 属性 有趣的盒模型
盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是 ...
- CSS盒模型深入理解
前言 所有文档元素都生成一个矩形框,这称为元素框(element box),它描述了一个元素在文档布局中所占的空间大小.而且,每个框影响着其他元素框的位置和大小 宽高 宽度width被定义为从左内边界 ...
随机推荐
- [EffectiveC++]item20：Prefer pass-by-reference-to-const to pass-by-value
- BZOJ 1041 圆上的整点 数学
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1041 题目大意:求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整 ...
- poj3718 Facer's Chocolate Dream
题目链接 正解:组合数+$dp$. 今天考试的题,考试的时候感觉自己有点脑残过头了.. 似乎发现了所有$1$其实都是一样的,然后不知道怎么强制每种物品只选一个.. 然后就写了一个所有物品可以选任意个的 ...
- BZOJ3997:[TJOI2015]组合数学(DP,Dilworth定理)
Description 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一 ...
- 贪心——HDU-5969 最大的位或
HDU-5969:http://acm.hdu.edu.cn/showproblem.php?pid=5969 一开始也是分了类,觉得要两种情况,l 与 r 位数相同与不同的情况,仔细想一下,可以一起 ...
- F、CSL 的神奇序列 【规律】 （“新智认知”杯上海高校程序设计竞赛暨第十七届上海大学程序设计春季联赛）
题目传送门:https://ac.nowcoder.com/acm/contest/551/F 题目描述 CSL 有一个神奇的无穷实数序列,他的每一项满足如下关系: 对于任意的正整数 n ,有 n∑k ...
- 基于 Docker 搭建 MySQL 主从复制
本篇博文相对简单,因为是初次使用Docker,MySQL的主从复制之前也在Centos环境下搭建过,但是也忘的也差不多了,因此本次尝试在Docker中搭建. 根据网上教程走还是踩了一些坑,不过所幸最终 ...
- Loadrunner之HTTP脚本编写
Loadrunner之HTTP脚本编写 刚学习性能测试的时候还是建议以录制脚本为好,从录制的脚本中去了解脚本结构,各个函数的用法,慢慢再去尝试自己去编写脚本,如果想往技术方向发展,建议最好学习一门编程 ...
- C#利用反射动态创建对象 带参数的构造函数和String类型 （转载）
最近笔者有一个想法需要利用反射动态创建对象(如string,int,float,bool,以及自定义类等)来实现,一直感觉反射用不好,特别是当构造函数带参数的时候.MSDN上给出的例子十分复杂,网上的 ...
- 怎么用Python写爬虫抓取网页数据
机器学习首先面临的一个问题就是准备数据,数据的来源大概有这么几种:公司积累数据,购买,交换,政府机构及企业公开的数据,通过爬虫从网上抓取.本篇介绍怎么写一个爬虫从网上抓取公开的数据. 很多语言都可以写 ...