行内元素
来源:互联网 发布:java应用知乎 编辑:程序博客网 时间:2024/05/07 20:52
1,行内元素有哪些?
——非替换元素:a,span,strong,b,abbr等;
——替换元素: img,input等;
2,行内元素有哪些特征?
——不会在内容前后产生“换行符”。
水平方向上可以设置内、外边距,但是垂直方向上即使设置了外边距也不会起作用。(对于非替换元素)
3,行内元素的基本术语?
——匿名文本:指没有放置在行内元素里的文本。
例:<p>匿名文本<span>行内元素里的文本</span></p>
——内容框: 内容框的高度等于font-size的值。
——行间距:行间距等于line-height与font-size的差值。该差值的一半分别放在字体的上,下,分别称为半间距。
——行内框: 对于非替换元素而言,行内框的高度等于line-height的值。(由内容框和行间距组成。)对于替换元素而言,行内框的高度则恰好等于内容区的高度,行间距不应用到替换元素。
——行框: 包含该行中的行内框的最高点和最低点的框。
例:这个行框由两种行内框组成;
非替换元素:
4,关于line-height:
代码:
分析: 父元素p设置了line-height为20px,font-size为20px,匿名文本的行框高度为20px;
Span元素设置font-size为40px,但是它的line-height继承父元素的,所以行内框高度为20px;得出它的半间距为-10px;可以看到文字发生了重合;这一行的行框高度为40px;
Strong元素的font-size设置为12px;它的半间距为4px;行内框高度为20px;
5,管理line-height:
为了防止文本发生重合,可以对font-size发生改变的元素的line-height结合使用em单位;
还可以在父元素里将line-height的值设置成为数值,这个数值会成为缩放因子;如:
Body {line-height: 1.5;}表示子元素文本的行高是文本大小的1.5倍;
6,vertical-align:
代码:
分析:span元素添加了vertical-align: 10px,即span里包含的文本会向上移动10px,从而使行框也增大了10px;
Strong元素的行内框的顶端相对于行框顶端来进行对齐;
注:
Top,bottom属性值的对齐是 行内框相对于行框来进行的;
Text-top,text-bottom 是行内框相对于父元素内容区来对齐的;
替换元素:
可以存在内、外边距,并影响着行内框的大小。Line-height值与行内框高度无关。行内框的高度取决于内容的大小。
替换元素里,设置vertical-align的值是百分数时是相对于line-height来对齐的;
- 行内元素,块状元素
- 行内元素
- inline(行内)元素
- 行内元素特性
- 什么是行内元素?
- 行内元素
- 块状元素行内元素和行内替换元素
- 块元素、行内元素,替换元素、非替换元素
- 行内元素 和 块状元素
- 行内元素 和 块状元素
- 行内元素和块状元素一览表
- 行内元素和块元素
- 行内元素和块级元素
- 行内元素和块集元素
- 块级元素和行内元素
- css_day7---块元素和行内元素
- 行内元素和块级元素
- 块元素与行内元素
- C语言实现设计模式之简单工厂模式(无内存泄露)
- BSP编程模型(以NMF为例,试验基于消息传递的模型BSP过程)
- fpga过零检测算法
- GBK,Unicode,UTF-8格式互转(转)
- Makefile学习笔记
- 行内元素
- hdoj 2522 A simple problem 【模拟】
- 算法篇之完整的大数!!!(我能想到的高精度就这么多了)
- 待字闺中之最大乘积分析
- C语言练习1
- PHP基础语法
- C++ 11 move
- CoreData和ios开发中的数据库,直接查询模拟器内的sqlite数据
- 各种PDF转换问题(三).将AutoCAD图纸转为PDF文档