HTML+CSS box-sizing：border-box应用场景

最新推荐文章于 2024-05-30 19:20:10 发布
最新推荐文章于 2024-05-30 19:20:10 发布
阅读量278 收藏 1
点赞数 1
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60715842/article/details/126284934
版权

1. 设置生效场景
对于明确设置宽高的块级元素，设置box-sizing：border-box属性后，块级元素的内容+border的大小会严格限制在块级元素的宽高内

不设置时，border往外扩张

在这里插入图片描述
设置后，border限制在content元素内

在这里插入图片描述

 

 


2. 不需要设置情况
块级元素嵌套，父元素设置好宽高，子元素aotu时，子元素border+内容自动限制在父元素里面

在这里插入图片描述
定位

在这里插入图片描述 

 


flex

在这里插入图片描述

 

总结：当块级元素的 宽 或者 高 的值auto时，内容+border就不会超出父元素宽高范围，会被压缩在父元素内容里面
 

从入门到放弃;-)
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解CSS3中的box-sizing（content-box与border-box）
12-14
CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
12-13
有时我们会给页面的元素（比如div）设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话，那么这个div就会被撑大。... box-sizing: content-box|border-box|inherit;  值 描述 conte
为什么要用box-sizing: border-box？一般什么时候用？
Andrelia的博客
09-16 8601
1新建一个HTML文档，并定义一个块元素，CSS示例：.normal{width: 100px; height:100px; background: blue; }步骤阅读2保存文件，预览效果，步骤阅读3再次加入一个DIV并在原有的CSS上复制一份，加入Padding属性，示例：.normal-padding{       &n...
html自适应分栏,border-box实现自适应分栏布局(示例代码)
weixin_39742727的博客
07-03 315
简介这篇文章主要介绍了border-box实现自适应分栏布局(示例代码)以及相关的经验技巧，文章约1210字，浏览量245，点赞数4，值得参考！最近看些老东西，发觉ie下的盒模型用处还是挺大的content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&...
html盒子游戏border,box出现边框css
weixin_36155560的博客
06-03 151
听测评说锐龙ryzen打网游帧数很低，有没有用zen玩MD官方表示,锐龙AMD Ryzen1800处理器在1080P落后的原因在于优化问题。Intel和游戏厂商合作多年的优化水平目前AMD还无法达到,但后续随着更多开发者接触到Ry想买映泰TB350-BTC建矿机，可有人说A平台和和nvidi...不是的,记得前阵子新闻说,英伟达的老黄和AMD的CEO苏姿丰女士说英伟达显卡和锐龙处理平台是非常好的搭...
border-sizing属性详解和应用
weixin_33912445的博客
07-27 276
box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式，不再冗赘。 1. 属性讲解 content-box 默认值，也是css2.1中的盒子模型。在计算width和height时候，不计算border、padding和margin。高度、...
最简单的方式理解html和css中border-box如何防止撑大盒子
weixin_50070528的博客
07-05 1444
最简单的方式帮助你理解html和css中关于border-box属性的作用，如何防止盒子被撑大
从box-sizing:border-box属性入手，来了解盒模型
热门推荐
qq_26780317的博客
06-20 13万+
从最开始学习CSS的时候，就了解了盒模型的概念，今天，我们从其中的box-sizing:border-box;的属性入手，来重新认识一下盒模型在实际项目中的运用。 背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框...
CSS3 box-sizing属性详解
12-13
box-sizing属性包括content-box（default），border-box，padding-box。  1、content-box，border和padding不计算入width之内  2、padding-box，padding计算入width内  3、border-box，border和padding计算入...
CSS3属性box-sizing使用指南
12-13
box-sizing用于改变CSS盒子模型，从而改变元素宽高的计算方式。 box-sizing取值如下： 复制代码代码如下:box-sizing: content-box | padding-box | border-box 默认值是 content-box ，对应CSS2.1规范中标准的盒子...
详解HTML的盒模型以及HTML相关知识点
rr20060119的博客
10-14 2710
HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于创建网页结构的标记语言。HTML用于描述和定义网页的结构和内容，通过使用标签和属性来标记和组织文档中的各个元素。一个HTML文档由DOCTYPE>文档类型声明、根元素以及头部和主体组成。HTML标签用于定义文档的不同部分和元素，如标题、段落、链接、图像等。每个标签通常有一个起始标签和一个结束标签，并可以包含其他嵌套标签。
CSS实现一个雨滴滑落效果
云加速
05-28 1236
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css让padding、border不占据宽度
于忠会的博客
05-29 435
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS3 开始可以通过 box-sizing 来做到这一点。则包含 padding，div 的实际宽度为 120px。CSS3 新增了 box-sizing 属性。则 div 的实际宽度为 120px。以前，如果指定 div 的宽度为。
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
lbcbjtlhmjq的博客
05-30 720
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
【JS实战案例汇总——不定时更新版】
微木
05-30 332
练习JS的实用案例，倒计时算法、定时轮播图
CSS学习笔记之高级教程（四）
wz_1992的博客
05-30 732
19、CSS 用户界面 19.1 CSS 调整大小：resize resize 属性规定元素是否应（以及如何）被用户调整大小。 resize: horizontal;水平方向可改变大小 resize: vertical;垂直方向可改变大小 resize: both;水平+垂直方向都可改变大小 20、CSS 变量：var()函数 var() 函数用于插入 CSS 变量的值。 var() 函数的语法如下：var(name, value)，变量名称必须以两个破折号（--）开头，且区分大小写！ 20.1 C
tailwindcss 最简单的使用方式
最新发布
前端蜗牛君
05-30 425
从头开始使用Tailwind CSS的最简单和最快的方法是使用Tailwind CLI工具。
【推荐】用scss循环zoom缩放比例，解决可视化大屏在不同分辨率屏幕下的适配问题
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-30 221
指定几种常规屏幕宽度（用这种方式就必须要强制用户全屏查看页面，在固定的宽度下才能达到比较不错的显示效果）从像素1024循环到2560宽度的情况（会导致很多冗余的css代码，但是基本上所有的宽度情况都囊括了）
css中box-sizing: border-box
07-15
CSS中的box-sizing属性用于控制盒模型的计算方式，其中`box-sizing: border-box;`是一种常用的取值。 默认情况下，当设置元素的宽度和高度时，浏览器会将这些尺寸值应用于元素的内容框（content box），然后再加上边框（border）、内边距（padding）和外边距（margin）。这种盒模型被称为"content-box"。 而当设置`box-sizing: border-box;`时，元素的宽度和高度将包括边框和内边距，即尺寸值会应用于整个盒子模型。这意味着，设置了固定宽度和内边距的元素不会超出指定的宽度，因为边框和内边距会包含在内部。 使用`box-sizing: border-box;`可以更方便地控制元素的尺寸，尤其在响应式布局中经常被使用。例如，当使用百分比定义宽度时，结合`box-sizing: border-box;`可以确保元素的宽度不会超出父容器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值