文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

详解各种获取元素宽高及位置的属性

一个典型的（各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话...如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。...outerWidth Window.outerWidth 是一个只读属性，表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing...scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。...scrollLeft 可以是任意整数，然而： 如果元素不能滚动（比如：元素没有溢出），那么scrollLeft 的值是0。

4K80
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    响应式图像

    ，不管viewport的宽度如何，始终保持相同的宽度。...如果页面延伸超过视口的高度——滚动条出现——视窗的宽度将会大于html元素的宽度。 因此，如果你将一个元素设置为100vw,这个元素将会延伸到html和body元素范围之外。...在这个例子中，我用红色边框包裹html元素，然后给section元素设置背景颜色。 ? 因为这个细微的差别，当使一个元素横跨整个页面的宽度时，最好使用百分比单位而不是视口的宽度。 2....占满高度的元素:vh > % 在另一方面，当使一个元素跨越整个页面的高度时，vh远比百分比单位好。...滚动条的问题也不是一个问题，因为现在大多数页面通常不会有水平滚动条。 vh应用 全屏背景图片 vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片，不管设备的大小。

    2.5K10

    一文彻底搞懂js中的位置计算

    Element.scrollWidth 这也是一个元素内容宽度的只读属性，包含由于溢出导致视图中不可以见的内容。 原理上和scrollHeight是同理的，只不过这里是宽度而非高度。...如果存在了滚动条，client只会计算出当前元素展示出来的高度/宽度，而scroll不仅仅会计算当前元素展示出的，还会包含当前元素的滚动条隐藏内容的高度/宽度。...如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。...而offsetWidth/offsetHeight返回元素的布局宽度/高度，包含元素的边框(border)、水平线/垂直线上的内边距(padding)、竖直/水平方向滚动条(scrollbar)（如果存在的话...如果你需要获得相对于整个网页左上角定位的属性值，那么只要给 top、left 属性值加上当前的滚动位置（通过 window.scrollX 和 window.scrollY），这样就可以获取与当前的滚动位置无关的值

    3.9K10

    CSS 技巧一则 -- 不定宽溢出文本适配滚动

    : nowrap; } 这样，当前  标签的实际宽度，其实就是整个文本元素的宽度。...具体可以参考规范：transformable element 算出滚动距离，进行滚动 这样，我们有了父元素的宽度 150px，文本的宽度。...那么很容易得到需要滚动的距离： 需要滚动的距离 S = 溢出的文本元素的宽度 - 父元素的宽度 这样，我们只需要找到一个可以表示并且当前文本宽度是变量值即可。即是 -- transoform。...这样，不论父容器宽度如何，文本元素宽度如何，都可以实现对溢出文本适配滚动展示。...不定宽文字跑马灯来回滚动展示 -- 父容器不定宽，子元素不定宽 部分不足之处 无法判断文本长度是否超出父元素宽度 当然，上述方案并非完美的方案，如果我们希望只针对本文长度溢出的情况，hover 的时候才进行滚动

    1.8K20

    HTML DOM的各种宽高、偏移位置的属性总结

    ，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高，包含内边距，但不包括水平滚动条、边框和外边距。...2.HTMLElement.offsetWidth/offsetHeight（只读） 测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话...3.clientTop、clientLeft（只读） 获取上边框、左边框的宽度（border的宽度） 4.Element.scrollWidth/scrollHeight（只读） 元素内容宽度的一种度量...，包括由于overflow溢出而在屏幕上不可见的内容，当元素其中内容没有超过其高度或者宽度的时候，该属性是取不到的。...返回一个DomRect对象，返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框

    1.6K30

    nicegui布局细节补充——容器高度与滚动条

    实战： 只有左下和右边的卡片中的列表内容部分，才会出现滚动条 整个布局刚好铺满整个窗口，就算动态修改浏览器窗口大小也是如此 本节使用的 nicegui 版本为 1.4.20 高度溢出处理 创建一个容器，...但是 nicegui 中，大部分都是用 flex 容器，所以才会看到宽度由内容支撑的情况 现在往页面多加一些元素： 每次点击按钮，里面的容器就会新增一个 label。...最多我们可能会设置一个最小高度之类(其实也不多见) 更多的情况是，我们希望整体布局刚好铺满整个屏幕，然后里面的某个区域，内容溢出时，出现滚动条。...上图，不管浏览器窗口怎么调整，在一定范围内，我不希望整个窗口出现滚动条。但是确实其中两个卡片中的区域，需要展示许多内容。仅限于这些局部地方出现滚动条。...常用布局无非就是 flex 或 grid 布局，接下来我们就看看在这些布局容器下，该如何限制子元素的高度或宽度。 现在我们设置最外层容器一个确定的高度值： 行30：内部容器不限制高度。

    1.5K10

    8则未必知道且超级实用的纯CSS布局排版技巧 | 网易4年实践

    在常规实现方式里也是在这个中间列里做文章，如何使中间列内容不被左右列遮挡。...100vw是视窗宽度，100%内容宽度，那么100vw - 100%就是滚动条宽度，声明padding-right用于保留滚动条出现的位置，这样滚动条出不出现都不会让页面抖动了。...「粘性定位」是相对定位和固定定位的结合体，节点在特定阈值跨越前为相对定位，跨越后为固定定位。...，但必须声明overflow-y:hidden使容器在Y轴方向隐藏溢出部分。...由于行内元素在当前行排版产生溢出会自动将其余节点排版到下一行，因此还需声明white-space:nowrap使所有行内元素在一行内排版完毕。若产生滚动条，还需对容器的height做适当的微调。

    3.4K20

    CSS——06扩展：高级

    (重点) 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll 不管超出内容否，总是显示滚动条 auto 超出自动显示滚动条，不超出不显示滚动条...给img 添加 display：block; 转换为块级元素就不会存在问题了。 4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式。...为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。...之所以a包含span就是因为 整个导航都是可以点击的。 7. 拓展@ 7.1 margin负值之美 1).

    4.7K40

    CSS 盒子模型(Box Model)

    当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息...；当为auto时，将由浏览器决定如何处理溢出部分。...空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。...，其他元素都保持content－sizing就好了 子元素有padding和border，或者至少有其一，并且需要给子元素设定100%宽度（或者50%宽度等等），这时候显然需要border-box。...如果是content-box，那么，宽度必然会溢出，而且，为了不溢出，你设定子元素的宽度就只能是一个定值，或者是一个计算值（比如calc(100%- 20px)）。

    1.3K20

    前端成神之路-CSS高级技巧

    (重点) 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。...属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll 不管超出内容否，总是显示滚动条 auto 超出自动显示滚动条，不超出不显示滚动条...给img 添加 display：block; 转换为块级元素就不会存在问题了。 ? 4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式。...为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。...之所以a包含span就是因为 整个导航都是可以点击的。 7. 拓展@ 7.1 margin负值之美 1).

    6.8K30

    一文带你响应式网页设计入门

    用于标识移动网站的Viewport Meta标签 viewport meta标签为浏览器如何调整页面以适应每个设备的宽度做出了依据。...媒体查询使您可以根据当前设备尺寸来设置元素的样式。现在流行的CSS策略是首先编写移动样式，然后在其上构建更复杂的桌面版网页样式。...我们可能需要把一个元素放在固定的高度内。在这种情况下，我们可以使用另一种技术-水平滚动。 使用内容溢出滚动条进行水平滚动 可能会有这样一种情况：您的内容会溢出界面，而没有一种优雅的处理方式去解决。...没关系，内容溢出滚动条可以为你解决这个问题。 此技术的常见用途包括可滚动菜单和表格。下面是一个可滚动菜单的示例。.../span> another item overflow-y: scroll 这个CSS是关键，通过设置overflow，子元素将通过水平轴溢出并出现横向滚动条

    4.8K20

    CSS进阶11-表格table

    第三条规则使“totals”列变为蓝色，最后两条规则通过使用固定布局算法fixed layout algorithm显示如何使列成为固定大小。...单元格可能会跨越多行或多列。（虽然CSS 2.2没有定义如何确定跨越行或列的数量，但用户代理可能对源文档有特殊的理解; CSS的未来更新可能提供了一种用CSS语法表达这种理解的方法。）...否则，该列的宽度有第一行中'width'属性值不是'auto'的单元格确定。如果该单元格跨越多个列，则宽度分散到各个列。...为了查找基线，必须将具有滚动机制的标准流内盒子（请参阅'overflow'属性）视为滚动到其原始位置。注意，单元格的基线可能会低于其底部边界，请参见下面的示例。...下表显示了表格的宽度，边框的宽度，填充和单元格宽度如何相互作用。它们的关系由以下等式给出，该等式适用于表的每一行： ?

    6.6K30

    如何使用 CSS 设置和自定义水平和垂直滚动条

    滚动条是图形用户界面（UI）中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。...创建带有导航项目的导航栏为了创建导航栏，我们将使用HTML nav元素。...在下一节中，我们将学习如何防止导航项目列表显示在侧边栏之外。d). 使用滚动条管理内容溢出防止导航项目显示在侧边栏之外非常简单。...让我们继续下一节，我们将讨论如何设置滚动条的样式。自定义滚动条样式您希望为网站的滚动条设置样式的原因之一是为了在整个网页上实现颜色协调。您可能希望将在网站上使用的颜色数量保持在一组最小值。...以下代码片段描述了如何一次性地应用滚动条样式到整个网站的所有滚动条。

    1.9K00

    【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width

    > .scroll-box { border: 1px solid #666; overflow: scroll; } 正常而言，当 标签内的内容足够多，溢出到开始滚动...这个从名字也很好理解，设置滚动条的宽度。 那是否和我们想象的一样，可以任意设置滚动条的宽度，甚至乎，可以定制化的设置滑块和轨道的宽度？...不要说分别设置滑块和轨道的宽度，scrollbar-width 目前甚至不支持接受一个宽度数值。 什么意思呢？...scrollbar-width: thin：系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度 scrollbar-width: none：不显示滚动条，但是该元素依然可以滚动 简单示意图如下： 完整的...当然，整个 scrollbar-color 和 scrollbar-width 相较于非标准的 ::-webkit-scrollbar 规范已经是非常大的一步跨越。

    94810

    掌握这4 个关键的 CSS 属性，你才算入门 CSS

    block：CSS 中的块级元素，它占用尽可能多的空间，但它们不能放置在同一水平线上。开发人员主要使用块级元素来简化布局过程，因为他们能够改变他们选择的元素的宽度和高度。...inline-block：你可以将其视为块元素和内联元素的组合值，你可以在其中设置它们的宽度和高度，并且元素可以毫无问题地出现在同一水平线上。 none：使用此值可以从网页中隐藏元素。...但是，如果你对如何在 CSS 中选择背景有一个清晰的解释，那么使用 HTML 元素会容易得多。...background-repeat：你可以使用这些值，如果宽度超过背景大小，则使应用的背景重复自身。...例如; 当子元素被定位为absolute时，我们可以通过top、left、bottom值来控制它在整个body元素中的位置。你可以将其称为独立子元素，其中 body 元素是父元素。

    1.9K30

    【布局技巧】Flex 布局下居中溢出滚动截断问题

    其中一类比好好的解法在于，当 flex-item 不足以溢出时候，flex-item 居中展示，而当 flex-item 的数量溢出父容器宽度时候，布局上采用类似于 justify-content: flex-start...正常效果应该如下： 上面第一、第二行就是 flex-item 不足以溢出时候，flex-item 居中展示， 而第三行 ，就是当 flex-item 的数量溢出父容器宽度时候，布局上采用类似于 justify-content...因此当： .g-wrap 内 flex item 宽度不足 100% 时，整个 .g-wrap 受到其父容器的 justify-content: center 限制会表示为水平居中； 当 .g-wrap...内 flex item 宽度超出 100% 时，由于设置了 max-width: 100%，所以，整个容器最大宽度就是 .g-container 的宽度。...此时的子 flex item 的表现就是默认的 justify-content: flex-start，因此内容也是从头开始展示，滚动场景下没有问题 至此，我们借助多嵌套一层，同样完美的解决了整个问题。

    50710

    【Web前端】CSS溢出

    在网页设计中，“溢出”是一个常见且重要的概念。它涉及到如何处理那些超出预定范围的内容，以确保网页的布局和视觉效果达到预期。 一、什么是溢出？...在 CSS 中，“溢出”（overflow）指的是内容超出其包含块的边界时的处理方式。当一个元素的内容超出其设定的宽度或高度时，我们需要采取措施来管理这些超出部分的内容。...三、溢出建立区块格式化上下文 区块格式化上下文（Block Formatting Context, BFC）是一个用于布局的概念，它帮助我们控制元素如何在页面上布局。...当容器的宽度小于内容的宽度时，会显示滚动条。...场景 3: 表单和交互式元素 在表单和交互式元素中，处理溢出可以提高用户体验。例如，在长列表或表单字段中使用滚动条，可以避免页面变得过于冗长。 <!

    10100

    CSS笔记(15)

    本质:让一个元素在页面中隐藏或显示出来. 1.display属性 display属性用于设置一个元素应如何显示....如果隐藏元素不想要原来的位置,就用display : none 原图 隐藏后 3.overflow溢出 overflow属性指定了如果内容溢出一个元素的框(超出其高度及宽度)时,会发生什么....属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉 scroll 不管超出内容与否,总是显示滚动条 auto 超出自动显示滚动条,不超出不显示滚动条...一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局....下面做一个土豆网的案例 当鼠标经过时,显示遮罩层和播放图标 这时就要用到我们的隐藏和显示知识了,遮罩层应该是整个盒子的一个子元素,不占有位置,因此要使用绝对定位,而元素的隐藏使用的是display

    1.1K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券