CSS盒子模型和怪异盒子模型

最新推荐文章于 2022-09-15 11:43:20 发布
原创 最新推荐文章于 2022-09-15 11:43:20 发布 · 490 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文详细解析了标准盒子模型和怪异盒子模型的区别，介绍了如何通过box-sizing属性选择不同的盒子模型进行网页布局。
盒子模型与怪异模型展示效果差异：

标准盒子(W3c标准)：大小 = width(content) + border + padding + margin
在这里插入图片描述

怪异盒子(IE标准)：大小 = width(content + padding + border) + margin
在这里插入图片描述

布局采用哪种盒子模型，通过属性box-sizing可以设置：

  • content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)

  • border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型

  • padding-box：将padding算入width范围

前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
见贤思齐焉，见不贤内自省
12-15 4139
盒子模型（标准盒子模型和怪异盒子模型）
css盒子模型
08-22
CSS盒子模型有两种类型：W3C标准盒子模型和IE盒子模型（也称为怪异盒模型）。在标准模型中，元素的总宽度和高度等于内容区域加上内边距和边框；而在IE模型中，总尺寸仅包含内容区域，内边距和边框被加到了总宽度和...
盒子模型与怪异盒子模型
zshmiao的博客
07-20 395
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)：content(width/height) border margin padding 标准情况下盒子的width和height指的是内容的范围，不包含border和padding 盒子的占位=width+pa
详解CSS 怪异盒模型和标准盒模型
12-30
在html文档中，每个渲染在页面中的标签都是一个个盒子模型。 盒子模型又分为 ： W3C标准的盒子模型 和 IE标准的盒子模型。 由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： <!--html--> <div class=box1> <div class=box2></div> </div> <!--css--> .box1{ width: 200px; height: 200px;
CSS盒子模型与怪异盒模型
weixin_30902675的博客
08-09 3115
盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。 盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型）、第二种IE标准的盒子模型（怪异盒模型） 当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分...
CSS 盒模型和怪异盒模型
liuqiao0327的专栏
08-15 1019
CSS 盒模型和怪异盒模型 一.概念 盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间相互关系,CSS定义所有元素都可以拥有像盒子一样的外形和平面空间,即都包含内容区,补白(填充,内边距),边框,边界(外边距) 下面图片说明了盒子模型: Margin(外边距):在元素外边的空白区域,被称为外边距 Border(边框): 元素的边框 Padding(内边距) 元素内容到元素的边框之间的距离,也称补白. Content 盒子的内容 二.标准盒模型和IE盒模型 盒模型又分为标准盒模型(W3
css盒子模型 css margin 外边框合并
09-25
CSS盒子模型是Web开发中非常基础且核心的概念之一，它定义了元素框处理内容、内边距、边框和外边距的方式。了解和掌握CSS盒子模型，对于进行前端开发和网页布局至关重要。 首先，CSS盒子模型由四个部分组成：内容...
css盒子模型图解
12-13
然而，Internet Explorer（IE）采用了不同的盒子模型，称为IE盒模型或怪异盒模型。在这个模型下，内容区域包括了边框和内边距，使得元素的实际大小和占据的空间相等。因此，上述例子在IE盒模型下，元素的总宽度为...
CSS-标准盒模型和怪异盒模型
种子不服古怪的博客
09-06 273
这是一个目录~概述标准盒模型怪异盒模型 概述 标准盒模型:由w3c定义的标准的盒子模型,盒子的宽度为= margin2+padding2+border2+width 怪异盒模型(也称为IE盒模型):在IE浏览器中的盒子模型,盒子的宽度为= margin2 + content宽度,其中content宽度为padding2+border2+ width 下面是同一个html代码在不同浏览器中的显示 <!DOCTYPE html> <html lang="en"> <head&gt
1.盒模型和怪异盒模型
qq_37883356的博客
06-23 2984
一、盒模型类比    当我们在学习H5前端的时候，首先应该了解的是盒模型的结构，这样在写页面的时候才不会结构不清除，导致属性设置起来不明白，只是试出来，却不懂底层的原理。    首先可以先在html中写个div，然后给div加上width，height ，background；设置好之后在谷歌浏览器运行打开。会看到如下的界面：这个里面就会出现后下角这个div的盒子模型。万物皆盒子，每个标签写在ht...
CSS盒子模型和怪异盒模型
me_never的博客
10-09 267
CSS盒子模型具备的属性：内容(content)、内边距(padding)、边框(border)、外边距(margin) 。 盒子模型的定位： ①网页默认的布局方式 文档流指文档中能够明确显示对象在排列时所占用的具体方位。文档流不但是盒子模式定位的基础所在，它也是HTML中默认的网页布局模式，在没有特殊要求的情况下，页面中的块状元素呈现自上而下的动态分布形式，内联元素则是按照从左到右的方式存在。...
CSS--怪异盒子模型
{丸の子}
09-15 560
因为父盒子无边框时子元素增加 margin 会造成外边距穿透，此时需要给父盒子添加 padding ，添加 padding 会增大父盒子，需要手动重新计算父盒子 width ，因此利用怪异盒子模型省略重新计算 width 这一步。正常盒子下，当增加内边距时，如果想保证盒子和之前一样大，需要手动重新计算 width ，怪异盒子模型则省略该步。当父盒子无边框时，子盒子增加 margin 会造成外边距穿透。解决方法：给父盒子设置padding: 10px 0;
CSS盒模型、怪异盒模型
xu_yuxuyu的博客
11-01 1243
html零基础必看——CSS盒模型 前言 在我们使用css3进行网页布局时，往往会用到盒模型，一个大大小小的盒子就是来装内容的，可以说每一个标签元素都是一个盒子。本章将对盒模型展开讲述！ 第四章：CSS盒模型前言一、盒模型的基本认识1.1.什么是盒模型1.2.盒子的组成1.3.盒子的大小二、盒模型的四大组成部分2.1.内容区content2.2.内边距padding2.2.1padding属性值的写法：2.3.边框border2.3.1边框的风格2.3.2边框三个属性的值的写法2.4.外边距margin2.
盒子模型（怪异模型）
qac的博客
12-17 749
文章目录1.什么是盒子模型？2.盒子模型能够为我们解决什么问题?3.标准盒子模型和怪异盒子模型（IE盒子模型）4.两种模式的转换（通过box-sizing） 1.什么是盒子模型？ CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性： 内容(content)，也就是元素的 width、height 内边距(padding) 边框(border) 外边距(margin) 2.盒子模型能够为我们解决什么问题? 盒子模型主要是针对页
标准盒模型和怪异盒模型
weixin_46102597的博客
02-06 738
盒模型： 可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。 盒模型分为两种： 第一种是W3c标准的盒子模型（标准盒模型） 、第二种IE标准的盒子模型（怪异盒模型） 。 标准盒模型与怪异盒模型的表现效果的区别之处： 标准盒模型中 width 指的是内容区域 content 的宽度，height指的是内容区域content的高度。 padding和border不被包含在定义的w...
普通盒模型和怪异盒模型
Zheng_xinle的博客
08-26 7332
盒模型 一、什么是盒模型？ 1.根据盒子模型的概念，每个在页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子。 2.盒模型分为两种:分别是W3C标准盒模型（普通盒模型）和IE盒模型（怪异盒模型） ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020082620580221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmN
理解CSS盒子模型：维度、填充与边距
"理解CSS盒子模型对于前端开发至关重要。盒子模型定义了网页元素的布局方式，包括内容(content)、内边距(padding)、...CSS盒子模型是前端开发的基础，熟练掌握并运用这个模型，将使你在网页设计和布局方面游刃有余。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值