css———详解height与line_height
定义
height指的是块级别元素的高度;
line-height指的是元素内容的高度。
height和line-height的联系
CSS中起高度作用的应该就是height以及line-height。height是用来设置元素的高度,比如img的高度、div的高度等。
如果不设置div的高度时,是div的font-size决定了div的高度还是line-weight的值?
测试一
CSS:
.test1{font-size:20px; text-align:center;line-height:0; border:1px solid black; background: red;}
html:
<div class="test1">测试</div>
结果:
测试二
CSS:
.test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
html:
<div class="test2">测试</div>
结果:
结论:在没有设置div的height属性时,div的高度根据line-height的大小而变化,且文字垂直居中。
div的height与line-height的大小关系不同时,会有什么显示结果呢?
(1)height = line-height时
(2)height>line-height时
(3)height<line-height时
css———详解height与line_height的更多相关文章
- CSS详解
Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...
- css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由 元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
- jquery的css详解(二)
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- DIV+CSS详解
DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...
- CSS中详解height属性
目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...
- css详解3
推荐学习链接:css盒模型 1.盒模型的常用属性 1.1.pading <html lang="en"> <head> <meta charset=& ...
- jquery的css详解(一)
通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...
- css详解笔记
CSS中的块级元素与行内元素 块级元素特性: 1.占据一整行,总是重起一行并且后面的元素也必须另起一行显示. 2.内联元素特性: 3.和其他内联元素显示在同一行. 块级元素列举如下: div(文档分区 ...
- 02_HTML5+CSS详解第四天
依旧是CSS部分贴个CSS主要知识点总结的链接:http://blog.csdn.net/html5_/article/details/26098273 [自己的笔记做得好乱,以前一直以为是字丑的原因 ...
随机推荐
- 记录linux 生成crash dump文件步骤
执行文件编译时加入-g 命令 例如 g++ -g test.cpp 查看当前系统限制情况 ulimit -a 设置crash dump 文件大小 ulimit -c unlimited unlimit ...
- python连接mysql数据库(MySQL)
在介绍python在数据库中的操作之前先简单介绍点mysql中的操作语言: [root@elk-server --]# mysql -u root -p Enter password: Welcome ...
- spark入门备忘---1
import org.apache.spark.{SparkContext, SparkConf} import scala.math.random /** * 利用spark进行圆周率的计算 */ ...
- Linux 远程登陆图形界面
如果我的解决方案帮助到了你,请随手点亮一颗小红心.如有疑问,可在下方评论区处留言. 利用Xmanager,linux启用XDMCP协议(可直接修改配置文件,也可以采用在Xshell中运行gdmconf ...
- Apache 2.4下配置Apache和PHP,使之协同工作
1.修改httpd的主配置文件httpd.conf,搜索ServerName#ServerName www.example.com:80 修改为:ServerName www.example.com: ...
- Spring Boot确保Web应用安全(登陆认证)
Spring Boot官方提供了一个登陆认证的清晰易懂的 例子 , 我们在次以此例展开演示Spring Boot是如何实现登陆认证的. 首先我们去 https://start.spring.io/ 下 ...
- Spring Boot项目中MyBatis连接DB2和MySQL数据库返回结果中一些字符消失——debug笔记
写这篇记录的原因是因为我之前在Spring Boot项目中通过MyBatis连接DB2返回的结果中存在一些字段, 这些字段的元素中缺少了一些符号,所以我现在通过在自己的电脑上通过MyBatis连接DB ...
- 为什么要设置 Mysql 的 ft_min_word_len=1
为什么要设置 Mysql 的 ft_min_word_len=1 ? 从 Mysql 4.0 开始就支持全文索引功能,但是 Mysql 默认的最小索引长度是 4.如果是英文默认值是比较合理的,但是中文 ...
- 从MOV PC,PC;(或者ADDPC,PC,#4 )看ARM的三级流水线过程
3级流水线如上图所示(PC为程序计数器),流水线使用3个阶段,因此指令分3个阶段执行. ⑴ 取指从存储器装载一条指令 ⑵ 译码识别将要被执行的指令 ⑶ 执行处理指令并将结果写会寄存器 以前学过的51单 ...
- 前端手势控制图片插件书写二(transform矩阵的原理)
上次解释了如何使用代码识别双指和单指操作及放大和旋转拖动操作.这次解释下css3的transform原理 一.transform矩阵原理 transform: matrix(a,b,c,d,e,f) ...