CSS这样的语法,细节问题非常多,往往一些难以处理的问题,有可能是一些细节问题不到位,所以先记下一些,留给以后自己看看。

1.line-height:150%与line-height:1.5 的区别

 .main{
font-size:12px;
line-height:150%;
margin:20px;
border:1px solid #ccc;
} .main p{
font-size:20px;
}
<div class="main">
<p>This is a test!</p>
</div>

当父容器为line-height:150%时,子元素P的line-height是按父容器的font-size*line-height来计算得出的是为18px;

然后当父容器为line-height:1.5时

 .main{
font-size:12px;
line-height:1.5;
margin:20px;
border:1px solid #ccc;
} .main p{
font-size:20px;
}

子元素P的line-height是按父容器的line-height*自己的font-size计算得出的,所以是30px;

虽然是一个小问题,但是在排版的时候,不注意的话,会有意想不到的效果的。

CSS中一些不经意的细节问题1的更多相关文章

  1. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

  2. 如何理解css中的float

    最近一段时间一直在为一个即将上线的新站进行一些前端开发.自然,对CSS的使用是必不可少的了.我们在CSS 中很多时候会用到浮动来布局.常见的有 float:left 或者 float:right .简 ...

  3. css中的border还可以这样玩

    在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人 ...

  4. CSS遮罩——如何在CSS中使用遮罩

    Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. 关于CSS中的float可能出现的小问题

    关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...

  7. [转]CSS遮罩——如何在CSS中使用遮罩

    特别声明:此篇文章由D姐根据Christian Schaefer的英文文章原名<CSS Masks – How To Use Masking In CSS Now>进行翻译,整个译文带有我 ...

  8. css中的流,元素,基本尺寸

    流 元素 基本尺寸 流之所以影响整个css世界,是因为它影响了css世界的基石 --HTML HTML 常见的标签有虽然标签种类繁多,但通常我们就把它们分为两类: 块级元素(block-level e ...

  9. CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画

    最近一直在使用 css-doodle 实现一些 CSS 效果. css-doodle 是一个基于 Web-Component 的库.允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 C ...

随机推荐

  1. fastJson顺序遍历JSON字段

    fastJson在把json格式的字符串转换成JSONObject的时候,使用的是HashMap,所以排序规则是根据HASH值排序的,如果想要按照字符串顺序遍历JSON属性,需要在转换的时候指定使用L ...

  2. machine learning----->学习成绩

    斯坦福大学机器学习公开课学习成绩:

  3. Python:迭代器

    迭代器:可以被next()函数调用并不断返回下一个值的对象称为迭代器. 可迭代对象:可以直接作用于for循环的对象. 基本方法:iter()和next() 迭代器创建: 例1: list = ['a' ...

  4. andorid 远程存储中JDK和Volley的GET和POST方法

    在操作Volley的时候先添加volley.jar(包) <uses-permission android:name="android.permission.INTERNET" ...

  5. Log4j基本用法

    基本使用方法: Log4j由三个重要的组件构成:日志信息的优先级,日志信息的输出目的地,日志信息的输出格式.日志信息的优先级从高到低有ERROR.WARN.INFO.DEBUG,分别用来指定这条日志信 ...

  6. Linux下设置网卡随系统启动

    在GUI下安装RHEL,在配置网卡的时候,有时候会忘了勾选网卡随系统自动启动,解决方法是系统启动后,打开网卡配置文件/etc/sysconfig/network-script/ifcfg-eth*,将 ...

  7. <大学祭>

    我将20岁青涩的身影留在教室前的花坛边,远赴他乡,这些年过去了,他总是对我说别忘记我的梦: 我将那个沉静娇小的眼镜女孩印象留在第一排靠窗的座位,带着淡淡离愁而去,这些年过去了,她对我说,永恒的爱是心中 ...

  8. Vrapper-Eclipse的vim插件安装方法

    Vrapper是一款Eclipse的插件,使在Eclipse下编辑文档时可以像使用Vim一样. 它有两种安装方法,在线安装和安装包安装: 在线安装: 打开Eclipse,Help->Instal ...

  9. java操作word,excel,pdf

    在平常应用程序中,对office和pdf文档进行读取数据是比较常见的功能,尤其在很多web应用程序中.所以今天我们就简单来看一下java对word.excel.pdf文件的读取.本篇博客只是讲解简单应 ...

  10. python语法快速入门(1)

    http://www.runoob.com/python/python-tutorial.html Python 是一种解释型语言: 这意味着开发过程中没有了编译这个环节.类似于PHP和Perl语言 ...