[frontend][css] width/height实际值与设定值不一致

最新推荐文章于 2022-09-12 22:37:10 发布

Lumine7

最新推荐文章于 2022-09-12 22:37:10 发布

阅读量802

点赞数 1

文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/Lumine7/article/details/124906156

版权

一句话：box-sizing:border-box;就好了

今天第一次碰到这个问题，感觉很奇怪，dom里元素的宽和高和我设置的不一致
排查一番，发现竟然把padding也加进去了，什么鬼啊

border-box:符合人思路的盒子，不会将padding加进来
content-box:莫名其妙，会把padding加进来？？
然后默认值貌似是content-box,无语

csdn真是莫名其妙，提示我太短质量不佳，md短了还不好吗，几句话说清的事，浪费读者时间

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lumine7

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端领域的前端CSS预处理器应用

前端视界的博客

04-27

739

CSS预处理器是现代前端开发中不可或缺的工具，它解决了原生CSS在大型项目开发中的诸多痛点。本文旨在全面介绍CSS预处理器的核心概念、主流工具选择、实际应用技巧以及最佳实践，帮助前端开发者更好地理解和运用这些工具提升开发效率。介绍CSS预处理器的基本概念和必要性深入分析主流CSS预处理器的技术特点通过实际代码示例展示预处理器的核心功能探讨在实际项目中的应用场景和最佳实践提供学习资源和工具推荐CSS预处理器：一种脚本语言，可编译成标准CSS，提供了变量、嵌套、混合等高级功能。

CSS解决浏览器显示盒子大小和实际设置盒子大小不一致的问题

qq_42452654的博客

02-08

3315

在学习CSS的盒子模型时，VScode中设置的盒子内容width值为200px，但在浏览器上实际显示250px。一开始以为是浏览器的缩放导致的，但经过查看排除了这个问题。由于采用的是win10系统，通过上网查询，我发现Windows设置中的显示，默认使用的是125%，在这里进行了缩放。将这里更改为100%，此时在浏览器上显示的效果和实际编码中的盒子大小就一致了。 ...

参与评论您还未登录，请先登录后发表或查看评论

CSS3 盒子设置border和padding不撑开盒子

西柚2015地信小白GISer

05-05

6759

普通的盒子模型我们设置border会将盒子撑大 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scal

设置的Height和实际值不符问题

weixin_43923673的博客

03-17

1124

场景是：设置height: 34px; 实际渲染出来的height为24.56px。原因是：弹性布局display: flex;影响了实际高度。

纠正css中对width的误解

aoluan2964的博客

05-23

224

对于width的数值为百分比的时候，表示该元素的长度是相对于父容器来算的。对于padding-right和padding-left比较好理解也是相对于父容器来算的，但容易出错的是padding-top和padding-bottom，很容易的以为是按height来算，其实，还是相对于width来算的同样magin也是同样的道理。以下转自w3school对width的解析：...

css中，input和button设置了同样的height，实际高度不一样

Cheryl的加工厂

08-11

955

