css height属性(CSS 里的 height 属性与 line-height 属性有什么区别)
本文目录
- CSS 里的 height 属性与 line-height 属性有什么区别
- CSS中line-height与height的区别
- 【前端CSS】CSS行高(line-height)及文本垂直居中原理
- 一个CSS问题 line-height
- canvas元素html属性的width&height与css样式的width&height关系
- css div高度设置
- CSS 我不懂这两个地方定义的width和height有什么不同 分别是起到什么作用
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与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】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 ;
一个CSS问题 line-height
line-height是行高,也就是一行的高度(注意不是字体的高度),包括了字体的高度和行间距,默认情况下,行高肯定是大于字体高度的(也就是说行与行之间是有空隙的,也就是行间距)。而 line-height:1 的意思,就是行高和字体高度相等,这时候行间距就是0,所以上下就没有空白了。
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 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 我不懂这两个地方定义的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),换句话说就是它的优先级是最最最高的!
本文相关文章:
sometime sometimes(sometime和sometimes有什么区别分别怎么用,请造句举例)
2024年9月10日 10:05
哈希码和磁力衔接有什么区别哈希码怎么用?设随机Hash表的长度为n=8
2024年9月6日 00:55
c语言中函数abs 和 fabs有什么区别?C语言中fabs表示什么意思
2024年9月4日 08:10
slave和slavery有什么区别同样是名词,同样有奴隶的意思?slave的近义词
2024年9月3日 23:15
fgets函数的理解(MATLAB 里面fgets和fgetl有什么区别)
2024年8月26日 04:20
有关javascript的参考文献(javaScript和java有什么区别两者分别运用于哪些方面)
2024年8月22日 22:35
cstring是什么(LPCTSTR和CString有什么区别)
2024年8月21日 05:25
文本编辑器和编译器的区别(编译器跟编辑器有什么区别还有什么是链接器)
2024年8月18日 06:25
快速格式化和普通格式化(电脑正常格式化和快速格式化有什么区别)
2024年8月16日 23:41
lostfocus(VB程序中GotFocus事件和LostFocus事件有什么区别)
2024年8月13日 02:45
jsp与web的区别(java web和jsp做出来的网页有什么区别哪个更容易做动态网站)
2024年8月10日 11:55
sql和excel的区别(数据库 sql 和excel有什么区别为什么我们不用sql呢只有sap)
2024年8月8日 16:25
representation用法(presentation和representation有什么区别)
2024年8月3日 12:30
vb语言是高级语言吗(VB语言和C语言有什么联系吗二者又有什么区别VB语言比C语言高级吗)
2024年7月27日 04:45
forefront(sharepoint和forefront有什么区别)
2024年7月25日 14:55
const和static(c#中static和const有什么区别)
2024年7月24日 16:54
大学嵌入式培养指什么(大学的同一专业,嵌入式培养和非嵌入式培养有什么区别)
2024年7月24日 14:52
iomanip和iostream(c++中的iomainp.h和iostream.h有什么区别)
2024年7月24日 12:03
更多文章:
plot3函数的调用格式(在命令窗口用help plot3或用 doc plot3查看plot3的使用方法,观察有何区别)
2024年7月10日 09:37
求补码表示的二进制数真值(二进制补码10010011的真值)
2024年7月18日 11:37
oracle11g补丁包(oracle 11g 补丁下载不了)
2024年8月2日 06:01
正则表达式不包含数字和字母(正则表达式:数字与字母的混合表达式,不包括纯数字和纯字母)
2024年7月24日 01:51
revolutionary翻译(文学家,思想家,革命家用英语怎么说)
2024年7月3日 16:26
捷达低配后排座椅(捷达VA3座椅怎么调捷达VA3后排放倒图示)
2024年7月5日 05:29
oracle 触发器 update(oracle更新触发器写法)
2024年9月1日 00:00
hacknet80端口(hacknet nortron安全网络服务器怎么破)
2024年8月6日 03:55