css盒模型，标准盒模型和怪异盒模型

最新推荐文章于 2024-06-12 21:12:06 发布

柚子。830

最新推荐文章于 2024-06-12 21:12:06 发布

阅读量151

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_72280817/article/details/130992608

版权

盒模型中又包含了以下几个元素：

(1) 内容（content）（2）填充（padding) 3.边框（border）（4）边距（margin）

标准盒子模型=content(内容)+border(边框)+padding(内边距)
怪异盒子模型=content(内容)(已经包含了 padding 和 border)
设置标准盒模型 box-sizing: content-box;
设置怪异盒模型 box-sizing: border-box;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

柚子。830

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css盒模型，标准盒模型和怪异盒模型

设置标准盒模型 box-sizing: content-box;设置怪异盒模型 box-sizing: border-box;(内容)(已经包含了。
复制链接

扫一扫

【CSS笔记】CSS盒子模型（标准盒子模型、怪异盒子模型）

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。

08-17

444

标准盒子模型，它的特点是：当我们固定内容区域的宽度高度之后，再给这个盒子添加边框、填充、边距属性的时候，此时不会改变内容区域的宽度和高度，而是向外扩展宽度和高度。采用标准盒子模型，给元素添加边框、填充等属性的时候，整个元素区域将向外扩张宽度和高度，如果不向当前元素向外扩张宽度和高度，就可以将元素设置为怪异盒子模型。怪异盒子模型，这种模式下，当我们设置内容区域的宽度和高度时候，再添加边框、填充属性的时候，整个盒子的宽度和高度都不会变化，而是会将内容区域压缩。下面通过案例来看下标准盒子模型。...

CSS--怪异盒子模型

m0_56123958的博客

03-12

8240

CSS–怪异盒子模型怪异盒子模型标准盒子宽度计算方法（扩张主义） border-left-width+width+padding-left+padding-right+border-right-width <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px;

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

CSS怪异盒模型box-sizing:border-box

qq_46275230的博客

03-20

667

CSS怪异盒模型box-sizing:border-box 文章目录CSS怪异盒模型box-sizing:border-box不设定box-sizing:border-box效果设定box-sizing:border-box效果 border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。 1.也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。 2

css盒子模型

最新发布

2401_83342251的博客

06-12

1008

之前我们设置的div盒子，它只是盒子最里面内容的大小，当你在设置内边距和边框，整个盒子的宽和高都会增大，但是怪异盒模型是刚开始设置的div盒子大小包括了内边距和边框，就是当你给盒子加内边距和边框时，整个盒子的大小不变，只是原本没设置内边距和边框时，盒子大小都是盒子最里面那部分的，当你设置了内边距和边框以后，最里面部分开始变小，内边距和边框的大小就是最里面那部分减去的。width/height(元素的内容宽或高)：内容区(content)、内边距(padding)以及边框(border)的总和。

css 怪异盒子模型(ie盒子)

weixin_43294560的博客

01-16

1730

标准盒子:width即设置内容区域宽度,不包括内边距、边框、外边距; 怪异盒子:width包括内容区域、内边距和边框,不包括外边距怪异盒子设置方式:box-sizing:border-box; 设置width='200px’时: 标准盒子: 怪异盒子: ...

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

12-30

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

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

09-10

- **盒模型的两种类型**：考察你是否了解标准盒模型和IE盒模型的区别。 - **`box-sizing`属性**：询问你如何通过这个属性来改变盒模型的行为。 - **布局问题**：例如，如何通过调整盒模型属性解决元素重叠或间距问题...

css盒模型.docx

02-24

标准盒模型和怪异盒模型是两种不同的盒模型计算方法。标准盒模型的计算方法是：width + 左右 padding + 左右 border + 左右 margin，高度计算方法相同。怪异盒模型的计算方法是：width（content + border + padding...

关于css盒模型的介绍

03-21

在HTML5中，盒模型有两种模式：标准盒模型（W3C盒模型）和IE盒模型（怪异盒模型）。在标准盒模型中，元素的总宽度和高度只包括内容区和内边距，边框和外边距不计入。而在IE盒模型中，元素的总宽度和高度包括内容区、...

css3之怪异盒子

2301_76148686的博客

01-24

115

css3怪异盒子

css怪异盒子_学习这个怪异？技巧调试CSS

cumian8165的博客

07-25

268

css怪异盒子by ZAYDEK 由ZAYDEK 设计师讨厌他！？ (Designers HATE him! ?) 学习这个怪异？技巧调试CSS (Learn This One Weird ? Trick To Debug CSS) *不是点击诱饵* (*Not clickbait*) Before I get to the article, I just want to share ...

css盒模型：标准盒模型、怪异盒模型

m0_74114605的博客

03-22

1076

目前大部分主流的浏览器支持的是W3C标准盒模型。

怪异盒模型、弹性盒子、常见CSS样式（自身样式）

kaitezhimao的博客

05-12

817

在width给定的情况下，怪异盒模型增加padding，border时盒子尺寸不变，会向内挤压内容区域。在width给定的情况下，标准盒模型增加paddding、border都会扩大盒子的尺寸。// 位置坐标/原点坐标在盒子的左上角。内容区域的大小 = width - 左右的padding - 左右的border。整个盒子的大小 = width + 左右的padding + 左右的border。rgba(0-255 , 0-255, 0-255) //二进制。

CSS基础之盒子模型（标准盒模型、怪异盒模型、弹性盒）

m0_48749505的博客

03-18

266

2）order：控制子元素的排列顺序，值越大越靠后，支持负数，不带单位。4）父元素一旦变成弹性盒子，子元素多不会超出也不会换行，而是会挤压。3）设置子元素在主轴的对齐方式：justify-content：；2）父元素一旦变成弹性盒子，子元素无论是什么类型，都可以设置宽高。e.space-around：中间元素的间距是贴边元素的2倍。4）设置子元素在侧轴的对齐方式：align-items：；e.strech（默认值）：拉伸（不设置宽或者不设高）6）设置多行的对齐方式：align-content：；

标准盒模型和怪异盒模型

weixin_34318272的博客

10-23

195

盒子模型众所周知，这里先简单介绍一下。可以看到，在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右) 而IE盒模型或怪异盒模型显而易见的区别就是，width和height...

