内容盒子(W3C盒子)和边框盒子(IE盒子)的区别和盒子间的margin塌陷

最新推荐文章于 2024-07-27 09:56:28 发布
最新推荐文章于 2024-07-27 09:56:28 发布
阅读量233 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41385844/article/details/107941806
版权

. 内容盒子【W3C标准盒子】【默认】
box-sizing:content-box;
width = 内容宽所占的宽 = width + padding + border + margin
在这里插入图片描述

边框盒子【IE盒子】
box-sizing:border-box;
width = 内容宽 + padding + border所占宽 = width + margin
在这里插入图片描述
margin重叠【margin塌陷】
两个盒子上下排布，竖直方向的margin不叠加，只取较大的值作为两个盒子的间距(水平方向的margin是可以叠加的)

悲伤灬年华丶
关注
内容盒子和边框盒子的区别
William_fang的博客
04-30 708
文章目录1.content-box2.border-box 1.content-box 内容盒子：是从内容开始计算的，可以被称为W3C盒子、标准盒子、传统盒子。 网页默认是内容盒子。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
边框盒子和内容盒子的区别
weixin_45759895的博客
11-11 1273
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) - 清除边框外...
盒子模型-小了解
最新发布
wait_cai_niao的博客
07-27 1157
什么是盒子模型？我们可以把所有的html标签都看作一个盒子，这些盒子就像我们生活中的快递，每个盒子都存在 内容（买的物品）、保护层（内边距）、快递盒（边框）、快递之间的距离（外间距）。所以，盒子模型主要定义了四个区域：内容（content）、内边距（pading）、边框（border）、外间距（margin）。盒子模型有两种一种是W3C模型，另一种是IE怪异盒子模型。我们常见的盒子模型是W3C盒子模型，这种我们定义的宽、高就是内容的宽、高，而真正盒子的宽高则是 内容宽高+内边距+边框。
CSS中内容盒子(w3c盒子)与边框盒子(IE盒子)的区别
qq_44102500的博客
08-17 415
CSS中内容盒子(w3c盒子)与边框盒子(IE盒子)的区别 1.什么是内容盒子(w3c盒子) ​ 默认的盒子模型，使用box-sizing属性可以改变盒子模型，取值为content-box的盒子为默认盒子模型 ​ 特点：当我们为一个盒子指定width属性的时候，实际上width仅为内容的宽度，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。高度也一样。 .content{ width: 100px; height: 10
CSS边框盒子和内容（默认）盒子的区别
gfhdgo的博客
08-16 564
一、内容盒子（默认盒子） 内容盒子也称为普通盒子，也是默认使用的盒子。其特点为：当我们为一个盒子指定width属性的时候，实际上width仅为内容content的宽度，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。他的box-sizing的值为content。可以通过box-sizing来改变一个元素的盒子类型 内容盒子： 内容区域宽： width； 内容区域高：height 盒子的宽：paddingLift+ ...
边框盒子border-box和内容盒子content-box
weixin_45466923的博客
08-09 1022
content-box 内容盒子 box-sizing:content-box; 内容盒子也被称为“传统盒子”“标准盒子”“w3c盒子” width = 内容宽 height = 内容高 所占的宽 = border + padding + width 所占的高 = border + padding + height 在浏览器视口查看 border-box 边框盒子 box-sizing:bord...
css盒子模型 css margin 外边框合并
12-01
边框则是围绕内容和内边距的线条，可以自定义颜色、样式和宽度。外边距则是边框之外的透明空间，用于与其他元素保持距离。 在CSS中，`width`和`height`属性仅影响内容区域的大小，而不包括内边距、边框和外边距。当...
初识HTML（五）进阶：CSS盒子模型、页面布局
Simple子夜
03-13 1万+
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容（文本、或者图片、或者其它标签）。 盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 标准的W3C盒子模型： 元素的宽度和高度 重点: 当你指定一个 CSS 元素的宽度和高度属性时
盒子模型练习配套源码.zip
03-30
默认情况下，浏览器使用W3C标准盒子模型，即`width`和`height`属性指的是内容区的尺寸。但也可以通过`box-sizing`属性改变盒子模型，将其设置为`border-box`，使得`width`和`height`包含内边距和边框。 接下来，...
实现盒子水平和垂直居中的问题和解决方法
qq_53172414的博客
07-16 860
transform: translate,margin实现盒子水平和垂直居中的问题和解决方法
css盒子使用margin修改外边距出现嵌套块元素垂直页边距的塌陷问题及其解决方法。
longzaixueit的博客
06-15 338
1.在平时的操作过程中我们经常会使用两个盒子的嵌套问题，今天带大家来分析一下盒子嵌套问题的分析和三种解决方法. 2.首先我们在vscode中写入两个盒子box1和box2，其中box1的
CSS第三章：2.详解盒子模型 box-module（content内容区、border边框、内外间距）
要思考，要努力
04-28 1808
总览1.盒装型（box module），也称为盒子模型、框模型2.CSS将页面中所有的元素都设置为了一个矩形的盒子3.将元素设置为矩形的盒子之后，对页面的布局 就变成了 将不同的盒子摆放到不同的位置 一、盒装型 1.每个盒子都由以下部分组成： · 内容区（content） · 边框（border） · 内边距（padding） · 外边距（margin） 2.盒子模型图解： 二、盒装型 · content 内容区 1.内容区功能： 元素中所有的内容和子元素的文本内容都在此处排列，不会超出内容区的范围
CSS盒子模型（内容盒子，边框盒子）
m0_51444184的博客
08-10 186
CSS盒子模型仅仅是一个形象的比喻，每一个可见的HTML元素都是一个盒子，一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）以及content（内容）。 内容盒子(W3C盒子) 默认盒子模型 W3C盒子 ​ 使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。 width：内容宽度 height：内容高度 盒子宽度：左border+左padding+width+右padding+右border 盒子高
盒模型、边框、内边距、外边距、水平布局、垂直布局 、外边距的折叠 、内联元素的盒子、盒子的大小
2302_79245293的博客
10-12 80
margin-left，margin-right为auto，width为固定值 同时调整margin-left，margin-right。margin-left，width为auto，margin-right为固定值 调整width。width，margin-right为auto，margin-left为固定值 调整width。5.2如果有auto，margin-left，width，margin-right可以被设置为auto。border-bottom-right-radius 设置右下角。
css中内容盒子，边框盒子和过渡的属性和方法
AYYYY192018的博客
09-15 116
CSS盒子的三种类型（border-box、content-box）
热门推荐
Erya Programming learning
06-01 3万+
文章目录一、CSS盒子1.1 盒子的四个区域二、CSS盒子的类型1.content-box 内容盒子content-box盒子的宽高计算公式2.border-box 边框盒子3.特殊的盒子：替换元素 一、CSS盒子 一个盒子通常包括四个区域，让我们先写一个设置好width和height属性的div。 1 示例1： <style> .box { width: 100px; height: 200px; } </style> <div class = "box"&
前端问题总结
2301_79614379的博客
12-10 53
本次总结主要细讲前端学习中遇到的常见问题本周总结了前端学习中遇到的一些问题，并说明了解决方法，经过一段时间的沉淀，对前端的理解更加深刻。
内容(content)、填充(padding)、边框(border)、边界(margin)：CSS中盒子模型有何区别？
哈里·雪利博客
12-12 1万+
什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名： 内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。  一个盒子模型由 content(内容)、border(边框)、padding(间隙)和margin(间隔) 这四个部分组成： 一、border    border一般用于分离
使用DIV+CSS实现整体布局：盒子模型详解
"该资源主要介绍了使用DIV+CSS进行网页布局的基本概念和实践，强调了遵循W3C标准的重要性。内容涵盖了盒子模型、常见的HTML标签、CSS样式设置以及W3C标准的构成部分。" 在网页设计中，`盒子模型`是理解网页布局的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值