css中offsetHeight 和 height的区别

2024-11-04

height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别

1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当 box-sizing: content-box 时,高度应用到元素的内容框. 当 box-sizing:border-box时,高度包含了内容框.内边距和边框. 2.clientHeight Element.clientHeight只读属性是没有的CSS或内联布局框元素为零,否则它的像素单元内的高度,但不包括填充水平滚动条的高度,边界或边缘. // 包含元素的conten

CSS中rem、em的区别

引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/51804227 前几天面试了一个最基本的问题,现在复习一下它的原理 CSS中的长度单位有8个,px,em,rem,pt,ex,pc,in,mm,cm; px--像素,相对于设备的长度,像素是相对于显示器的屏幕分辨率而言的. em--相对长度单位,是相对于其父元素的文本的字体尺寸.如果父级元素未设置字体大小,则相

css中的width,height，属性与盒模型的关系

这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式.那么内容就是盒子里装的东西(content):而填充(padding)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料:边框(border)就是盒子本身了:至于边界(margin)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取

CSS中width和height与盒子模型的关系

盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式.那么内容就是盒子里装的东西(element):而填充(padding)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料:边框(border)就是盒子本身了:至于边界(margin)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛. cs

CSS中的class与id区别及用法

转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用id,以及它们用法与限制是怎么样的.接下来我们就来详细了解CLASS与ID基本属性及用法. Class 在程序中称“类”,同时在CSS中也书面语也叫

CSS中margin和padding的区别

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和margin常用的用法一.padding 1.语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)padding:10

css中margin-left与left的区别

研究下拉菜单和弹出菜单时比较所得: 1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置: 测试代码: <div style="position:relative;top:100px;left:100px;border:1px solid blue;width:100px;height:100px;"> <div id="outer" s

【CSS中width、height的默认值】

对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固定的height的呢. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试宽度</title> <style type="tex

CSS中link与import的区别

一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/style.css); </style> 2,在css文件中 @import url("CSS文件"); 对@import url()做一下总结: 1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文

外部引用CSS中 link与@import的区别

差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了. 差别2:加载顺序的差别.当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载. 差别3:兼容性的差别.由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才

css中import与link用法区别

方式:引入CSS的方法有两种,一种是@import,一种是link @import url('地址');//注意,这种方式可以放在页面也可以放在css文件中<link href="地址" rel="stylesheet" type="text/css" />区别:1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务:@import属于CSS范畴,只能加载CSS.2:link引用CSS时,在页面载入时同时加载:@i

CSS中详解height属性

目录结构: contents structure [+] hight属性值类型一览表 height的%的使用定义实例需要注意的参考文章 hight属性值类型一览表 value describtion auto 默认 length 绝对长度 % 相对长度 inherit 继承这里笔者主要介绍相对长度的用法,关于绝对长度读者可以参考CSS尺寸单位px % em rem详解获取更多信息. height的%值的使用定义: 这个值是一个百分比,它是基于包含它的块级元素的百分比. 实例: <!D

css中padding和magin的区别

1.Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离. 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边. 如果只提供一个,将用于全部的四边. 如果提供两个,第一个用于上-下,第二个用于左-右. 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下. 在IE4+,margin属性不可用于td和tr对象. 用法:body { margin: 36pt 24pt 36pt; } 2.Padding 用来设置元素内容到元素边界的距离. 如果提供全部四个

CSS中margin与padding的区别

CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外的空白区.“空白区”通常是指其他元素不能出现且父元素背景可见的区域.——CSS权威指南 padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象.补白(padding):补白位于元素框的边界与内容区之间.很自然,用于影响这个

html css中id和class的区别比较

在定义样式的时候,有时候会将id和class的用法弄混淆,所以在这里特意说明一下: id和class属性是网页中两个通用的属性,它们协同工作使整个页面变得丰富多彩.当我们为一个元素定义样式时.可以使用id,也可以使用class. 1.在css样式表中书写时,id选择符前面应该加前缀符号‘#’,而class选择符前面应该加前缀符号‘.’. 2.id属性一般在一个页面中只可以使用一次,而class可以被多次引用. 3.id作为元素的标签,用于区分不同结构和内容,而class作为一个样式,它可以应用到

CSS中zoom和scale的区别

zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方.zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置.另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算.运行<!DOCTYPE html><style>div { width:300px;height:100px; border:1px solid #CCC; font-size:0px; line-height:100

【对比分析三】CSS中 link 和@import 的区别

1). link 是 XHTML 标签,无兼容问题: @import 是在 CSS2.1 提出的,只有IE5以上才能识别. 2). 语法结构不同. link (链接式)只能放入HTML源码中,语法为: <link rel="stylesheet" href="style.css" type="text/css"/> @import (导入式)语法为: <style type="text/css">

css中绝对定位和相对定位的区别

先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body). 绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以它们可以覆盖页面上其他的元素,且可以通过z-index属性来控制这些层的对方顺序. #box

CSS 中 nth-child 和 nth-of-type 的区别

假设有如下代码结构,想要查找 Piggy 那个 p <section> <h1>Words</h1> <p>Little</p> <p>Piggy</p>  </section> 使用 nth-child 是不正确的: p:nth-child(2) { color: red; } /* Now incorrect */ 使用 nth-of-type 是正确

css中width和height默认值

width和height默认都是auto自动伸缩的,但不同的标签效果却不一样比如div默认是width:100%,通常不用写100%如果是table,如果div内的table没有设定100%,那就是最小值,以td为准,td没设宽度的话,就以td的内容自动撑开width:那这个div的width就是100%,table=td通常情况,各个标签的height默认是0,根据不同浏览器不同显示效果也不同,可能会有几px的高度,不过一般写页面的时候,不是独立模块的话,大的框架可以设height,不过最终要

CSS中link和@import的区别

1.link属于HTML标签,而@import是CSS提供的 2.页面被加载时link会同时被加载:而@import引用的CSS会等到页面被加载完再加载 3.@import只在IE5以上才能识别,而link是HTML标签,并不存在兼容问题

css中offsetHeight 和 height的区别

热门专题