标准盒模型和IE盒模型

最新推荐文章于 2024-09-09 11:03:57 发布

catherinawwww

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量104

点赞数

分类专栏：技术资料文章标签： css

本文链接：https://blog.csdn.net/weixin_38747509/article/details/112170568

版权

技术资料专栏收录该内容

188 篇文章 1 订阅

订阅专栏

盒模型的组成，由里向外content,padding,border,margin.

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度

box-sizing的使用

  box-sizing: content-box 是W3C盒子模型
  box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

catherinawwww

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

标准盒模型与IE盒模型的区别

Marco_30的博客

01-21

3309

标准盒模型与IE盒模型的区别 1.标准盒模型 标准盒模型在这里插入图片描述也称W3C盒模型，现在大部分浏览器都采用标准盒模型，在标准模式下，一个元素所占的总宽度=width(content)+padding(左右)+margin(左右)，元素的高度同理也是一样的。如图所示： 2.IE盒模型标准盒模型也称怪异盒模型，IE6之前的浏览器默认采用怪异盒模型，在怪异模式下，一个元素所占的总宽度=width+margin(左右)，（即width包含了border+padding+content）元素的高度

详解CSS 怪异盒模型和标准盒模型

12-30

由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型）用两个简单的例子分别介绍下这两个盒子模型：标准盒模型： &lt...

参与评论您还未登录，请先登录后发表或查看评论

css盒模型

混世小妲己

01-01

102

盒模型的组成，由里向外：content,padding,border,margin. 在IE盒子模型中，width=content+padding+border 在标准的盒子模型中，width=content部分的宽度 box-sizing box-sizing: content-box 是W3C盒子模型 box-sizing: border-box 是IE盒子模型 box-sizing的默认属性是content-box ...

css的两种盒模型

热门推荐

zwkkkk1的博客

03-24

6万+

前言初学 css 的时候 div 的一些宽高问题经常会引起一些不好理解的问题，这里做一个关于css盒模型的分享。问题下面的代码可以直接复制出去运行哦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

IE盒模型

weixin_43786904的博客

05-30

1319

IE盒模型（怪异盒模型）组成部分：content+border+padding+margin 实际宽度：width+margin width包含border和padding box-sizing：content-box；标准盒模型（默认值） box-sizing：border-box； IE盒模型 ...

CSS两种盒模型(标准盒模型&IE盒模型)

Kar29的博客

09-13

7052

CSS盒模型本质是一个盒子，由边距、边框、填充和实际内容组成。 CSS盒模型分为两种：标准盒模型、IE盒模型（也成为怪异盒模型）。两种盒模型的区别在于他们的总宽度的计算公式不一样。在文档首部加了 <!Doctype html>声明，即使用标准盒模型，若不加，则会由浏览器自己决定。标准盒模型 width = 内容（content）的宽度 height = 内容（content）的高度总宽度：width + margin（左右） + padding（左右） + border

IE盒模型和标准盒模型的区别

qq_46617584的博客

05-17

2258

在以前IE5.5以及更早的IE浏览用的不是标准盒模型，我们称之为IE盒模型。先说重要的区别：两者的区别在于content的不同， IE盒模型：width=content+border+padding 标准盒模型：width=content box-sizing:border-box || content-box || inherit 当使用content-box时：页面将采用标准模式来解析计算，content-box也是默认模式当使用border-box时，页面将采用怪异模式解

IE盒子模型和标准W3C盒子模型

12-09

`可以使元素的宽度和高度包括边框和内边距，使其更接近IE模型，但依然保持标准W3C模型的解析一致性。总之，理解盒子模型对于CSS布局至关重要，而选择标准W3C模型并确保其正确应用，可以保证网页在不同浏览器上的...

标准盒模型和IE盒模型的区别

06-10

标准盒模型和IE盒模型是CSS中盒模型的两种不同实现方式：标准盒模型：元素的宽度和高度只包括内容的宽度和高度，不包括边框（border）、内边距（padding）和外边距（margin）。 IE盒模型：元素的宽度和高度包括...

标准盒模型和ie盒模型

链珠的博客

11-29

3355

当对一个文档进行布局时，浏览器会对css 基础框盒模型，将所有元素表示为一个个的矩形盒子。一个盒子由content、padding、 border、margin组成。 <style> .box { width: 200px; height: 100px; padding: 20px; background: pink; } </style> .

CSS 盒子模型详解 IE盒子模型实际应用——把Border设置成不改变宽度高度的内边框

JIZQAQ学习&踩坑笔记本

05-24

1038

一.实际应用项目里面遇到一个问题，就是选中某个颜色之后，需要显示一圈颜色更深的边框表示选中状态。但是加上之后，明显框框变大了，一点也不美观。于是想找找能不能把border改成内边框的方法。在css中加了一行 box-sizing: border-box; 完美解决问题这里涉及到了一个我以前一直没有深入了解过的知识，就是CSS的盒模型。二.盒模型先来简单说一下，什么是盒模型。 1.盒模型基本元素 盒模型从外到里由以下几个元素组成：外边框（margin）边框（b..

快速理解W3C盒模型和IE盒模型的区别

君非道的博客

10-02

2355

1、CSS盒模型概述 CSS 盒模型规定了元素框处理元素内容（content）、内边距（padding）、边框（border）和外边距（margin）的方式. CSS盒模型分为W3C盒模型和IE盒模型 2、通过代码直观感受以下两者区别定义两个div <div id="border-box">我是IE盒模型(border-box)</div> &lt...

W3C盒模型和IE盒模型的区别

根是地下的枝

06-29

2万+

盒模型在初学css的时候就会接触到，其实很容易理解，这里也不多废话，但是实际上在布局的时候还是会出现很多问题。对于盒模型的认识不能只停留在知道一个盒模型由哪些部分构成，也要更多的了解如何在不同情况下利用盒模型的特点进行布局。这里讨论一下两种不同的盒模型： W3C盒模型和IE盒模型。其实IE的盒模型问题只会出现在IE5.5及其更早的版本中，因为在IE6及更新的版本在标准兼容模式下使用的是W3C

标准盒子模型和IE盒子模型的区别

菜鸟的博客

03-30

3570

标准盒子模型 在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。见下图。假设定义了 width, height, margin, border, and padding: .box { width: 350px; height: 150px; margin: 25px; padding: 25px; border: 5px solid black; } 如果.

W3C 盒模型宽度& IE 盒模型宽度(含题）

与其临渊羡鱼，不如进而结网。

03-19

1170

先出题：下面的 div 元素，在 W3C 盒模型中的宽度是__________px，在 IE 盒模型中的宽度是 __________px。 div { padding: 10px; margin: 10px; border: 1px solid #000; width: 100px; } 相关知识点： W3C标准盒模型和IE盒模型 答案： 122（width+2*bor...

标准盒模型和IE怪异盒模型

wenjiusui8083的博客

03-02

6602

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。首先定义一个div块用来演示标准模式和怪异模式的区别，以下是Css样式.box { width: 200px; height: 200px; border: 20px solid bl...

盒子模型（W3C IE）

qq_56392992的博客

08-26

780

盒子模型 border-sizing的属性值 box-sizing:content-box; box-sizing:border-box; box-sizing:inherit; W3C盒模型兼容性：大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度。 css样式： box-sizing:content-box;（主流浏览器默认此样式）盒子的宽高=盒子内容的宽高+边框+内边距设置padding和border会撑开盒子，使盒子比原本的宽高更大。由 C

HTML、CSS实现树状图