CSS3学习笔记--line-height:150%与line-height:1.5的真正区别

代码：
<div style="line-height:150%;font-size:16px;">
    父元素内容
    <div style="font-size:30px;">
        Web前端开发<br />
        line-height行高问题
    </div>
</div>

其实区别就在于继承的问题上。

150%是先计算后继承，根据父元素的字体大小计算出行高，并且子元素依然沿用这个计算后的行高：子元素的行高 = 16*150% = 24px; 因此字体显示不全。

1.5则是先继承后计算（无单位参数），根据子元素自己字体的大小去乘以1.5来计算行高：子元素的行高 = 30*1.5 = 45px；因此字体显示完全。

另，1.5em等也是按照150%的情况来算的。

时间： 2024-10-27 11:59:16

CSS3学习笔记--line-height:150%与line-height:1.5的真正区别的相关文章

CSS3学习笔记

这两天的CSS3学习笔记: 慕课网课程地址: http://www.imooc.com/learn/33 笔记: 边框: 圆角效果border-radius:同border相同的缩写方式: 阴影box-shadow: 参数说明: 说明: 单位除了用px也可以用百分比: 多个阴影:用逗号隔开即可: 模糊半径与扩展半径的区别: 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊: 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整

CSS3学习笔记——伪类hover作用于子元素

最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示” ,想看看里面 “不同缓动类效果demo” 例子的效果,发现了一个问题如下: .Trans_Box :hover (冒号前空格)这个伪类只能作用于 .trans_box中的子元素,鼠标移到自身时只能激发其子元素的样式发生改变. <div id="hhh" class="Trans_Box"> <div

【JAVAWEB学习笔记】21_多条件查询、attr和prop的区别和分页的实现

今天主要学习了数据库的多条件查询.attr和prop的区别和分页的实现一.实现多条件查询 public List<Product> findProductListByCondition(Condition condition) throws SQLException { QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource()); //定义一个存储实际参数的容器 List<String> list =

css3学习笔记三

css3有些特殊的元素选择器这和jquery相似.效果图如下黑色的小球是旋转3D效果不是特别明显,主要是学习的是对每个小球的控制.上代码. <!DOCTYPE html><html> <head> <title>Ball.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&g

十天精通CSS3学习笔记 part4

CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个"@keyframes"中的样式

HTML5+CSS3学习笔记（二）页面布局：HTML5新元素及其特性

HTML5新元素及其特性 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义

css3学习笔记，随时帮你记起遗忘的css3

一,css3基本情况介绍. 顾名思义css3是css2的升级版本,它较以往版本新增了很多强大的功能.目前chrome,safari,firefoxopera,IE10以后都开始支持css3的效果. 1.具体增加的强大功能介绍..选择器:以前我们通常用class,id,tagname 来作为html元素的选择器.css3的选择器更强大,他可以减少标签中的class,id的数量,更方便的维护样式表,更好的实现结构与表现的分离..圆角效果:border-radius..块阴影和文字阴影:可以对任意di

HTML5+CSS3学习笔记（一）

前段时间一直在学Python,不仅仅只是学Python的基础语法,还有科学计算,主要是Numpy和Matplotlib,爬虫,暂时还没有用到Scrapy那么高端的库,还停留在Python自带的urrllib模块,还有BeautifulSoup解析器,我发现,Web的问题,始终绕不过去.不得不承认的是,Web已经成为数据获取的主要渠道,所以有必要了解其机理性的一些规则,更何况,话有一点小私心,就是想做一个个人网站出来.总而言之,Web的知识是必须得学的,最直接的,自然就是HTML.CSS和Java

[CSS3] 学习笔记-HTML与CSS简单页面效果实例

一个简单的首页的设计: html文件: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="1.css"> 7 </head> 8 &