对于行内元素如em、strong、span和等,其padding、margin、border-top、border-bottom 不会增加行高。padding会覆盖;margin将重置为0;border-top和border-bottom同样会覆盖。padding-left、padding-right、border-left和border-right可用。
img元素会影响行高
证明撑开div高度的是line-height而不是font-size
内联盒子/匿名内联盒子inline-boxes
行框盒子line-boxes 每一行就是一个“行框盒子”,每“行框盒子”由一个个“内联盒子组成”
包含盒子containing-box,由一行行的“行框盒子”组成
内容区域content-area,一种围绕文字看不见的盒子,大小与font-size大小有关
1.行高的垂直居中性
、、在单行或多行或图片垂直居中实现上的应用
单行文字的垂直居中对齐: line-height值设置为height一样大小的值可以实现单行文字的垂直居中;height值可以省略
多行文字的垂直居中对齐 : 要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div,里面文字单行或多行显示,字体大小有大有小的情况怎么办呢?方法之一就是借助于line-height。
、 、图片的垂直居中
类似上面处理的方法,借助 i标签或伪元素
、 、使用缩放因子
我们知道html中元素对外表现都是一个个盒子或者说是框,那么这些盒子是否都一样呢?前面说过,这些盒子有的是从上到下竖着摆放的,而有的是横着摆放的。另外,有的盒子装的内容是直接展示的,有的却是魔术盒,根据标签和属性决定具体的展示内容。
替换元素是指,浏览器会根据元素的标签和属性,来决定元素的具体显示内容。 其内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)。
最明显的两个例子:
另外,textarea、select、object、video都是替换元素。这些元素往往没有实际的内容,即是一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。
HTML 的大多数元素是非替换元素,浏览器直接将其内容显示出来。例如:div, p, span
普通流中,块元素独占一行。例如:div,p,h1等。
普通流中,行内元素左右可以有其他行内元素。
块级元素,width,height,margin,boder的设置遵循盒模型。
行内替换元素,width,height,margin,boder的设置遵循盒模型。另外,当其宽高有auto属性时,其表现如下:
css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性
替换元素和非替换元素
html元素两种分类。替换元素和不可替换元素;块级元素和行内元素
置换元素(替换元素)和非置换元素(不可替换元素)
行内元素与块级元素的总结
置换和非置换元素