开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么Loader不设置父元素的宽度和高度？

Loader是一种用于显示加载状态的动画效果，通常用于网页或应用程序中的异步操作或资源加载过程中。在设计Loader时，一般不设置父元素的宽度和高度，原因如下：

灵活性：不设置父元素的宽度和高度可以使Loader适应不同大小的父元素。这样，Loader可以在不同的容器中使用，而无需手动调整父元素的尺寸。
响应式设计：不设置父元素的宽度和高度可以使Loader在响应式设计中更加灵活。当父元素的尺寸发生变化时，Loader可以自动适应并保持良好的显示效果，而无需手动调整。
兼容性：不设置父元素的宽度和高度可以提高Loader的兼容性。在一些特殊情况下，父元素可能具有动态变化的宽度和高度，或者是由其他组件动态生成的，此时设置固定的宽度和高度可能导致显示异常或不完整。
可重用性：不设置父元素的宽度和高度可以使Loader更具可重用性。当需要在不同的页面或组件中使用Loader时，无需关心父元素的尺寸，只需将Loader插入到相应的位置即可。

腾讯云相关产品推荐：

腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb_mysql
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai

相关搜索:Angular -如何获取元素的宽度和高度 html img，宽度为100%，并裁剪为父元素的高度，这是不固定的 Qt QGridLayout元素的宽度和高度相同，为什么在<img>元素中保持高度和宽度的比例？为什么子元素的宽度之和大于父元素的宽度？使用javascript设置rems中元素的高度和宽度如何将画布的宽度和高度设置为浏览器的所有高度和宽度而不溢出？如何控制svg元素的宽度和高度如何根据父元素的高度/宽度变化来调整内部元素？如何根据父视图的高度设置子视图的宽度？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

C# dotnet 使用 OpenXml 解析 PPT 元素的坐标和宽度高度

本文将告诉大家如何从 PPT 里面解析出通用元素的 x 和 y 的值，以及元素的宽度和高度的值在开始之前请看 C# dotnet 使用 OpenXml 解析 PPT 文件在拿到 slidePart.Slide.CommonSlideData.ShapeTree...里面的元素，几乎所有元素都存在坐标和宽度高度，这里的元素我称为通用元素，也就是不是特定的如形状、图片元素此时的元素应该是继承 OpenXmlElement 类，在这个类里面可以通过 GetFirstChild...element 是 OpenXmlElement 类拿到了 ShapeProperties 实际上就是 PPT 文件的 p:sppr 内容，在 PPT 里面将会用如下格式设置元素里面的值中 a:xfrm...ext 获取元素的宽度和高度，请看代码 var extents = transform2D.GetFirstChild();...UWP 中设置元素的坐标请看 win10 uwp 拖动控件 ----

1.6K1 0

【CSS】盒子模型内边距 ⑤ ( 内边距不影响盒子模型尺寸的情况 | 不设置宽度或高度为其设置 Padding 内边距时不撑开盒子 )

文章目录一、内边距不影响盒子模型尺寸的情况二、内边距影响盒子模型尺寸的情况一、内边距不影响盒子模型尺寸的情况 ---- 如果元素没有指定高度 , 为该元素设置 Padding 内边距 , 则不会撑开盒子...; 下面的代码中 , 父容器是 div , 子容器是 p , p 标签的宽度默认充满父容器 , 如果没有为其设置父容器的宽度 , 为 p 标签设置内边距 , 不会撑开盒子 ; 代码示例 : 内边距不影响盒子模型尺寸的情况展示效果 : 测量模型宽度 : 测量模型高度...: 二、内边距影响盒子模型尺寸的情况 ---- 如果给 p 标签设置了具体的尺寸 , 为其设置 Padding 内边距 , 会撑开盒子 ; 代码示例 : <!...像素 ; 测量高度 : 没有设置垂直方向上的内边距 , 没有撑开效果 ;

1.4K2 0

【面试题】CSS知识点整理(附答案)

