vertical-align 笔记

一些属性解释。

几个自己认为常用到的属性

baseline:默认

数值,px 百分比等是元素相对于基线偏移值,负数为向下偏移,正数为向上;

text-top:把用vertical属性元素的顶端与父元素中的文字顶端对齐;

text-bottom:把用vertical属性元素的底端与父元素中的文字底端对齐;

这里说的父元素中的文字底\顶端也包含了在父元素中的其他同级子元素的文字,比如parent
这个DIV中包含了A--采用vertical-align的元素和B,B元素中有段文字。

那么text-bottom、text-top就是对齐的这段文字

top:把用vertical属性元素的顶端与父元素中的line-box顶端对齐;

bottom:把用vertical属性元素的底端与父元素中的line-box底端对齐;

line-box指的是这个元素的content。content高度为其内容撑起来的高度或则是直接设定其值的高度。

换言之,top的意思就是把元素的顶端与最高的同级子元素的顶端对齐

bottom就是content的底端对齐;

vertical-align 笔记,布布扣,bubuko.com

时间: 2025-01-21 20:35:55

vertical-align 笔记的相关文章

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 *

转 HighCharts笔记之: Bar Chart

最近需要做一些Web图标,研究了几个开源的第三方工具后,最后决定使用HighCharts开发: Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.目前HighCharts支持 的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表. HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,

HTML之学习笔记(八)表格

Html的表格使用table标签.table标签含有tr(table row)子标签,tr又含有th(table head)和td(table data)子标签这样的嵌套结构 代码演示 1 <table border="1" width="600"> 2 <tr> 3 <th>name</th> 4 <th>age</th> 5 <th>sex</th> 6 </t

android客户端应用(native app)适配测试自动化 东海陈光剑 2014年5月5日 0:39:04

未命名 android客户端应用(native app)适配测试自动化 东海陈光剑 2014年5月5日 0:39:04 http://10.125.1.58:88/report.html?run_stamp=20140428054354&min=3&sec=214 <!doctype html><html><head>    <meta charset="UTF-8">    <title>适配测试报告<

Highcharts的基本属性和方法详解

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. 目前HighCharts支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表. HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快.另外HighCharts还有很好的兼容性,能够完美支持当前大多数浏览器. 下面给

【phantomjs】使用phantomjs生成highChart的图片(待完善)

阅读目录 简单介绍 章节1:xxxx 章节2:xxx 章节3:xxxxx 章节4:xxx 章节5:xxx 章节6:xxx 章节7:xxx 简单介绍 回到顶部 一.使用phantomjs结合json文件直接生成highcharts图片 <highcharts官网-示例程序> http://www.highcharts.com/demo http://www.highcharts.com/demo/line-basic  (基本类型的chart) http://www.highcharts.com

Android应用性能测试(客户端-服务端)平台实现

Android应用性能测试(客户端-服务端)平台实现 东海陈光剑 2014年5月23日 2:01:05 开源项目代码: https://github.com/universsky/EmmageePlus (基于Emmagee) https://github.com/universsky/EmmageePlus/blob/master/src/com/netease/qa/emmagee/service/EmmageeService.java /* * Copyright (c) 2012-201

hospital:广西大学生计算机设计大赛

html 当时做到的就是这些了 <!DOCTYPE html><html lang="en"><head> <title>病人信息查询系统</title> <meta charset="UTF-8"> <link href="css/style.css" rel="stylesheet" type="text/css">&l

3-Highcharts 3D图之3D柱状图分组叠堆3D图

<!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.min.js&q

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">