盒模型

最新推荐文章于 2022-02-25 10:00:00 发布
最新推荐文章于 2022-02-25 10:00:00 发布
阅读量424 收藏 1
点赞数 2
分类专栏： CSS 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46719868/article/details/116130094
版权

标准盒模型

在这里插入图片描述
标准和模型的width和height代指content的宽和高 并非是盒子的真实宽高
因为盒子的大小是由content，padding，border三部分组成 再加上margin确定盒子在页面中的位置
其实我们常用的还是标准盒模型 也就是box-sizing中的content-box 指的是 width和height是content的宽高并不是盒子的宽高
So我们在给盒子加border或是padding的时候盒子会被撑大 要想保持盒子原本的大小还得去重新计算content的width height 非常麻烦
后来CS3里面给我们提供了一个方式box-sizing：content-box 也就是所谓的怪异盒模型

IE怪异盒模型

在这里插入图片描述
IE怪异盒模型好处：
这里的盒子width和height指的是盒子的大小而不是内容的大小
也就是说 比如我写100100盒子最终也是100100不会被border，padding撑大， 它会自己通过自动缩放自己的content来实现盒子还是100*100 这样在写样式的时候就比较干净卫生了， 不需要每次都来计算width和height
So在大部分项目中都在应用这种box-sizing：content-box IE怪异盒模型
包括我看了Bootstrap以及各大ui组件element-ui 它们的公共样式里面源码大部分也是用的box-sizing：content-box 建议大家习惯性使用

现在在做移动端响应式开发的时候，其实好多布局方案我们可以应用于CS3新提供的 flex弹性伸缩盒模型来实现（膜拜阮一峰大大）

flex弹性伸缩盒模型

在这里插入图片描述
给父容器设置一个display：flex 这个盒子就会变成一个弹性伸缩盒子
盒子里面有两个轴一个是main axis（主轴，X轴），一个是cross axis（交叉轴，Y轴），盒子中的所有子元素都叫flex item（某一项）默认都是靠左上排列
可以通过设置justify-content主轴的排列方式 和align-items交叉轴的排列方式来控制flex item

以及多列布局（栅格化布局）

在这里插入图片描述
多用于pad 做一些文章类 类似于报纸
分左边中间右边三列布局 每列和每列之间的间隔线多粗多细 以及间隔多少 都可以通过以上属性来搞
OK~~
如果对你有一点点帮助的话点赞加收藏吧，互动必回噢~~~在这里插入图片描述

