怪异盒模型和标准盒模型--CSS
一,原理
css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型。
大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准。
怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现再IE内核的浏览器。
当不对Doctype进行定义时,会触发怪异模式。
在标准模式下,一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
在怪异模式下,一个块的总宽度=width+margin(左右)(既width已经包含了padding和border值)


二,用法(css3的box-sizing)
box-sizing语法:
box-sizing:content-box || border-box || inherit;
当设置为box-sizing:border-box时,将采用怪异模式解析计算;


链接:https://www.jianshu.com/p/9a3090f1924a
怪异盒模型和标准盒模型--CSS的更多相关文章
- IE盒模型和标准盒模型
标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是 ...
- boxsizing属性 IE盒模型和标准盒模型
CSS3有一个非常有用但应用不广泛的属性: box-sizing: content-box | border-box | inherit content-box,默认属性,遵从标准盒模型. borde ...
- CSS基础学习-8.CSS盒子模型_标准盒子&&9.CSS怪异盒子
怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- w3c标准盒模型与IE传统模型的区别
一.盒子模型(box model) 在HTML文档中的每个元素被描绘为矩形盒子.确定其大小,属性——比如颜色.背景.边框,及其位置是渲染引擎的目标. CSS下这些矩形盒子由标准盒模型描述.这个模型描述 ...
- 标准盒模型与IE盒模型之间的转换
首先上图,这两张很明显可以看出IE盒模型和标准盒模型之间的差别. 当然今天不是去细细追究两种模型具体是怎么去计算布局的,那个很多文章已经已经有过了,不再重复.以前刚开始学习盒模型的时候,就学到的是IE ...
- CSS3标准盒模型还是IE怪异模型box-sizing属性的应用设置
在一个文档中,每个元素都被表示为一个矩形的盒子.盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']. 我们要设置某个 ...
- 理解标准盒模型和怪异模式&box-sizing属性
盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模 ...
- 标准盒模型、怪异盒模型(box-sizing)
CSS中Box model是分为两种: W3C标准(标准盒模型) 和 IE标准盒子模型(怪异盒模型).大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 重要的一个属性是bo ...
随机推荐
- 关于click的多次触发问题(冒泡事件)
1. 问题描述: 在点击事件触发时调用接口,若用户多次点击会造成多次调用接口,有时会引起一些数据错误的问题,如支付页面,点击多次时会在后台生成多个相同订单 解决方法: (1)加flag,让点击事件只执 ...
- 剑指offer-整数中1出现的次数
题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...
- html5 meta标签的认知储备
在开发移动或者PC端的时候除了'<meta charset="UTF-8">'这个设置编码格式的meta标签,还有一些其他方面的设置 一.<meta name=& ...
- 常用加密算法简单整理以及spring securiy使用bcrypt加密
一.哈希加密 1.md5加密 Message Digest Algorithm MD5(中文名为消息摘要算法第五版) https://baike.baidu.com/item/MD5/212708?f ...
- InnoDB存储引擎介绍-(6) 二. Innodb Antelope文件格式
InnoDB存储引擎和大多数数据库一样(如Oracle和Microsoft SQL Server数据库),记录是以行的形式存储的.这意味着页中保存着表中一行行的数据.到MySQL 5.1时,InnoD ...
- Golang 在 Mac、Linux、Windows 下如何交叉编译(转)
原文地址:Golang 在 Mac.Linux.Windows 下如何交叉编译 Golang 支持交叉编译,在一个平台上生成另一个平台的可执行程序,最近使用了一下,非常好用,这里备忘一下. Mac 下 ...
- 【转】vue项目重构技术要点和总结
vue数据更新, 视图未更新 这个问题我们经常会遇到,一般是vue数据赋值的时候,vue数据变化了,但是视图没有更新.这个不算是项目重构的技术要点,也和大家分享一下vue2.0通常的解决方案吧! 解决 ...
- js正则表达式取{}中的值
var reg = /[^\{}]*\{(.*)\}[^\}]*/; var str = "1111{122}"; console.log(str.replace(reg,'$1' ...
- 神奇的口袋(dp)
有一个神奇的口袋,总的容积是40,用这个口袋可以变出一 些物品,这些物品的总体积必须是40. John现在有n(1≤n ≤ 20)个想要得到的物品,每个物品 的体积分别是a1,a2……an.John可 ...
- windows 文本操作
type命令 作用:显示文件类文件内容 (例如:.txt .Java .cpp .c .html 等属于文本类文件 .word excel ppt exe dll 等都不属于文本类文件) fc命令 作 ...