CSS权威指南 - 基础视觉格式化 2
行内元素
em a 非替换元素 img 替换元素
两者在内联内容处理方式不一样。
inline有时候被翻译成内联,比如inline content,有时候被翻译成行内 inline box。
行布局
行内元素只是生成一个框,没有其他内容(里面不能放框了可能)与之并存。
单行行内元素
多行行内元素
相邻两行之间的边框,firefox不重叠,上一行的下边界在下一行的上边界的下边,交错着的。似乎chrome是重合的不一样。
水平方向对齐方式 text-align
left right center justify
justify调整每行的word之间的空白,文本两侧和内容区两侧对齐。
基本术语和概念
匿名文本 anonymous
未包含在行内元素标签的文本。比如<p>inline</p>,p是块级元素,之中的文本inline没有被内联标签包括,为匿名文本。
em框
字符框,实际字形可能更高或矮,font-size决定了em框的高度。
内容区
非替换元素,em框串在一起构成框为内容区,或者字符字形描述的框构成内容区,也就是字体设计者设计的实际的大小。试了试每个浏览器不一样,比如设置一个内联非替换元素font-size:12px,内容区高度firefox的内容区高度14px,有时候不同的浏览器还不一样,浏览器应该是用的第二种方案。对于替换元素,内容区为固有高度加内外边距及边框。
行间距 leading
font-size 减去 line-height 为行间距,均分两份(half-leading)放在内容区上下。
行内框 inline box
行内框就是行间距加上内容区。行内框高度的决定:非替换元素的行内框的高度line-height,替换元素内容区高度加内外边距和边框。
行框 line box
不同于行内框,行框是指一行(可能有多个行内框)中的最高的行框到最低行框的距离。
一行如何一步步构成一个行框
一些概念的解释:
- 内容区类似于块级元素的内容框。
- 行内元素背景应用于内容去和内边距。和块级元素一样。
- 行内元素的边界(指想象的盒子边界而不是盒子模型的border)包括内容区加上内边距和边框。
- 非替换元素的padding margin 不影响形成的行内框的高度。have no vertical effect on inline elements or the boxes they generate
- 替换元素的padding margin就会影响形成的行内框的高度。
行框的形成:
- 确定行内框的高度。行内非替换元素为line-height减去font-size,平分两份,在font-size确定的em框上下放置,形成行内框,行内替换元素,行内框由margin,padding,border加起来。
- 对各个内容区,内容区的各个元素及匿名文本的基线位置,替换元素就没有基线,用底部,然后对齐。
- 根据vertical-align 调整垂直偏移量。行内框要上/下移动多少。
- 计算最后的行框的高度,一行各个行内框的最高的和最低的之间的距离。
行内格式化
line-height决定行框高度。
行内非替换元素
建立内容区
行内框 inline box
基线对齐之后,形成行框 line box
***
垂直对齐 vertical-align
行内框垂直对齐方式
top 行内框的顶部和行框的顶部对齐。bottom 类似
text-top 行内框的顶部和父元素的内容区顶部对齐。另有text-bottom
理解,text-top和内容区(由line-height)顶部对齐,top则是行框(内容区加上行间距)对齐。
关于vertical align 的文章 http://christopheraue.net/2014/03/05/vertical-align/
center 元素基线上0.5ex(ex为以行高作单位)
super 元素内容区和行内框上移 sub下移 可以设定为百分数。
***
管理line-height
如果line-height设置成一个绝对的值,比如14px,如果字体大小大于14px,行间可能会出现重叠。可将line-height 设置成1,表示line-height为font-size的一倍。
但,如果有边框的话,由于line-height不包括边框,也可能出现重叠,只有单独设置带边框的行内框的line-height。
***
缩放行高 line-height:后接数字表示font-size的倍数
***
增加框属性
border是绕着内容区+padding的,而不是line-height的。
上下边框、上下内边距及上下外边距不影响line-height对于非替换行内元素的布局。
CSS权威指南 - 基础视觉格式化 2的更多相关文章
- CSS权威指南 - 基础视觉格式化 3
行内替换元素 替换元素比如图片的高度比line-height大,并不会影响整个文字段落的line-height,会让有图片那一行框的高度可以容纳这个图片. 这个图片依然有一个line-height,和 ...
- css权威指南-基本视觉格式化(水平与垂直)
1.基本概念 (1)正常流:是指西方语言文本从左向右,从上向下显示.如果要让一个元素不在正常流中国,唯一的办法 就是使之成为浮动或定位元素. ( ...
- CSS权威指南 - 基本视觉格式化 4
改变元素显示 没有讨论与表格相关的.列表list-item的值.之后讨论. 改变显示角色 显示为块级元素 将一串链接(行内元素)改变垂直放置,若有如下一连串的链接: <div id=" ...
- CSS权威指南 - 基本视觉格式化 1
定位 定位的想法很简单元素框相对于正常位置出现在哪里. 定位:static,相对, 绝对, fixed, 继承 static就是默认的位置 相对就是相对于默认位置的偏移.原来的static定位位置依然 ...
- 《CSS权威指南》基础复习+查漏补缺
前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- CSS权威指南 - 层叠
CSS权威指南 第三章结构与层叠 - 层叠 按权重及来源排序 1. Reader important declarations 2. Author important declarations 3. ...
- css权威指南读书笔记-第10章浮动和定位
这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...
- css权威指南读书笔记
今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...
随机推荐
- export 解决环境变量的问题!!!!
export PATH="/usr/local/sbin:/usr/sbin:/sbin:/usr/local/bin:/usr/bin:/bin:/root/bin" 如果/et ...
- 解决页面插入HTML代码后错位(HTML代码里的标签不完整导致错位)
这个的例子是从数据库读取出来的数据内容包含HTML导致页面错位问题! 解决办法如下: 首先过滤掉会跟JS冲突的字符,C#代码如下: string htmlc = Model.HtmlContents. ...
- 推荐:移动端前端UI库—Frozen UI、WeUI、SUI Mobile
Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...
- mac 下修改Hosts文件
最近Google网站老是打不开,具体原因大家都明白,不过修改Hosts文件后,就能访问了,也算不上原创,网上一搜就能找到,自己操作记录下,希望有刚接触Mac 系统的童鞋有帮助. 第一步:打开Finde ...
- Java Hour 28 HashSet
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 28 HashSet 为查找而生 LinkedList查找效率低下, ...
- JSON详解(转)
JSON详解 JSON的全称是”JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式.XML也是一种数据交换格 ...
- 分享一下spark streaming与flume集成的scala代码。
文章来自:http://www.cnblogs.com/hark0623/p/4172462.html 转发请注明 object LogicHandle { def main(args: Array ...
- Regionals 2012 :: HangZhou
题目传送门排行榜 一个人做了12年北大出的题,自己还是太弱了,图论的知识忘光光,最小生成树裸题写不来,Dijkstra TLE不知道用SPFA. 简单几何(点到线段的距离) + 三分 B Steali ...
- 贪心 Codeforces Round #301 (Div. 2) B. School Marks
题目传送门 /* 贪心:首先要注意,y是中位数的要求:先把其他的都设置为1,那么最多有(n-1)/2个比y小的,cnt记录比y小的个数 num1是输出的1的个数,numy是除此之外的数都为y,此时的n ...
- ural 1245. Pictures
1245. Pictures Time limit: 1.0 secondMemory limit: 64 MB Artist Ivanov (not the famous Ivanov who pa ...