CSS-标准盒模型和IE6混杂模式

1. w3c标准盒模型

以宽度举例（高度是同理的）

boxWidth = 设置的宽( width ) + 边框的两边 ( border * 2 ) + 内边距两边（padding * 2）
boxContentWidth ( 盒子内容区宽 ) = boxWidth

2. IE6混杂模式（怪异模式）

box-sizing: border-box 触发ie6混杂模型 （默认值是 content-box）

boxWidth = 设置的宽( width )
boxContentWidth （盒子内容区宽） = boxWidth - border * 2 - padding * 2

3. overflow

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

scroll ; 可以用作横向滚动和垂直滚动条目的功能实现

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

3. resize

属性规定是否可由用户调整元素的尺寸,( 需要配合 overflow 属性使用);
需要慎用；因为会影响页面结构，而且不断的调整宽高会重排重绘，造成性能消耗

both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。

CSS-标准盒模型和IE6混杂模式相关推荐

标准盒模型和 IE 盒模型
对于标准盒模型和 IE 盒模型你了解多少? 盒模型讲解我们今天只会提到标准盒模型,和 IE 盒模型,两种盒模型模式讲解.首先来看标准盒模型. 只要是盒模型都会有这四个属性 margin, bord ...
css3盒模型：IE6混杂模式下的盒模型
IE6混杂模式下的盒模型本来是IE的特有的,后来大家发现,诶还行好用,所以在CSS3中加入了属性box-sizing,当属性值为border-box时,则按照混杂模式的原则创建盒子适用于场景 1.宽 ...
Css盒模型有哪几部分，标准盒模型和IE盒模型有哪些区别
首先介绍Css的盒模型也就是标准盒模型(BOX Model) 包含了内容(content) 内边距(padding) 边框(border) 外边框(margin) 这是大家经常用到的,也是现在的标准 ...
前端面试题 | 标准盒模型和IE盒模型的区别？
两者的区别在于content的不同,IE盒模型的content包含border,padding W3C盒子模型(又称之为标准盒模型)的范围包括margin.border.padding.content ...
标准事件模型和IE事件模型
前言:在上一篇博客中总结了0级DOM事件模型和2级DOM事件模型,打铁趁热就在谈谈标准事件模型和IE事件模型的区别吧. 一. 标准事件模型在JavaScript中把标准事件模型的执行分为三个阶段,即 ...
sizebox模型下载_box-sizing解决盒模型和form元素统一风格的问题
box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么C ...
html盒子标准模型,CSS标准盒模型与IE盒子模型以及弹性盒模型
CSS2.1中提出了盒模型的概念,盒模型高度提炼了所有元素的基本特征,即标准盒模型,CSS3中进一步扩展,提出了弹性盒模型的概念什么是盒模型,我们可以先直观的看一个东西打开Chrome浏览器,F1 ...
CSS标准盒模型和怪异盒模型区别
盒模型都是由四个部分组成的,分别是margin.border.padding 和 content.即外边距,边框,内边距,内容. 一:标准盒模型 1. box-sizing: content-box ...
CSS 盒模型标准盒模型 IE盒模型
CSS 盒子的组合部分: Content box: 用来显示内容. Padding box: 包围在内容外面的部分. Border box: 包围显示内容和内边距. Margin box: 在bord ...

CSS-标准盒模型和IE6混杂模式

1. w3c标准盒模型

2. IE6混杂模式（怪异模式）

3. overflow

3. resize

CSS-标准盒模型和IE6混杂模式相关推荐

最新文章

热门文章

CSS-标准盒模型和IE6混杂模式

1. w3c标准盒模型

2. IE6混杂模式 （怪异模式）

3. overflow

3. resize

CSS-标准盒模型和IE6混杂模式相关推荐

最新文章

热门文章

2. IE6混杂模式（怪异模式）