给input和button设置了同样的height，实际高度却不一样此时需要给input设置box-sizing: border-box; <div class="search-container" > <input type="text"> <button>搜索</button> </div> input { position: absolute; top:0; left: 0; height: 32px; width

width css宽度设置的区别

前端开发＆搜索引擎优化

02-14

555

auto 自适应宽度，根据内容变化， 100％，页面最大宽度，要根据分辨率显示 0px 用具体数值固定宽度

有关css设置宽度和高度与浏览器打开的显示效果不一致的问题

qq_48795482的博客

09-06

4530

显示器的分辨率调整成和UI图的分辨率一致，然后，浏览器的缩放比例*显示器的缩放比例=1，你就可以正常的进行开发调试了。

构建鞋类在线商店前端：纯HTML/CSS与Bootstrap实践

基于Frontend Mentor的四卡片特性布局HTML/CSS挑战解决方案

- 尺寸和定位：包括宽度（width）、高度（height）、定位（position）、溢出（overflow）等属性。对于"fourCardFeatureSection"项目来说，要实现一个具有四卡片布局的特色部分，开发者需要使用CSS来设计每个卡片...

profile-card-component:这是Frontend Mentor使用纯HTML和CSS来解决“配置卡组件”挑战的我的解决方案

03-15

height: auto; object-fit: cover; } .name { font-size: 24px; margin-bottom: 10px; } ``` 这里，`.card`选择器定义了卡片的宽度、圆角和阴影，`.profile-image`确保了图片自适应并保持比例，`.name`设置了...

Frontend-Mentor1

03-17

SCSS是Sass最常用的语法格式，它与CSS语法高度兼容，可以编译成标准的CSS供浏览器解析。 ### SCSS的核心特性： 1. **变量（Variables）**：SCSS允许你定义变量来存储颜色、尺寸、字体等值，避免在整个代码中重复...

动态添加的html如何获取宽度,jquery动态添加元素后，获取元素宽度与实际宽度不一致...

weixin_34835470的博客

06-08

688

代码如下Slideout Demo.product_list_con{text-align: center;}.product_list{display: inline-block;}.product_list li{display: inline-block;}.product_list li img{display: block;}var pros=[{imgSrc:"app/images/i...

css盒子尺寸的width和height的设置通过谷歌浏览器打开后和vscode代码设置不一样如何解决？？？

longzaixueit的博客

06-13

1160

1.浏览器浏览百分比的设置可以按住ctrl，滚动鼠标进行设置 2.版本兼容性不同 chrome从26版开始就这样了，抛弃了Windows系统默认的菜单样式，转而使用自定义的一套新的菜单样式，也包括右键菜单。新的菜单样式比以前间距更大，没有了左侧的竖条，且加入了明显的阴影设计。如果想要回到之前Windows系统默认的菜单样式的话，只需右键点击Chrome快捷方式（如桌面上的快捷方式），进入属性设置，找到快捷方式标签，在目标一栏的最后加入-disable-new-menu-style即可(需在前

CSS HTML实现后，却发现与屏幕宽度不一致，超出部分如何解决？

柠夏

04-05

4861

div宽度与屏幕的大小不一致，试了很多方法无法解决！咱们这次要实现的是宽度自适应，与屏幕大小一致，可是但整体的内容编程出来后却是”宽度超出很多，如下图：“ 相信大家都有遇到过这种类似情况，在我上网搜索了解决方法后，仍然不能解决我的超出宽度。（第一种使用：width：auto; overflow：hidden）（第二种使用：宽度：100％;填料;箱上浆：边界框;）下面是我的解决方案，首先使用一个meta标签屏幕的自适应宽度，然后加使用一个大div包裹住，使用CSS样式将屏幕宽度去掉,下面奉上代码图

盒子边框宽度和设置的值不符的原因

qq_45852515的博客

09-12

1389

盒子边框宽度和设置的值不符的原因

[前端] 关于html元素大小理论值和测量值不一致的问题

swordtraveller的博客

02-21

1736

场景: 我做了一个理论值width:200px的盒子：可是，测量值却是250px：这到底是为什么呢？其实，答案很简单，回到桌面，右键，显示设置：可以看到显示缩放倍数是125%，也就是1.25倍，而250/200=1.25 至此，谜底就揭开了。 ...

java前端div浮动靠左_前端硬核面试专题之 CSS 55 问

weixin_39607865的博客

11-23

580

前言本文讲解前端面试的 CSS 的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！注意：文章的题与题之间用下划线分隔开，答案仅供参考。笔者技术博客首发地址 GitHub，欢迎关注。CSS盒子模型的理解 ?标准模式和混杂模式(IE)。在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止...

小程序css中border-style设定开发端与真机预览显示效果不一致？

AlexanderRon的博客

02-24

713

引言我又又又遇到了这个问题…小程序中设定的css样式开发端与真机显示的效果不一样，在小白眼里这样很崩溃的 QAQ，于是我又又又请教了资深的大佬，在这里尤其感谢小程序开放社区undefined用户，为我结决了困扰。！！！！膜拜大佬！！！！代码片段 <view class='basicScancodeGet'> <view class='bk-scancode'> ...