vertical-align_CSS参考手册_web前端开发参考手册系列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vertical-align_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test p{border:1px solid #000;font-size:16px;line-height:2;}
.test a{margin-left:5px;font-size:12px;}
.baseline a{vertical-align:baseline;}
.sub a{vertical-align:sub;}
.super a{vertical-align:super;}
.top a{vertical-align:top;}
.text-top a{vertical-align:text-top;}
.middle a{vertical-align:middle;}
.bottom a{vertical-align:bottom;}
.text-bottom a{vertical-align:text-bottom;}
.length a{vertical-align:10px;}
</style>
</head>
<body>
<ul class="test">
<li class="baseline">
<strong>与基线对齐</strong>
<p>参考内容<a href="?">基线对齐</a></p>
</li>
<li class="sub">
<strong>与参考内容的下标对齐</strong>
<p>参考内容<a href="?">下标对齐</a></p>
</li>
<li class="super">
<strong>与参考内容的上标对齐</strong>
<p>参考内容<a href="?">上标对齐</a></p>
</li>
<li class="top">
<strong>对象的内容与对象顶端对齐</strong>
<p>参考内容<a href="?">要对齐的内容</a></p>
</li>
<li class="text-top">
<strong>对象的文本与对象顶端对齐</strong>
<p>参考内容<a href="?">要对齐的内容</a></p>
</li>
<li class="middle">
<strong>对象的内容与对象中部对齐</strong>
<p>参考内容<a href="?">要对齐的内容</a></p>
</li>
<li class="bottom">
<strong>对象的内容与对象底端对齐</strong>
<p>参考内容<a href="?">要对齐的内容</a></p>
</li>
<li class="text-bottom">
<strong>对象的文本与对象顶端对齐</strong>
<p>参考内容<a href="?">要对齐的内容</a></p>
</li>
<li class="length">
<strong>与基线算起的偏移量</strong>
<p>参考内容<a href="?">偏移量对齐</a></p>
</li>
</ul>
</body>
</html>

时间： 2024-11-05 17:19:33

vertical-align_CSS参考手册_web前端开发参考手册系列的相关文章

百度面试经历_web前端开发

百度面试经历_web前端开发 --2016年09月24日校招杭州站 刚面试完,担心过去就忘记掉,故回来时在地铁上用手机码下面试题目,供参考,也留作自己以后的面试参考依据.

前端开发常用手册、资料

转自:http://segmentfault.com/a/1190000000659414 收集整理的前端开发书籍.文档等相关资料(many books or documents for front-end developer) 如果你有更好的相关资料推荐的,也可以联系我的微博weibo.com/hwax1993 0.各种语言的API详解英文原版哦 1.正则表达式知识点整理 2.学习CSS布局 3.CSS参考手册 4.前端代码规范(腾讯alloyteam团队) 5.Emmet 文档 6.Java

前端开发大众手册(包括工具、网址、经验等)

今天闲来无事,把一些工具(online和client的).常用网址.以及经验总结等罗列出来和大家分享下.这个标题起地大了点,肯定会有很多地方没列到,包括类目的分法也可能考虑不周,所以还请大家积极补充指正,可以直接留言,也可以发邮件给我(sorrycc#gmail.com).之所以加上“大众”两字,因为以下资源对于高手来说可能早就很熟悉了. 另外想提一句,工具是死的,好不好用得看你会不会用.比如Firefox.Fiddler等,除了显而易见的功能以外,都有一些小的技巧,掌握了可以让你事半功倍. 更

Web前端开发规范手册

一.规范目的 1.1 概述 ..................................................................................................................................... 1 二.文件规范 2.1 文件命名规则...................................................................................

Web前端开发必备手册（Cheat sheet）

转自:http://blog.bingo929.com/cheat-sheets-for-web-develop.html Cheat sheet这个词组如果直译成中文,意思大概是"作弊小抄"之类的词,但Cheat sheet这个词的实际意思已经并非是贬义了,虽然中文还没有实际的对应词能够很好的翻译"Cheat sheet",但大致意思就是用于参考的简洁手册,就像是考试作弊时将必备的数学公式等写在一张纸上,以便考试时查询. 1.CSS Cheat Sheet 2.H

Front-End Developer Handbook 2017 前端开发人员手册2017(4)

2017年预计-- 原文:https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/2017.html Web Assembly, 可能只是高峰. import 可能仅仅被用在 <scripts></scripts> 全部JavaScript解决方案会继续上升, 致敬/服务器交付前端的日子(如html对于客户). 反应性编程仍然兴盛于JavaScript的场景.(见MobX和RxJS). React,更多

前端开发规范手册：（一）基本原则

1.结构.样式.行为分离 尽量确保文档和模版只包含HTML结构,样式都放到样式表中,行为都放到脚本里. 2.缩进 统一两个空格缩进(总之缩进统一即可),不要使用Tab键或者Tab和空格混搭. 3.文件编码 使用不带BOM的UTF-8编码. 在HTML中指定编码 <meta charset="utf-8"> 无需使用 @charset 指定样式表的编码,它默认为 UTF-8 (参考 @charset): 4.一律使用小写字母 <!-- Recommended -->

前端开发规范手册

参考:https://www.w3cschool.cn/webdevelopment/index.html 1.标签中属性值统一使用 双引号 <!-- Not recommended --> <span id='j-hook' class=text>Google</span> <!-- Recommended --> <span id="j-hook" class="text">Google</spa

『编写高质量代码Web前端开发修炼手册』读书笔记--高质量的CSS

1.怪异模式和DTD 标准模式:浏览器根据规范表现页面 怪异模式:模拟老浏览器行为防止老站点无法工作(为了兼容老式浏览器的代码),如果漏写DTD(Document Type Definition文档定义类型)声明,firefox会按照标准模式来解析网页,但在IE中就会触发怪异模式. 两种模式的差异比较大,比较典型的是IE对盒模型的解析:在标准模式中,网页元素的宽度是由padding.border.width三者的宽度相加决定的,而在怪异模式中,width本身就包括了padding和border的