css3盒子模型内减模式和外加模式

最新推荐文章于 2025-05-29 10:30:11 发布
最新推荐文章于 2025-05-29 10:30:11 发布
阅读量3.8k 收藏 7
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Evan_QB/article/details/77986074
本文详细介绍了CSS中的两种盒模型：content-box与border-box的区别及应用。content-box模式下，设置的宽高为内容区域，加入边框和内边距会导致盒子整体变大；而在border-box模式中，设置的宽高包括了所有边框和内边距，因此增加这些元素不会改变盒子的整体尺寸。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

内减模式border-box

外加模式content-box


content-box 为 外加模式，用户设置的宽度和高度是相对稳定的，增加border、padding会使整个盒子变大


border-box： 为内减模式，盒子的实际宽度和高度是固定不变的，用户已经设置好的width和height。 增加border和padding的值，不会改变盒子的大小，只改变内容区域的大小,border-box 改变border padding不会影响到其他的盒子





CSS新增样式----圆角边框、盒子阴影、文字阴影
m0_64365419的博客
12-07 1478
在CSS中新增了三个样式，分别是圆角边框，盒子阴影，文字阴影。border-radius属性用于设置元素的外边框圆角语法如下： 原理如下：[椭]圆与边框的交集形成圆角效果。举例：当length为10px时： 显示效果如下：当length为40px时： 由此可见，。方法：如果是正方形，直接将length设置为高度或者宽度的一般即可，或者直接写50%，如果是矩形，设置为高度的一半即可这里我们以将正方形转变为圆形进行举例。举例： 显示效果如下：此外length可以使用一个、两个，四个具体的数值进行替换，一个值--
CSS3知识点笔记————基础（五星）
斗师——Ace
10-15 728
添加小程序，兑换各种视频教程/数据资源。 1.作用：美化和修饰HTML。又叫层叠样式表，样式表，级联样式表。 2.优点： 2.1可以更好的将格式与结构分离。 2.2可以更好的控制页面的布局。 2.3可以制作体积更小，下载更快的网页。 2.4可以将多个网页同时更新，比以前更快更容易。 3.使用CSS的三种方式： 3.1内联式：...
CSS3 盒子模型(box-sizing: border-box(内减模式))
houyanhua1的专栏
03-21 2020
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; h
内减盒模型
王延朕的博客
05-14 259
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内减盒模型</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{
CSS选择器全解析：从基础到进阶
最新发布
qq_45357079的博客
05-29 1000
本篇文章主要对css的常用选择器进行了讲解，从单个选择器的使用到复合选择器的嵌套，同时还说明了在css文件的使用中所要遵循的两种特性，一种是继承，另一种是层叠，最后对较复杂的选择器进行了简单的说明与示例。选择器是css文件的基础，只有将选择器的原理彻底理解才可以在以后的网页设计中时更加清醒。
CSS3盒子模型（内减模式）
Charlie8915的博客
01-08 868
box-sizing：boder-box 转载于:https://www.cnblogs.com/Yanss/p/10241500.html
css3 内减模式
只作为个人备忘录
02-01 2931
div{ width:220px; height:150px; background:url(C:\\Users\\admin\\Desktop\\xlj.jpg) no-repeat; margin:50px; border-radius:15px; position:relative; } div:hover:before{ content:"
html5css3:盒子内减属性
GS2016的博客
01-30 2508
盒子内减属性 div{width:300px;height:300px;background:pink;margin:30px auto; border-radius:15px; box-shadow: 2px 2px 2px 2px #CCCCCC;} div:first-child{padding:30px;} div:last-child{ paddin
HTML5andCSS3面试题大全
donglize521521的博客
03-08 6086
文章目录1.CSS引入(1)有哪些引入方式？通过link和@import引入有什么区别？（* ）(2)Style 标签写在 body 后和 body 前有什么区别？(3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC2.CSS选择器(1) CSS选择器种类(2)CSS选择器的优先级3.CSS伪类和伪元素4.CSS盒模型4.有哪些方式（CSS）可以隐藏页面元素？4.**em\px\rem区别？****5.块级元素水平居中的方法？** 1.CSS引入 (1)有哪些引
自学前端第十八天:CSS精准定位position
weixin_47592060的博客
04-30 1498
超级重点:CSS精准定位(position) 一. ①CSS定位基本概念:如果说, float浮动关键在一个 “浮起来” 字上面， 那么 我们的position定位关键在于一个 “精准位” 上。 ②CSS定位目的上，如果说，浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的"任意坐标"位置上去。 ③CSS定位本质上: 不仅能像float浮动一样,可以脱离文档流束缚的情况下将元素放在你想放置的位置,还可以帮助你快速精准,。就跟高德地图精确的定位系统一样，
HTML+CSS的练习之网上书城主页面的实现
热门推荐
striner的博客
12-01 3万+
博主终于把CSS学完了,废话不说,先上代码~   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;bookStore&lt;/title&gt; &lt;style type="text/css"&gt; .clear{
html+css实战103-内减模式
geyaoisnice的博客
06-11 602
html
标准盒子模型和怪异盒子模型（内减模式）（box-sizing）
挺挺人生的博客
11-20 1160
标准盒子模型和怪异盒子模型（内减模式）（box-sizing） box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行/列为。 默认值：content-box 不可继承 值 content-box 默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距...
css 设置相关-过渡系列-内减模式-阴影系列
qq_40301211的博客
03-25 385
过渡系列 过度本质上不是动画，是css的某一个属性变换到另外一个属性的过程 transition: 过渡的属性 过渡的时间 过渡的曲线 过渡的延迟时间 内减模式 自动减去padding和border值 不需要手动去减 box-sizing: border-box; 取值： border-box 自动内减 content-box 手动内减 1.盒子阴影 box-shadow: 水平偏移 垂...
盒子模型标准模式与怪异模式内减盒模型
前端小99的博客
08-19 470
盒子模型-怪异模式和标准模式 首先，两种模式可以利用box-sizing属性进行自行选择： 　　标准模式：box-sizing:content-box; 用户设置的宽度和高度是相对稳定的，增加border、padding会使整个盒子变大 　　怪异模式：box-sizing:border-box; 为内减模式，盒子的实际宽度和高度是固定不变的，用户已经设置好的width和height。 增加border和padding的值，不会改变 盒子的大小，只改变内容区域的大...
响应式布局 内减盒模型 媒体查询 嵌入式布局
前端小99的博客
03-21 307
百分比布局： 标准流和浮动： 1width，padding，margin父盒子内容宽比值 2 height父盒子内容高的比值 3 border不能使用百分数 内减盒模型 盒子设置width,height，再设置padding，border盒子的占有区域变大，内容区域不变。这种称为外扩盒模型 css3增加的属性，内减盒模型 盒子设置width,height，再设置p...
css定位-css新增选择器（内减，属性，伪类，2d变换，过渡）
qq_52711676的博客
06-08 719
定位的使用：1.4种定位方式：静态、相对、绝对、固定2.4种边偏移属性：left、right、top、bottom注意：偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 （向下走）所有标准流都是静态定位语法： 2.相对定位 相对于自身在标准流的位置进行定位移动语法： 使用场景：微调元素和配合绝对定位来实现效果从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html停止语法： 使用场景：配合相对定位使用（
前端笔记—从入门到坟墓[CSS3][CSS3内减模式][15]
qq_29018891的博客
10-19 546
css与css3盒子模型对比 css盒子模型盒子内容宽实际等于width+padding 而css3盒子内容宽就等于width 由于以上盒子模型的不同之处，所以衍生出两个模式
深入掌握CSS盒子模型：实战应用解析
CSS盒子模型是CSS布局的基础，它定义了元素框处理元素内容（content）、内边距（padding）、边框（border）和外边距（margin）的方式。通过深入理解CSS盒子模型，可以更好地控制页面布局和元素尺寸，实现响应式和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值