每天CSS学习之line-height

line-height是CSS的一个属性,其作用是设置行高。其有以下几种值:

1、normal:自动设置合理的行间距。该值是默认值。如下示例:

            p{
                line-height:normal;
            }

结果:

2、number:即数字。该数字会与当前字体尺寸相乘来设置行间距。如下示例:

            p{
                line-height:1; //行间距就是一个字体的尺寸
            }

结果:

3、length:即带单位的长度,设置固定的行间距。如下示例:

            p{
                line-height:10px; //设置行间距为固定的10px
            }

结果:

4、百分比:基于当前字体尺寸的百分比来设置行间距。如下示例:

            p{
                line-height:50%; //即按照当前字体尺寸的一半来设置行间距
            }

结果:

时间: 2024-08-01 11:56:24

每天CSS学习之line-height的相关文章

CSS学习之float解析

转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.下面解释下这个定义中的几个名词的概念: 文档流:在html中文档流即为元素从上至下排列的顺序. 脱离文档流:元素从正常的排列顺序被抽离. 最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding). 二.float

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

HTML, CSS学习笔记(完整版)

第一章 div布局 前几课内容 .htm是早期的后缀,因为那时只能支持长度为3的后缀,因此html与htm是一样的. shtml是服务器先处理然后再交给浏览器处理 #HTML小知识#之#XHTML与HTML的区别#XHTML是更严谨更纯净的 HTML 版本.XHTML目标是取代HTML.更详细的介绍 XHTML 教程 http://t.cn/h94BV #HTML小知识#之#<!DOCTYPE>声明#位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器文档使用

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

【转】css学习专题-BFC

css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 containing block 顶部起一个接一个垂直排列,水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC). developer center上面有对BFC的一段描述: 一个 block formatting context 是web页面可视化CSS渲染的一个部分,是一块 block b

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

CSS学习笔记:溢出文本省略(text-overflow)

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应

CSS学习------CSS定位(position)与浮动(float)

position属性:用来对元素进行定位 定位的意义: 定位允许你定义元素框相对于其正常位置应该出现的位置. 相对于父元素. 相对于另一个元素. 相对于浏览器窗口本身的位置. 定位分为:绝对定位和相对定位. 相对定位: 如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间.因此,移动元素会导致它覆盖其它框. 示例: <html>   <

css学习归纳总结

来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性选择器 如: p[title] { color:#f00; } 4.包含(后代)选择器 如:body ul li{} 5.子元素选择器 如:div > p{} 6.ID选择器 如:#myDiv{} 7.类选择器 如:.class1{} 8.伪元素选择器 如:E:first-line,

CSS学习笔记08 浮动

从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法外,还有没有其他方法可以实现这种效果呢,答案是肯定的,那就是下面要介绍的CSS的浮动特性,浮动从字面意思上来看,就是浮起来,动起来,那么是谁浮起来,又是谁动起来呢?往下看,很快就会知道答案了. 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,漂浮在标准流之上.元素浮动后,虽然脱离标准流,但