line height 与 vertical align

一、line height

  

其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area。

 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因。

  line-height属性取值:

    

   

    1. %

      若自身没有设置line-height,则line-height = 父元素的font-size * %;

      即为直接继承父元素计算后的line-height,与自身的font-size无关。

    2. length

      若自身没有设置line-height,则line-height = 父元素的line-height, 也与自身的font-size无关。

    3. number

      若自身没有设置line-height,则line-height = 父元素的line-height。

      区别在于:不论继承与否,line-height = font-size * line-height,因此有灵活性。

    4. normal

      与number一样,只是浏览器不同,会有差异,约为1.2。

    5. inherit

      继承父元素的line-height

二、vartical align

  适用于:inline / inline-block / table-cell

  注:line box高度取决于inline box最高元素的高度。

  

      

  理解vertical-align最重要的是先要定line box基线(默认值):

    1. line box有inline box, 则为最后一个inline box元素的baseline

    2. line box没有inline box, 则为底margin边界,即为盒模型的边界

    3. line box有inline box, 但overflow != visible, 也为line box有inline box

    4. 特殊情况,若把inline box最高元素的vertical-align设为middle, 则baseline则为最高元素的中间线

  vertical-align取值:

    

    1. top / bottom

      使元素的top / bottom与line box的top / bottom对齐

    2. middle

      使元素的中点与line box的X-height对齐   (题外话:ex相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。)

    3. text-top / text-bottom

      使元素盒模型的top / bottom与line box文本元素的top line / bottom line对齐

    4. sub / super

      使元素盒模型的top / bottom与line box 的 sub / sup元素的baseline对齐

    5. length

      使元素上移 、下移length

    6. %

      1) 若为0,则为baseline

      2) vertical-align = line-height * %;  (可为负)

    注:若多行文本,两个inline-box则对齐最后一行的baseline

  

时间: 2024-10-21 04:35:02

line height 与 vertical align的相关文章

深入了解css的行高Line Height属性

来源:http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html 什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. 不过,行间距与半行间距,还是取决于CSS中的line-height.那么,如何来使用line-height呢? 默认状态,浏览器使用1.0-1.2 line-

div仿checkbox表单样式美化及功能

div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: 0; bottom: 1px; width: 100 % ; height: 980px; z - index: 9; background - color: #000; filter: alpha(opacity = 50); - moz - opacity: 0.5; - khtml - opa

原生 JS 实现移动端 Touch 滑动反弹

什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 Touch事件可以细分成三种,分别是: touchstart.touchmove和 touchend,并且 touch事件必须要用 addEventListener去监听. touchStart当手指触碰到屏幕的时候触发 touchmove当手指在屏幕上不断移动的时候触发 touchend当手指离开

Designing CSS Layouts With Flexbox Is As Easy As Pie

This article is an updated excerpt of the chapter "Restyle, Recode, Reimagine With CSS3″ from our Smashing Book #3, written by Lea Verou and David Storey. - Ed. Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of th

8-Highcharts曲线图之对数直线图

<!DOCTYPE> <html lang='en'> <head> <title>8-Highcharts曲线图之对数直线图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.min.js">

转:Generating PDFs from Web Pages on the Fly with jsPDF

The Portable Document Format has been one the major innovations in the fields of desktop publishing and office automations. It’s widely used in web publishing too, but unfortunately very often in wrong ways – like using it to replace contents that sh

自适应居中

一.窗体居中 1 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 50px; width: 165px; */ 简析: position:固定位置显示(absolute|fixed): [absolute:窗口大小由上层position为absolute.fixed.relative的子父关系窗口决定:fixed:窗口大小由上层层position为fixed的子父关系窗口决定] t

HighCharts绘制JS折线图(后台传数据给前台基于JFinal框架)

/*****************************Controller(基于JFinal框架)**************/ package com.zzu.controller;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.List;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartUtilitie

漫谈可视化Prefuse(五)---一款属于我自己的可视化工具

伴随着前期的基础积累,翻过API,读过一些Demo,总觉得自己已经摸透了Prefuse,小打小闹似乎已经无法满足内心膨胀的自己.还记得儿时看的<武状元苏乞儿>中降龙十八掌最后一张居然是空白页,在千钧一发之际以为自己要嗝屁了,一阵东风让苏乞儿明白了,最后一章要做的原来是——整合.没错,今天我们就来好好谈谈整合! 看懂API不代表你会灵活运用某个类,会用一些类不代表能实现小功能,耍的了小功能不一定会做可视化工具整合,整合之道,奥妙无穷! 前篇回顾:上篇<漫谈可视化Prefuse(四)---被