IE盒模型

IE5.5及更早的版本使用的是IE盒模型,在在IE6及以上版本的浏览器中,浏览器支持一种解决了这种差异的可选的渲染模式,也开始遵循标准模式。

IE盒模型和W3C盒模型的差异:

IE盒模型,块元素的实际宽度=width(包含padding和border);

W3C盒模型,块元素的实际宽度=width+padding+border;

而IE盒模型的出现条件:

IE5.5之前版本

IE怪异模式(文档声明缺失或不完整;文档类型为HTML3之前的版本;使用HTML 4.0 Transitional或Frameset的文件类型描述且系统标识符(URI)不存在时;在DOCTYPE声明之前出现SGML注释或者其它无法识别的内容时;文档任何地方有错误时;注释符相遇时出现末尾文字重复;Internet Explorer 6在DOCTYPE声明之前出现XML声明)

在支持box-sizing的浏览器中使用box-sizing:border-box;

时间: 2024-10-07 07:00:47

IE盒模型的相关文章

弹性盒模型flex

弹性盒子模型 布局方案 传统的布局方案大多采用div+css+float+position+display来实现,但是随着css3中弹性盒子模型的推出,在前端布局方案中就又多出了一项彪悍的选项.而因为最近在研究小程序,发现中间使用弹性盒子布局效果更好效率更高一点,所以就将之前学习弹性盒模型的相关知识点整理出来,给大家分享. 弹性盒模型flex布局介绍 弹性盒模型(flexbox)又称为弹性布局,是css3中新提出的一种布局方式,通过弹性布局,可以让子元素自动调整宽度和高度,从而达到很好的填充任何

css盒模型

css盒子模型是为了让我们充分理解div+css模型的定位功能,盒子模型在学习div+css布局方式中必须要学习的一个模型. 那什么是css盒模型呢? 网页设计中常听到的属性名:内容(content).填充(padding).边框(border).边界(margin).css盒模型都具备这些属性.这些属性和日常生活中盒子的属性是一样的.内容就是盒子里面装的东西,而填充就是像盒子里装的一些反震的材料,边框就是箱子的本身,边界呢就像盒子之间的空隙. 盒子的模型有2种,分别是IE盒子模型和标准盒子模型

css的盒模型,及css3的box-sizing新属性

css的盒模型包含了content(元素自身).padding(内边距).border(边框)及margin(外边距). 如图,浏览器控制台elements的computed可以清晰显示元素盒模型,鼠标多动动就明白了:(蓝色区域表示content元素自身,这里是整个窗口的内容) 盒模型有两种:标准模式和怪异模式.在<!DOCTYPE>声明缺失时就会在ie6.ie7.ie8下触发怪异模式 标准模式下:盒子总宽度/高度 = content + padding + border + margin,c

第16章 CSS盒模型下

第 16章 CSS盒模型[下]学习要点:1.元素可见性2.元素盒类型3.元素的浮动 本章主要探讨 HTML5中 CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性使用visibility属性可以实现元素的可见性,这种样式一般可以配合 JavaScript来实现效果.样式表如下:属性 visibility 值 说明 CSS版本visible 默认值,元素在页面上可见 2hidden 元素不可见,但会占据空间. 2collapse 元素不可见,隐藏表格的行与列. 2 如果不

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

【CSS】盒模型+选择器(你选择的要操作的对象)

盒模型 转http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 1.w3c标准的盒模型和ie的盒模型主要差别在于content的width和height是否包含border padding 2.标准的content是不包含border padding的 3.如何让ie也标准起来,加上<!doctype html> -------- 选择器 转http://www.cnblogs.com/yongzhi/articles/12

CSS3弹性盒模型flexbox完整版教程

文章目录 基础知识 属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 请注意: flex-direction (适用于父类容器的元素上) flex-wrap (适用于父类容器上) flex-flow (适用于父类容器上) justify-content (适用于父类容器上) align-items (适用于父类容器上) align-content (适用于父类容器上) order (适用于弹性盒模型容器子元素) flex-grow (适用于弹性盒模型容

CSS盒模型简单用法

1.盒模型 margin:外边距: margin-top /margin-right/margin-bottom/margin-left; 或者 margin:top right bottomleft; border:边框:border-top /border-right/border-bottom/border-left; 或者 border:top right bottomleft; padding:内边距:padding-top /padding-right/padding-bottom/

浅谈css盒模型

在我们网页上的每一个元素,一个按钮,一段文本,一张图片等等,浏览器都将它们当做一个“盒子”看待,并把这样的盒子称为盒模型(box model).使用Chrome的右键>审查元素对某个网页上的元素,就可得到类似这样一张图,这就是盒模型的缩影了. 组成盒模型主要是这几个要素:外边的外边距margin.中间的边框border.里边的内边距padding,再往里就是包围元素实体的宽.高.在padding这个块里面,包括实体元素的宽高,就是背景background横行的地方,一般我们所添加的背景图片.背景

【从0到1学CSS】定位问题一(盒模型,浮动)

引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽度未知,且两边div自适应宽度. 第一种实现方法,是借助css3的新属性calc,实现代码如下: body { margin: 0; padding: 0; font-size:0; } .left_div { background-color: #62FF09; /*calc是css3属性可以动态