css height属性（css div高度设置）

本文目录

• css div高度设置
• CSS中line-height与height的区别
• CSS 我不懂这两个地方定义的width和height有什么不同 分别是起到什么作用
• 【前端CSS】CSS行高（line-height）及文本垂直居中原理
• canvas元素html属性的width&height与css样式的width&height关系
• CSS 里的 height 属性与 line-height 属性有什么区别
• 一个CSS问题 line-height

css div高度设置

1、首先我们新建一个测试项目然后新建一个index.html、basic.js和basic.css文件。

2、js修改html文件中div的style中值来修改div的高度 HTML文件中的文件代码如图所示。

3、运行之后我们看到两个div的高度是一样的 接下来我们就使用js修改高度。

4、这时我们敲js中的代码 获取div1的id 使用css属性对应的style属性然后设置高度 如图所示。

5、使用js修改CSS文件中的div的height的值 HTML文件中的代码。

6、然后我们是在js文件中获取div1的id属性 然后使用obj.style.cssTest来修改嵌入式的css。

7、然后运行项目之后 两次结果都是一样的 div的高度改变了 。

CSS中line-height与height的区别

区别如下：

1、定义不同：line-height是行高的意思，height则是定义元素自身的高度。

2、表示意义不同： line-height用来表示容器的高度，height用来表示这一容器内的每行文字的高度。

3、使用范围不同：line-height只针对行元素，height针对其他所有元素。

4、针对对象不同：line-height一般针对字体来设置，如果一行文字在DIV里面，且行高等于高度的话，则文字会垂直居中。heigh一般用来设置文字外围的DIV容器。

5、height是对于某个框架或者图片来弄的。line-height用于文字，如果要实际效果你可以写一段文字，分好几行，然后对它做line-height属性，就会注意到变化了。

扩展资料：

CSS语言特点

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

总体来说，CSS具有以下特点：

1、丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

3、多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

4、层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。

例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

5、页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。

而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。 

CSS 我不懂这两个地方定义的width和height有什么不同 分别是起到什么作用

img标签内的width和height属性是标签本身自带的属性，而css中的width和height则是外部附加的样式。从优先级来说css的属性比标签自带的属性优先级要高，也就是说如果两者同时存在，那么最终起作用的将是css中的样式属性。打个比方，你新买一部手机，手机本身会自带有默认设置，也自带有各种内置APP，这些就相当于其自带属性，然后你根据说明书可以修改手机的各种设置，也可以自行下载各种APP（包括覆盖自带的APP），这些就相当于CSS中的样式设置了。总之，假如img标签以最简单的形式出现：《img src="123.gif"/》 ，那么它的width和height就是图片（即123.gif）本身的width和height；而如果是 《img src="123.gif" width="100" height="50" /》，它就会按所设定的width和height来显示（即100*50）；而如果是这样：《style》img.a {width:200px; height:100px}《/style》《img class="a" src="123.gif" width="100" height="50"/》就会按class指定的css样式来显示（即200*100）；还有一种情况是这样的：《style》img.a {width:200px; height:100px}《/style》《img class="a" style="width:300px;height:200px" src="123.gif" width="100" height="50"/》这时候它会按style属性内设定的样式来显示（即300*200），换句话说就是它的优先级是最最最高的！

【前端CSS】CSS行高（line-height）及文本垂直居中原理

在 CSS 中， line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的 line-height 设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子： 这样，span标签中的文字就相对于div垂直方向居中了，想要文本水平居中设置text-align：center即可。 在浏览器中，会将给每一段文本生成一个行框，行框的高度就是行高。行框由上间距、文本高度、下间距组成，上间距的距离与下间距的距离是相等的。 默认情况下一行文本的行高分为：上间距，文本的高度，下间距，并且上间距是等于下间距的，所以文字默认在这一行中是垂直居中的。 几条线与行高的关系图解： 文本的行高也可以看成是基线到基线的距离： 如果一段文本的高度为16px，如果给他设置line-height的高度为200，那么相当于，文本的上下间距的高度增加了，但是文本本身的高度依然是16是不变的，并且一直默认在行框中垂直居中，而上间距和下间距平分了200px的高度并且减去文本本身的高度。所以，容器被这一行文本占满，而本身文字在自己的一行中是垂直居中的，所以看起来就像是在容器中垂直居中。 谷歌浏览器字体的默认大小是：16px，字体的最小值为：12px，默认行高为：18px；默认情况下如果没有给div设置高度，那么这个div的高度会比其中文本的大小大一点（这个大多少现在没有办法确定）； 设置起来是最直接的，同时也最方便的。 如果 line-height 单位设置为 % ，那么将来在计算的时候，基数是当前标签中的文本的字体的大小。 如果是 % , % 之前的数据一定是整数 ： 150% ，200% 。 效果跟 % 是一样一样的。 注意：一行 em 的大小相当于是当前标签中的 font-size 的大小。 如果是 em , em 之前的数据一定是： 1.2em ,1.5em ,2em 如果不涉及到继承，那么带不带单位（ em ）都是一样的效果，但是如果涉及到继承的话，那么就有很大的区别了： 我们知道， CSS 的三大特性是继承、层叠、优先级。 line-height 也是可以被继承的，如下面的示例： 在不给div设置行高的情况下， span 标签的文字行高默认为 18 接着我们给 div 设置一个行高等于 20px 我们再来看看 span 标签的的变化 而且，不管我们给行高设置什么单位（ px、%、em 、不带单位）都可以被继承。 如果行高的单位不是 px ，那么将来行高要进行计算：这个计算需要一个基数，这个基数是当前标签的字体大小，而不是浏览器默认字体大小。以上面的例子为例，我们并没有设置任何字体大小，此时我们把 line-height 设置为 150% ，那么文字行高将变为 24px（16px*1.5=24 ）。 效果如下: 此时我们在给div设置一个 font-size 等于 20px ： 那么文字行高将会变成 30px，20px*1.5=30px ;