CSS基础笔记七，怪异盒子和弹性盒子（弹性盒子的属性，子容器镜像（flex-direction），水平（justify-content），垂直（align-itmes），子容器的权重（flex-数））

qq_55006020的博客

06-28

2922

标准盒子模型，外边距（margin），内边距（padding），线宽（border），内容。内边距和线框会撑开容器怪异盒子模型，外边距（margin），内边距（padding），线框（border），内容。内边距和相框会压缩容器怪异盒子的开启，box-siziing：bober-box 把标准盒子变成怪异盒子content-box 把怪异盒子变成标准盒子弹性盒子模型。通过设置弹性盒子模型，可以更改子容器在父级容器的平均摆放距离开启：display-flex子容器会自动横向摆放。

css-标准盒子与怪异盒子

qq_45033897的博客

07-19

3811

css中标准盒子模型与怪异盒子模型的区别

css盒模型标准和怪异

07-27

CSS盒模型有两种标准：标准盒模型和怪异盒模型。标准盒模型是CSS的默认盒模型，它将元素的宽度和高度定义为内容区域的宽度和高度。也就是说，元素的宽度和高度不包括边框和内边距。而怪异盒模型是一种老旧的盒模型，它将元素的宽度和高度定义为包含内容区域、内边距和边框的总宽度和总高度。也就是说，元素的宽度和高度包括了边框和内边距。在标准盒模型下，可以使用`box-sizing`属性来控制元素的盒模型类型。默认值是`content-box`，表示使用标准盒模型。如果将`box-sizing`设置为`border-box`，则使用怪异盒模型。可以通过以下代码来设置元素使用怪异盒模型： ```css .element { box-sizing: border-box; } ``` 这样设置之后，元素的宽度和高度就会包括边框和内边距。需要注意的是，怪异盒模型可能会影响布局和计算元素的尺寸，因此在开发中要慎重选择使用。