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被定义为从左内边界 ...
随机推荐
- [翻译] CHAnimation
CHAnimation https://github.com/cyndibaby905/CHAnimation How it looks CHAnimation is a project used t ...
- 远程管理客户端--SCCM
远程控制客户端(设备--启动--远程控制): 1.将该用户在SCCM中赋予 远程工具操作人员 权限后,可以通过ccm控制台连接客户端,即可以使用远程控制工具 客户端设置策略设置--远程工具--管理远程 ...
- 6、tornado
3反射(reflect) tornado是一款异步非阻塞高效的web框架 自定制session.form.auth,以及第三方ORM框架sqlachme
- ZT 分智网博客 – 职场、面试技巧、职业规划
http://blog.fenzhi.com/archives/5148.html 分智网博客 – 职场.面试技巧.职业规划 软件工程师职位薪酬最高的25家中国公司 作者: 分智网 日期: 2013 ...
- apt安装mysql
使用 APT 安装 MySQL 参考官方文档 apt-get install mysql-server 这将安装MySQL服务器的包,以及客户端和数据库公共文件的包. 在安装过程中,系统会要求您为ro ...
- 有关js弹出提示框几种方法
1直接提示只有确定功能的提示框 只显示提示信息 alert(“提示信息”); alert ();的参数只有一个就是提示信息,无返回值 2 弹出输入框让你输入内容 prompt() ; 有两个参数:第一 ...
- eclipse 检测App的内存占用和泄漏【转载】
前段时间开发的Android应用,每次都是在运行了半个小时左右后突然挂掉了,很是莫名其妙,也不知道哪里出了问题,后来一步步排查,发现问题出在JNI层,一个被频繁调用的函数分配的内存忘记释放,导致内存泄 ...
- Calabash（葫芦娃）
嘟嘟嘟 第一眼就觉得肯定某种是最短路,然后想了半天也不知道.然后就把送的50分写了,然后就爆搜,结果因为一个错误的剪枝竟然90分?!只能怪数据太水…… 考完试后听bin哥讲,说就是普通的最短路,只不过 ...
- 对极几何（Epipolar Geometry）
基本概念 对极几何(Epipolar Geometry)是Structure from Motion问题中,在两个相机位置产生的两幅图像的之间存在的一种特殊几何关系,是sfm问题中2D-2D求解两帧间 ...
- nRF5 SDK for Mesh(八) Exploring Mesh APIs using light switch example，使用 灯开关 案例探索BLE mesh 的APIS
Exploring Mesh APIs using light switch example The light switch example is meant to showcase the API ...