网页里的两种盒子模型(W3C盒子模型、IE盒子模型)
09-22
IE盒子模型，又称怪异盒模型，是Internet Explorer早期版本（尤其是IE5和IE6）采用的模型。在这个模型中，元素的宽度(width)和高度(height)已经包含了内边距和边框，因此在计算总尺寸时，不需要额外加上这些值。这...
boxmodel:CSS盒模型编辑器界面构建器输入试用
05-14
BoxModel-CSS盒子模型编辑器 BoxModel是一个jQuery插件，可帮助用户创建紧凑的表单输入，以编辑html表单中的box模型css。 它可以提交几个详细信息，例如单独的值以及可以在CSS块中使用的组合的优化单位。 它支持鼠标...
css3盒模型
陈梵的博客
11-13 300
box-sizing:content-box;和box-sizing:border-box；的差别： box-sizing: border-box; 写了这句话后padding值不撑开盒子，border也不会使盒子变大，cs3新添加属性。即盒子大小为宽度 div:first-child { /*盒子大小为width+padding+border*/ width: 2...
css3盒模型、弹性盒模型、怪异盒模型
热门推荐
冰雪为融的博客
03-27 1万+
一、CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。（marg...
盒模型宽高定义box-sizing
demographic2017的博客
02-28 236
以前盒模型默认的宽高是指内容的宽高。css3后可以用box-sizing来指定宽高。 box-sizing：content-box | border-box 默认值：content-box content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Elemen...
盒模型--宽度和高度
dmpnosvn28419的博客
08-30 842
盒模型--宽度和高度 盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。 因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 元素的高度也是同理。 比如： css代码： div{ width:200px; ...
盒子模型：
weixin_46174785的博客
08-26 370
什么是盒子模型： 1、根据盒子模型的概念，每个在页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子。 2、标准盒模型、IE盒模型的区别 如何使用盒子模型： 每个元素都是一个长方形盒子，有几个属性能确定这个盒子的大小。盒子的核心属性是元素的宽高，这两个值可能是由元素的display属性、元素的内容或具体的width，height属性值生成的。内边距padding和边框border拓展了元素的高宽。最后是我们定义的在边框外的外边距margin。 盒子模型对应的CSS属性为:width，hei
IE盒子模型和标准W3C盒子模型
12-09
**CSS中的盒子模型**是网页布局的基础，它描述了元素如何占用空间并相互影响。主要有两种盒子模型：**IE盒子模型**和**标准W3C盒子模型**。 **标准W3C盒子模型**遵循Web标准，它将每个HTML元素视为一个矩形盒子，...
详解CSS 怪异盒模型和标准盒模型
09-24
盒模型分为两种主要类型：W3C标准盒模型和IE怪异盒模型，这两种模型在处理元素的宽度和高度以及内边距和边框的方式上有所不同。 **标准盒模型**是W3C（万维网联盟）推荐的盒模型。在这个模型中，一个元素的总宽度...
css盒模型以及如何计算盒子的宽度
前端学习笔记
04-08 3440
盒模型与box-sizing盒模型与box-sizing盒模型元素外边距元素边框元素内边距元素内容box-sizingcontent-boxborder-box参考 盒模型与box-sizing 盒模型 每个存在于可访问性树中的元素都会被浏览器绘制成一个盒子(因为元素设置display:none后不存在于可访问性树中，所以不被浏览器渲染)。每个盒子都是由4部分组成的，它们分别是元素外边距、元素边框、元素内边距和元素内容。 元素外边距 元素边框 元素内边距 元素内容 box-sizing content-bo
【web】盒子模型，宽高的计算方式
逛街的喵啊
09-21 8675
前言好久没写canvas了，准备用canvas做个logo，但是突然发现对DOM节点的宽度、高度的计算有点忘记了，重新复习下吧。盒子模型在讨论宽高之前，先说下CSS的盒子模型： 每一个盒子都可以分为：content、padding、border、margin四个部分。 盒子模型分为两种：标准盒子模型和IE盒子模型 区别： 1.标准盒子模型中content中包含content 2.I
盒模型属性-width height-padding-border-margin
DIUDIUjiang的博客
02-25 1115
宽度 width： 作用：设置可以添加元素内容的区域的宽度。 属性值： 特殊应用： • 如果一个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其 特点自动计算出实际宽度，例如 <div>元素等独占一行的，其 width 属性的值会自 动撑满父元素的 width 区域，如果是<span>元素等不需要独占一行的，其 width 属性的值是内部元素内容自动撑开的宽度。 • <body>元素比较特殊，不需要设置 width 属性.
盒子模型中边框，内边距，外边距对盒子大小的影响
weixin_46026668的博客
10-29 2221
盒子模型中border，padding，margin对盒子大小的影响。 border是盒子的边框；padding是盒子的内边距；margin是盒子的外边距。 以下边一个例子来解释： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
HTML盒子模型:标准盒子模型和怪异盒子模型中的height和width
Tianqi_techshow的博客
12-29 1184
盒子模型:标准盒子模型,怪异盒子模型 标准盒子模型也被称为:content-box,在css的样式设计中的width和height设置的是内容区(content)的宽和高. 注意:在html页面中一个标准盒子所占的像素实际所占的宽和高还要算上内边距,边框,外边距. 怪异盒子模型也被称为:border-box,在css的样式设计中的width和height设置的是[内容区(content)+内边距...
自动计算盒子的宽高， box-sizing属性介绍。
weilai_a的博客
11-29 498
我们前端工作者在写项目的静态页面时，页面中某一部分的宽度高度是200px,此时就是指这个盒子本身的大小就是一个200*200的盒子（包括边框，内边距，外边距）。但我们写的时候会先给盒子宽高分别是200px,然后根据项目的实际要求设置边框线和内外边距(如果此时四个内边距都是相同的宽度，会简单一些，如果每个边的宽度都不同，那就比较麻烦了)，此时盒子总体的大小就改变了。为了解决这一问题，有了box-sizing这个属性，使用最频繁的属性值是：border-box 给大家上一段代码 .box{ .
CSS中width和height与盒子模型的关系
weixin_30861797的博客
09-08 285
盒子模型 css中盒子模型包含属性margin、border、padding、width与height，他们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西（element）；而填充（padding）就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框（border）就...
盒子模型讲解
wuxin0811的博客
09-08 565
1.CSS盒子模型： css盒子模型本质上是一个盒子，他包括外边距（margin）、边框（border）、内边距（padding）以及实际内容（content）四个属性。 下图直观的展示了盒子模型的构成： 2.css盒模型和IE盒模型的区别： 在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。 3.
css基础-盒模型知识
lewis的博客
02-22 489
简介：就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括IE 盒子模型(border-box)和标准的 W3C 盒子模型(content-box)。 区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width 的包含范围。 在标准的盒子模型中，width 指 content 部分的宽度。 在 IE 盒子模型中，width 表示content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异： 标准盒子模型的盒子宽度：左右 borde..
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1524
Document
盒子模型
最新发布
03-11
### CSS 盒子模型概念 CSS 盒子模型是网页布局的基础之一，用于描述页面上每个元素作为一个矩形区域的行为。这个矩形由四个部分组成：内容区（content）、内边距（padding）、边框（border）以及外边距（margin）。不同浏览器默认采用不同的盒模型计算方式。 #### 怪异盒模型与标准盒模型区别 在怪异盒模型中，`width` 和 `height` 属性不仅定义了内容区的尺寸，还包括了内边距和边框宽度，但不包含外边距[^1]；而在标准盒模型下，这些属性仅指定了内容本身的大小，额外的空间则通过独立设定 `padding` 及 `border` 来增加整体占据空间[^2]。 为了兼容这两种模式，在现代Web开发实践中推荐显式声明 `box-sizing` 属性： - 当设置为 `content-box` 时遵循W3C标准盒模型； - 设置成 `border-box` 则模仿IE的传统行为，即把 padding 和 border 计入到指定的宽高之内。 ```css * { box-sizing: border-box; } ``` 上述代码片段展示了如何全局应用 `border-box` 模型给所有HTML标签，从而简化样式表编写并提高跨浏览器一致性。 ### 使用方法实例 假设有一个容器需要固定宽度为300px，并希望其内部填充物加上边界不超过此限值，则可以如下操作： ```html <div class="container"> <!-- 子元素 --> </div> ``` ```css .container { width: 300px; /* 设定总宽度 */ padding: 20px; /* 添加内边距 */ border: 5px solid black; /* 定义边框 */ box-sizing: border-box; /* 应用 IE/Edge 的盒模型 */ } ``` 这样即使设置了较大的内外间距，`.container` 实际占用的空间仍然保持为300像素不变。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值