`

Html之盒模型

阅读更多

#两种模型

标准模型-W3C+[strict模式]=====VS=====IE盒模型-Microsoft

PS:W3C的宽高即不包括margin+padding的实际宽高

 

#强行设置盒模型类型

增加box-sizing:content-box[W3c]/border-box[IE]见名知意

 

#两种解析方式

Quicks-mode==>W3C模式解析

Strict-mode==>W3C模式解析

PS:依赖Doctype存在=>Strict-mode否则quicks-Mode

 

#判断解析方式

Document[.obj].compatMode=BackCompat[quicks-mode]

Document[.obj].compatMode=CSS1Compat[strict-mode]

 

#滚动条

1、滚动条的宽度是占用原有标签宽度即属于不可分割的一部分

2、若想防止因滚动条增加导致页面变形难看可用嵌套多层的方式

3、滚动条的宽度默认:17px

分享到:
评论

相关推荐

    IE盒子模型和标准W3C盒子模型_资料收集

    **定义**:IE盒子模型是早期Internet Explorer浏览器所使用的模型,与标准W3C盒子模型相比,IE盒子模型将边框和内边距也计算在元素的宽度和高度之内。 **组成**: - 同标准W3C盒子模型,同样包括content、padding、...

    CSS+盒模型,css盒模型面试题,HTML源码.zip

    **CSS盒模型** 在网页设计中,CSS(层叠样式表)盒模型是理解布局的基础。它描述了HTML或XML元素如何占据空间并相互影响。盒模型由元素的内容区域、内边距(padding)、边框(border)以及外边距(margin)组成,...

    css盒模型.docx

    CSS 盒模型是 HTML+CSS 中最核心的基础知识之一,它规定了网页元素如何显示以及元素间相互关系。CSS 盒模型是由 content(内容区)、padding(填充区)、border(边框区)和 margin(外边距区)四个部分组成的。 ...

    CSS+盒模型,css盒模型面试题,HTML

    CSS盒模型有两种不同的实现方式,即标准盒模型(W3C盒模型)和IE盒模型(怪异盒模型)。两者的主要区别在于元素的总宽度和高度的计算方式。 - **标准盒模型**:元素的总宽度和高度只包括内容区域的宽度和高度,内...

    CSS盒子模型教程PPT课件.pptx

    盒子之间的关系包括 HTML 与 DOM、标准文档流和盒子模型的关系。HTML 标记是嵌套的层次式结构,每个标记表示的元素可以视为“盒子”,即盒子是嵌套关系。DOM 树用树形结构表示各个元素(对象)的关系。 6. 标准文档...

    CSS盒子模型的应用

    - **盒模型在流体布局中的应用**:通过调整元素的盒子模型属性,我们可以实现响应式设计,使页面在不同屏幕尺寸下仍能保持良好的布局。 - **盒模型与浮动元素**:在使用float属性时,盒子模型可以帮助我们控制元素间...

    我理解的盒模型

    盒模型,又称Box Model,是Web浏览器用于计算元素尺寸的一种方式,它将每个HTML元素视为一个矩形盒子,包含边距(Margin)、边框(Border)、填充(Padding)和实际内容(Content)。盒模型对于CSS布局至关重要,...

    标准盒模型与怪异盒模的区别.html

    介绍了css中盒模型的一些属性的位置设置和标准盒模型与怪异盒模型的一些区别,他们的区别在于标准盒模型与怪异盒模型的大小计算的不同。

    css 盒模型整理

    盒模型描述了HTML或CSS元素如何占据空间并与其他元素交互。这个概念对于精确控制页面布局至关重要,特别是在响应式设计和跨浏览器一致性方面。 ### 1. 盒模型类型 CSS盒模型主要分为两种:标准盒模型(W3C Box ...

    CSS盒子模型.rar

    虽然W3C标准定义了盒子模型,但早期的IE浏览器(尤其是IE6和IE7)采用了一种不同的实现,称为“怪异盒模型”。这导致了跨浏览器的布局问题。为解决这个问题,可以使用`*{box-sizing:border-box}`进行全局设置,使...

    CSS+DIV-盒子模型示例.zip

    - **IE盒模型(怪异盒模型)**:内容宽度加上边框和内填充决定元素总宽度,更符合直觉但与W3C标准不一致。 3. **CSS设置盒模型** - 使用`box-sizing`属性可以切换盒模型类型。例如,`box-sizing: border-box;`...

    HTML5&CSS3网页制作:盒子模型概述.pptx

    盒子模型是Web开发中的一个重要概念,它将HTML元素视为具有四个部分的矩形盒子:内容(content)、内边距(padding)、边框(border)和外边距(margin)。内容区域包含实际的文本或图像信息;内边距是内容与边框...

    css盒子模型

    CSS盒子模型有两种类型:W3C标准盒子模型和IE盒子模型(也称为怪异盒模型)。在标准模型中,元素的总宽度和高度等于内容区域加上内边距和边框;而在IE模型中,总尺寸仅包含内容区域,内边距和边框被加到了总宽度和...

    CSS盒模型的应用知识介绍,基础的CSS盒模型教学

    ### CSS盒模型的应用知识介绍与基础教学 ...总之,CSS盒模型不仅是前端开发的基础,也是实现复杂网页布局的关键技术之一。深入理解和灵活运用盒模型的相关属性,能够帮助开发者构建出既美观又功能强大的网页。

    CSS盒子模型 图片演示

    在CSS3中,还引入了盒模型的两种模式:W3C标准盒模型和IE盒模型(也称为怪异盒模型)。W3C标准盒模型中,元素的width和height只包括内容区,而IE盒模型则包括内容区、内边距和边框。为了避免浏览器之间的兼容性问题...

    伸缩盒模型网页(HTML+CSS).zip

    在这个"伸缩盒模型网页(HTML+CSS)"压缩包中,包含了一个实际的网页示例,用于演示和学习Flex布局的应用。以下是关于Flex布局的详细介绍: 1. **Flex容器与Flex项目**:在Flex布局中,容器是使用`display: flex`或...

    盒子模型 内外边距

    盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距

    css盒子模型的讲解

    CSS盒子模型是网页设计中的核心概念之一,掌握其基本原理和应用场景对于开发高质量的网页至关重要。通过合理设置内容、填充、边框和边界,可以轻松地实现各种复杂布局,并且保证网页的兼容性和可维护性。希望本文...

Global site tag (gtag.js) - Google Analytics