dom块级元素的各种宽高

clientHeight,clientWidth: 元素宽高和padding, 不包括边框和margin, 如果有滚动条,还要减去滚动条的宽高。注意,这个值始终是整数,如果是小数会被四舍五入。

clientLeft属性等于元素节点左边框(left border)的宽度(单位像素),不包括左侧的paddingmargin。如果没有设置左边框,或者是行内元素(display: inline),该属性返回0。该属性总是返回整数值,如果是小数,会四舍五入。

clientTop属性等于网页元素顶部边框的宽度(单位像素),其他特点都与clientLeft相同。

scrollHeight属性返回一个整数值(小数会四舍五入),表示当前元素的总高度(单位像素),包括溢出容器、当前不可见的部分。它包括padding,但是不包括bordermargin以及水平滚动条的高度(如果有水平滚动条的话),还包括伪元素(::before::after)的高度。只读。

offsetParent属性返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。

offsetHeight属性返回一个整数,表示元素的 CSS 垂直高度(单位像素),包括元素本身的高度、padding 和 border,以及水平滚动条的高度(如果存在滚动条)。

offsetWidth属性表示元素的 CSS 水平宽度(单位像素),其他都与Element.offsetHeight一致。

offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移,Element.offsetTop返回垂直位移,单位为像素。通常,这两个值是指相对于父节点的位移。

原文地址:https://www.cnblogs.com/zxscn2013/p/9910445.html

时间: 2024-10-18 10:17:37

dom块级元素的各种宽高的相关文章

可替换元素—行级元素可以设置宽高?

上篇文章讲的是行级元素与块级元素,明明说了行级元素不可设置width,height属性,而为何img.input等行级元素可以设置宽.高??? 看官莫急,下面我会详细解答. 可替换元素 1. 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容.例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而 如果查看(X)HTML代码,则看不到图片的实际内容:又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等. 2. 他们区别一般i

深度理解CSS中块级元素与行内元素的区别(个人易错点)

区别一: 块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 行内:行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 区别二: 块级:块级元素可以设置宽高 行内:行内元素不可以设置宽高 区别三: 块级:display:block; 行内:display:inline; 可以通过修改display属性来切换块级元素和行内元素. 区别四: 块级:块级元素可以设置margin,padding 行内:行内元素水平方向的margin-left; margin-righ

html块级元素与行内元素

我们经常使用的大多数HTML 元素,都被定义为块级元素或内联元素. 块元素,一般都从新行开始,它可以容纳内联元素和其他块元素 内联元素,一般都是基于语义级(semantic)的基本元素.内联元素只能容纳文本或者其他内联元素:还有一种特殊的元素. 可变元素,可变元素为根据上下文语境决定该元素为块元素或者内联元素. 常见的块元素有: 常见的行内元素有: 可变元素: 区别: 块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变

行,行内元素与块级元素有什么不同?

  块级:1.块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 2.块级元素可以设置宽高 3.块级元素可以设置margin,padding 4.display:block; 行内:1.行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 2.行内元素不可以设置宽高 3.行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效.但是竖直方向的margin-bottom; margin-to

web前端入门到实战:html块级元素和行级元素的区别和认识

行内.块状元素区别: 1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block. 2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的:块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列. 3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(li

前端面试题-行内元素和块级元素

一.行内元素 一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素 块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. 三.行内元素示例 HTML CSS Example 四.块级元素示例 HTML CSS Example 五.行内元素的特点 5.1 和其他元素都在同一行上 5.2 高,行高及外边距和内边距不可改变 5.3 宽度就是它的文字或图片的宽度,不可改变 5.4 行内元素只能容纳文本或者其他行内元素 5.5 设置行内

块级元素和内联元素的宽高是如何确定的

在刚接触CSS的时候,每次给元素添加样式,都习惯性的写上宽是多少,高是多少,为自己挖坑无数,还暗自抱怨说CSS好烦,不过它真的是好烦,脾气很怪. 好,言归正传.在讨论元素的宽高是如何确定的之前,我们先明确一下文档流的概念:对于内联元素,是从左到右排列的,当宽度不够时换行:对于块级元素,是从上到下排列的,每一个元素都另起一行. 一.内联元素宽高的确定 宽度:不受width的限制,有文字内容决定的,padding 和 margin 可以改变宽度. 高度:不受height的限制,padding 和ma

css学习体会之——块级元素,行内元素长宽设置

在做一些实战的布局时,总会发现一些元素设置宽高有用,一些元素没有用.下面来总结一下: (1)块级元素:所有的会级元素设置宽高都有效 (2)内联元素:一般的内联元素设置宽高没有用,但是一些特殊的,如input/select/img/textarea/button/label 设置宽高有用,这些元素又成置换元素,其相当于设置了display:inline-block.

行高引起的行内块级元素间距

line-height 属性设置行间的距离(行高). 该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离. line-height 与 font-size 的计算值之差(在 CSS 中成为"行间距")分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框. 原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值. 原文地址:https://www.cnblogs.com/gopark/p/8822720