BFC(块格式化上下文) 常见布局的实现 1. 伪类和伪元素 为什么引入? css引入伪类和伪元素概念是为了格式化文档树以外的信息。伪类和伪元素是用来修饰不在文档树中的部分。...，来实现高度满足宽度的某个比例。...[13] 9.清除浮动方法及原理 为什么要清除浮动：父元素因为子级元素浮动引起的内部高度为0的问题。...元素浮动， right元素设置 width: 100%; padding-left:left元素的宽度; 右边宽度固定, 左边宽度自适应左右都浮动,左边自适应元素设置外层div 100%宽度, 这样就会独占一行...如果不增加任何标签，想实现更完美的布局非常困难，因此双飞翼布局在主面板上选择了加一个标签双飞翼布局 1.三者都设置向左浮动。 2.设置middle宽度为100%。

1.5K4 0

布局常用解决方案对比(媒体查询、百分比、rem和vwvh）

百分比的具体分析（1）子元素height和width的百分比子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height...，则相对于直接非static定位(默认定位)的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。...百分比单位缺点从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：（1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位...比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂...各个单位具体的含义如下：单位含义vw相对于视窗的宽度，视窗宽度是100vwvh相对于视窗的高度，视窗高度是100vhvminvw和vh中的较小值vmaxvw和vh中的较大值这里我们发现视窗宽高都是100vw

1.9K4 0

腾讯前端二面面试题_2023-03-01

对于行内元素和块级元素，其特点如下：（1）行内元素设置宽高无效；可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；不会自动换行；（2）块级元素...清除浮动的方式浮动的定义：非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。...父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素会跟随其后若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构清除浮动的方式如下：给父级div...父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边...解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。

1.2K1 0

「兔了个兔」CSS如此之美，看我如何实现可爱兔兔LOADING页面（万字详解附源码）

； margin: 0;消除元素外边距，即使元素与周围元素之间也没有任何间距； box-sizing: border-box;这个属性是用来定义元素的盒子模型，它指定元素的宽度和高度包括内容区...height: 31em;和分别指定容器的高度和宽度为 31em，这里使用 em 单位，相对于其父元素的字体大小来定义元素的大小;width: 31em; position: absolute...它使用百分比单位，表示相对于元素自身的宽度和高度，因此表示元素的中心点需要向左移动其宽度的一半，向上移动其高度的一半；-50% top: 50%;和用来指定元素距离父元素顶部和左侧的距离，也是相对于父元素的百分比...height: 8.12em;和width: 15.62em;分别定义了元素的高度和宽度。...height: 7.31em;：设置伪元素的高度为7.31em。 width: 1.37em;：设置伪元素的宽度为1.37em。

4276 0

金九银十前端面试题总结（附答案）

（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。...如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。...（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。...vw：相对于视窗的宽度，视窗宽度是100vw；vh：相对于视窗的高度，视窗高度是100vh；vmin：vw和vh中的较小值；vmax：vw和vh中的较大值；vw/vh 和百分比很类似，两者的区别：百分比...解决：父元素position改为absolute或static；元素没有设置position属性为非static属性。

7554 0

前端小知识：为什么你写的 height：100％不起作用？

为什么想要设置一个全屏元素的时候，高度不受%的控制？...100%很容易就实现的，但是这里的height却不能设置成%比的（该元素会消失看不见），这是为什么呢？...3.浏览器是如何计算高度和宽度的 Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。...即我们不设置宽，会自动填满整个横向宽度，如下：但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。...全部代码如上，可以看到设置了line-height为100%没有居中，这是为什么呢，因为这时候的%是相对于字体尺寸的？所以直接作用于没有绝对高度的元素是不行的。

1.5K5 0

CSS基础布局

浮动 + margin * inline-block布局 (用起来方便，但是小问题较多) * flexbox布局盒模型如下图所示：宽度和高度指的是content的宽度和高度 margin指的是...* float元素会从父级元素的空间中消失 * 父级元素可能会高度坍陷解决思路： 1. float元素进行设置float时，float...span默认是 inline元素，而inline元素是不能设置宽高的，这里span为什么会有宽高？ float使span成为了一个BFC块，使得span可以设置宽高。...高度height：0；visibility: none; position: absolute元素，脱离文档流，无法继承父元素的高度，因此需要显示的指定高度。...如何清除浮动，为什么清除浮动这是因为 float元素不会占据父元素的布局空间，有可能 float元素就会超出父元素，从而对其它的元素造成影响。

2.9K2 0

百度前端二面高频面试题合集

（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。...如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。...（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。...vw：相对于视窗的宽度，视窗宽度是100vw；vh：相对于视窗的高度，视窗高度是100vh；vmin：vw和vh中的较小值；vmax：vw和vh中的较大值；vw/vh 和百分比很类似，两者的区别：百分比...解决：父元素position改为absolute或static；元素没有设置position属性为非static属性。

9543 0

一个合格的初级前端工程师需要掌握的模块笔记

自动换行word-wrap word-wrap: break-word; 基本样式宽度width width:200px; 定义元素的宽度高度height height:300px 元素默认没有高度...溢出隐藏 overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容 visible 默认值，内容不会被修剪，会呈现在元素框之外。...元素的高度、宽度、行高以及顶和底边距都可设置。元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。...行内元素: 和其他元素都在一行上元素的高度、宽度、行高及顶部和底部边距不可设置元素的宽度就是它包含的文字或图片的宽度，不可改变。...行内块状元素: 和其他元素都在一行上元素的高度、宽度、行高以及顶和底边距都可设置。

3.6K1 0

CSS理解之margin

只发生在垂直方向（margin-top/margin-bottom） margin重叠三种情况：相邻的兄弟元素父级和第一个/最后一个子元素空的block元素（自己和自己重叠） demo 1: 1...margin发生了重叠 2.父级和第一个/最后一个子元素 demo 1: <!...通过以上的例子，很多事情就很好理解了，比方说： 1.为什么图片设置了margin：0 auto不水平居中？ image.png 如上图，设置了margin auto，图片为什么还是不居中呢？...image.png 上图水平方向剧中了，但是垂直方向不剧中，父级元素高度有了，子元素高度也有了，为什么还是不垂直居中呢？...还需要注意一点：用margin:auto来实现居中，它计算后的值必须是正直，比如说你的父容器宽度1000px，子元素宽度2000px，这时设置margin：auto它是不居中的。

1.7K2 0

《CSS 世界》读书笔记-流与宽高

作为前端新手，经常会坐在显示器前花很多很多时间去 “追” 视觉稿，也经常会在 “为什么这个属性不生效” 和 “为什么这个属性生效了但是不是我想要的效果” 之间摇摆，直到我开始看张鑫旭老师的《CSS 世界...如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行。例子中，宽度继承于父元素 body。 2. 高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。...比如像这样的块级元素，它们的宽度默认是包含与它们的父级容器宽度的 100%。（2）收缩与包裹，fit-content。指的是父元素的宽度会收缩到和内部元素宽度一样。...给子元素标签设置了 width: 100%，此时的内容宽度已经等于外元素的宽度，所以超出的尺寸是设置的 margin 和 padding。...因此，子元素的 content box 宽度就是 100px，和上面直接设置 width 为 100px 的表现一样。

1.3K2 0

第213天：12个HTML和CSS必须知道的重点难点问题

取值：left、right、both 3.2 父元素高度塌陷问题 为什么要清除浮动，父元素高度塌陷解决父元素高度塌陷问题：一个块级元素如果没有设置height，其height是由子元素撑开的。...对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。...3.3 清除浮动的方法方法1：给父级div定义高度原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。...（不推荐使用）方法五：父元素设置 overflow：hidden、auto；原理：这个方法的关键在于触发了BFC。...当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

2.3K2 0

web前端开发初学者十问集锦（3）

1.div的height:100%没有效果，如何让元素的高度自动扩充为父元素的高度? 我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。...但是前提是需要对其父元素显示设置宽度和高度，否则无效。注意，对父元素显示设置宽度和高度也可以使用n%这种百分比的形式，前提还是如上描述的那样，父元素的父元素的高度和宽度要明确的设置。...但是在使用内部样式表的时候，style标签和script标签一样，可以放置在html文件中的anywhere，任何地方。 4.JavaScript如何获取html元素的宽度和高度？...至于说为什么不执行setTimeout，是因为js的工作机制是：当线程中没有执行任何同步代码的前提下才会执行异步代码，setTimeout是异步代码，所以setTimeout只能等js空闲才会执行，但死循环是永远不会空闲的...---- 参考文献 [1]关于Div的宽度与高度的100%设定 [2]JS获取各种宽度、高度的简单介绍 [3]setTimeout的异步以及js是单线程的面试题.知乎.杨光 [4]CSS position

1.6K2 0

响应式布局，你需要知道这些

如果元素没有设置 font-size，会继承父元素的 font-size，如果父元素也没有，会沿着 DOM 树一直向上查找，直到根元素 html，根元素的默认字体大小为 16px。...获取布局视口的宽度和高度， var layoutViewportWidth = document.documentElement.clientWidth var layoutViewportHeight...响应式设计里，vw 和 vh 常被用于布局，因为它们是相对于视口的， vw，viewport width，视口宽度，所以 1vw = 1% 视口宽度 vh，viewport height，视口高度，所以...这里只需要记住一点，百分比是相对于父元素的宽度和高度计算的。到这里，相信你已经掌握了响应式布局里常用的所有单位。接下来，我们介绍弹性盒和栅格，它们都不是单位，而是一种新的布局方案。...内容会溢出视口外，导致出现横向滚动条对不对，这在移动端是非常不好的浏览体验，因为用户往往更习惯上下滚动，而不是左右滚动，所以我们需要确保图片内容不要超出 viewport，可以通过设置元素的最大宽度进行限制

1.7K2 0

前端知识点总结（html+css）（上）

常见块级元素、行内元素、行内块元素的特点和区别块级元素 (常见的块级元素div，p，h，form，li) 一行显示一个; 宽度默认为容器的100%；可以设置高度宽度内外边距块级元素可以包含其他的块级元素和文本...（如div下可包含div）行内元素（常见的行内元素a,span.img）一行显示多个宽度为内容的宽度不可以设置高度和宽度标签内一般不包含标签（如a标签内包含a标签）行内块元素行内块元素包含块级元素和行内元素的特征...;右边margin-left（定位+margin）父元素display:flex；右边元素flex:1（flex）三栏布局左元素左浮右元素右浮，中间设置margin-left和margin-right...auto //子元素内容大于父元素，显示滚动条，超出显示，不超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10....vw和vh：都是针对当前浏览器窗口大小而言，1vw就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。

2861 0

居中方案

为 table，margin 左右为 auto 利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，...子元素还可以用 margin-left：-50% 来居中，但是这样会使子元素宽度变为实际宽度的1.5倍垂直居中父元素高度确定的单行文本设置父元素的 height 和 line-height 高度一致...父元素高度确定的多行文本设置父元素 display:table 用一个元素包裹多行标签元素，设置 display:table-cell 和 vertical-align:middle 父子元素高度未知...设置父元素 position:relative 设置子元素 position: absolute top: 50% transform: translateY(-50%) flex(不兼容IE) 父元素设置...的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

8304 0

高频前端面试题1

替换元素的尺寸从内而外分为三类：固有尺寸：指的是替换内容原本的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着自己的宽度和高度的。...（4）如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。（5）如果上面的条件都不符合，则最终宽度表现为300像素，高度为150像素。...，右边一栏宽度自适应，两栏布局的具体实现：利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。...将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。....来帮我们避免不必要的转译，不转译node_moudules中的js文件其次在缓存当前转译的js文件，设置loader: 'babel-loader?

7142 0

HTML+CSS高级

给父级元素加上高度，让其在视觉效果上呈现正常 --》扩展性不好，假如项目高度不固定（如瀑布流布局），此时没法由子元素内容确定父元素高度 2.2 给父级加浮动。 ...: top; 1.8 文字复制问题：两个浮动元素中间，有内联元素或者注释，并且和父级元素宽度相差不超过3px-->会出现小尾巴（文字自动被复制到内联元素中）解决办法1：两个浮动元素中间避免出现内联元素或注释...relative 1.10 IE6下绝对定位元素的父级宽度是奇数，则该子元素right和bottom有1px偏差解决办法：避免父级宽度出现奇数...给父级元素加上高度，让其在视觉效果上呈现正常 --》扩展性不好，假如项目高度不固定（如瀑布流布局），此时没法由子元素内容确定父元素高度 2.2 给父级加浮动。 ...relative 1.10 IE6下绝对定位元素的父级宽度是奇数，则该子元素right和bottom有1px偏差解决办法：避免父级宽度出现奇数

5.8K6 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