canvas元素html属性的width&height与css样式的width&height关系

当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。该元素可以使用 CSS 来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果 CSS 的尺寸与初始画布的比例不一致，它会出现扭曲。

所以当我们给 canvas 设置宽高时需要注意，比例需要时 2:1

canvas html 属性和 css 属性

理论上 canvas 的 width 和 height 都只能是整数，但实际上可以设置小数，浏览器默认会进行取整操作；也可以是带 px 的字符串，但是对于其它单位都会被忽略，渲染为 px；如果设置为负数或者不设置，默认宽是 300，高是 150

为什么《canvas》元素默认尺寸是 300 150，而不是其他尺寸组合呢？这个是 CSS 规范中定义的，作为替换元素，默认的尺寸是 300 150，《canvas》元素就是替换元素，因此默认尺寸是 300 150。由于《svg》元素也是替换元素，因此，《svg》默认的尺寸也是 300 150。

如果没有设置宽高属性，获取是取到的值是默认值

CSS 的 width，height 属性权重要大于《canvas》元素的 width，height 属性权重。

《canvas》的等比例特性是强制的，会忽略 HTML 属性的设置。对比下面的测试 HTML：

最终的宽度表现不是 300 而是等比例缩放的 176px。

1：Canvas 默认的画布宽高是 300 * 150，当你设置标签的 width，height 属性值时，控制的是 Canvas 的元素本身的宽高，和 Canvas 画布的宽高大小。同时设置定了两个值。

2：而 Css 设置 width，height 时，只仅仅控制了 Canvas 元素自身的宽高，而不会改变 Canvas 画布大小。

而我们最终展示在页面上的内容是 canvas 画布的内容，然后缩放到 css 值大小

比如我们设置了 css

此时 canvas 元素的大小是 600px * 300px ；但是画布大小还是 300px * 150px

所以还是会先在 300px * 150px 上的画布上先绘制，然后在拉伸绘画后的内容到我们 css 大小

此时我们获取 canvas 对象的 width 和 height 依旧还是 300px * 150px (而我们绘制图案是也是基于画布大小来说的默认画布的左上角是 0，0)

当我们使用各个 Canvas API 进行图形图像绘制的时候，其坐标位置，尺寸大小等都是相对于《canvas》元素的 HTML 属性 width/height，与 CSS width/height 没有任何关系。

《canvas》元素本质上是个位图，因此，在 retina 高密度屏幕下，如果如果绘制图像，则如果按照视觉尺寸来绘制，可能就会模糊，我们可以将《canvas》元素的尺寸用 HTML 高宽属性设置为 2 倍尺寸，然后使用 CSS 高宽属性设置视觉尺寸为布局需要的尺寸大小。

CSS 里的 height 属性与 line-height 属性有什么区别

height是元素自身的高度，line-height则是元素内部文字的行高，比如：height:100px; line-height:20px; padding:0表示具有这个样式的元素的高度为100像素，里面的文字行高为20像素（换句话说就是可以排5行文字），内边距为0（如果不为0则元素的高度会被撑大）。补充说明一下：如果一个元素的height和line-height相同，意味着这行文字在元素中垂直居中（但仅限文字，且只能一行）。

一个CSS问题 line-height

line-height是行高，也就是一行的高度（注意不是字体的高度），包括了字体的高度和行间距，默认情况下，行高肯定是大于字体高度的（也就是说行与行之间是有空隙的，也就是行间距）。而 line-height:1 的意思，就是行高和字体高度相等，这时候行间距就是0，所以上下就没有空白了。