我的css释疑-float line-height inline-block vertical-align

markdown的图片和链接格式相类似:

[链接文字/图片的alt text] (链接地址/ 图片的地址), 只是图片要在前面加上感叹号!

当内容中含有图片的时候，如果图片的高度大于行高，则含有图片 行的行框将被撑开到图片的高度

注意：图片虽然撑开了行框，但是不会影响行高，因此也不会影响到基于行高来计算的其他属性。

提示：当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐

![图片撑高行框] (http://www.baidu.com/)

vertical-align 是使(行内) 元素的基线和 元素所在行/ (行框)的 基线 之间的垂直对齐方式

vertical-align 只是对行内元素有效.对块级元素无效

由于需要确定行框的基线高度, 所以对于空的div,(由于没有行框基线),所以 为了对图片进行垂直方向上的

vertical-algin布局, 还需要专门去创建一个空的span元素, 设置span元素与父容器的高度相同, 然后,对图

片应用vertical-align:center样式...



vertical-align主要是应用于: 行内的图片 和 文字 之间的 对齐 方式

vertical-align的值有: baseline/ top middle bottom/ super sub/ text-top text-bottom(text没有text-middle对齐)/...

实际在使用时, 其实是不会过度关注(太在意)它们之间的对比排列位置的, 只要设置好就行.

vertical-align属性是不适用于块元素的，这就是为什么有些人使用vertical-align属性无效的原因。

但是可以使用display属性，设置其值为table-cell/inline，将块元素转化为单元格，然后再使用vertical-align属性。但存在兼容性问题

此处需要特别注意的是：垂直对齐属性只对行内元素有效。例如有如下代码：

<p style=”vertical-align:super;”>垂直对齐<span>上标</span></p>
<p>元素默认为块级元素，因此在浏览器内浏览时将不会有任何变化。而如下代码：
<p>垂直对齐<span style=”vertical-align:super;”>上标</span></p>
<span>元素默认为行内元素

为什么垂直居中 要使用/ 要写 两个元素的vertical-align: middle样式?

因为, 如果只写一个元素如图片的vertical-align: middle, 则是让该图片元素的middle中间

跟行框的baseline对齐, 而行框的baseline默认的是文字的baseline, 在span的底部, 这样, 自然的图片

就在div的底部, 不能跑到div的垂直中间了.

如果连同 "辅助布局元素" span和图片元素, 的vertical-align都写middle. 则能使这两个元素的middle中

心相对齐了, 即: 图片居于div的垂直中心了.

也可以这样看, 前面那个span的 vertical-align:middle, 就使得行框的baseline称为div的垂直中心线了...

所以后面的img 的: vertical-align: middle, 就使得图片的middle跟行框的中心线对齐了.

注意: 即使对于要应用垂直居中的元素是 文字, 也要用两个 vertical-align: middle. 也要增加一个布局

的 span元素.

对于图片元素来说, 其基线就是指 图片的底端

块级元素和行内元素的转换

块级元素和行内元素的区别: 是否自动产生换行? <是否前后都有换行>

常用的块级元素: 表格相关的table/th/tr/td, 列表相关的ol/ul/li, 标题hx

行内元素->块内元素: span: display:block.

块级元素->行内元素(内联元素): div: display:inline.

display的有哪些值?

对于 HTML 等文档类型，如果使用 display 不谨慎会很危险

，因为可能违反 HTML 中已经定义的显示层次结构

参考w3school的内容

style type="text/css" // 这里指明类型type就是css就好了!
display: block
display:inline
display: inline-block:作用: 在排版布局上同inline, 但是 "内联 非替换元素"原来不能不生效的
     width, height,内/外边距的 上下边距 属性将会如同block一样 得以生效.
      inline-block的主要使用场景: 触发 \<span\>等元素的 layout 设置属性, 以满足某些特殊的布局需要
display: list-item:作为列表样式显示．
display: 作为表格/及表格相关的一些元素显示: table/inline-table/table-row(~~\<tr\>, 不会显示边框)
/table-column(~~<col>仅仅是指定列的对齐方式,不会显示内容)/table-cell(~~th, td).

css的版本

css1: 发布于1996年

css2: 发布于1999年

css2.1:　草案2007年.(以此为应用较多).

边框的显示范围?

对于行内 非替换元素, 它的边框线,只会包围 其内容的部分, 因为上下方向的内外边距无效.

而对于block块级元素, 包括 inline-block元素, 边框线都会扩展到内外边距的范围.

block元素和inline元素的区别?

display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父
元素宽度。(占父元素的100%宽度)
    block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
    block元素可以设置margin和padding属性。

display:inline
    inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换
一行，其宽度随元素的内容而变化。
    inline元素设置width,height属性无效。
    inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；
    但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block
    简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
    比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

补充说明

一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实
display的参数远远不止这三种，仅仅是比较常用而已。
IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理
论上IE是不识别的，但使用<font color="red"><strong>display:inline-block在IE下会触发layout，
从而使内联元素拥有了display:inline-block属性的表象

text-align与vertical-align的区别?

text-align与vertical-align, 虽然都是设置align, 但是他们的用法差别很大:

• 应用的级别不同, text-align应用的对象是 块级元素, 而vertical-align应用的是行内元素.

• 书写的位置不同: text-align要写在父容器的div上, 而vertical-align写在行内元素本身上,

• 作用的对象不同:　text-align是设置 div容器中的 图片和文字(注意虽然名字叫text...,实际上对图片也有效)(不是div容器本身)的水平排布对齐位置, 它并不对div其作用. 而vertical-align就是设置行内元素自己!

div的高度height:100% 无效?

无效, 是因为height:100% , 是将div的高度设置为 父容器 高度的100%, 而div无法获取它的父容器: body

的高度. 所以, body就会以div本身的大小来显示body的高度.

注意: html文档的整个标签, 包括body, html 都是有实际意义的.

body的父容器是html标签, 而html标签的父容器(或者说其本身所指代的)是: window, 或document

标签.

如果没有指定body, html的高度, 那么他们本身就是根据body中包含的内容, 来决定其高度的.

所以, 要设置div的高度为整个屏幕, 就要显式的设置body和html标签 的高度:

body, html{
height: 100%;
}

这样, html和body的高度就为整个屏幕客户区: window.ClientTop/ClientHeight/ClientWidth的高度,

然后, body下的div的高度为100%, 就是为其父容器的高度. ...

margin-left: -1px?

使用左边距, 这是一个技巧, 可以让 仅仅是为了布局而引入的span,div等占用的宽度/高度, 被还原出来.

而不影响其他元素的占位关系.

line-height在单行文本 垂直居中的应用.

line-height除了在指定 文字行 与 行之间的 间距, 增大或减小行间距(如同 word中的单倍行距/ 2倍行距

等)(关于line-height和 font-size/ 行距的数学关理论如前 ) 之外,

还可以用于使文字 居于 有背景图片的 单行 垂直居中位置:　因为指定line-height后, 会在文字的上下方

增加 (lineHeight - fonetSize)/2 这样的一个空白间距(内padding)

w3school上的解释是: 该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的

最小距离而不是最大距离。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为

两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

所以只要使 文字的容器span或p的line-height: 100px; 和包含背景图片的div的高度 相等就可以使文字垂

直居中!

line-height应用的元素的 层次?

line-heig字ht, 叫行高, 仅仅是指 文/文本, 而不管图片. line-height是容器中 文本行 与 文本行之间的距离.而不管容器是块级还是行级.

它等于font-size 与 行间距 之和.

line-height是指 (块级/行内)元素容器 中包含的 文本行之间 的距离.

line-height并没有限制 包含 文字/文本 的父容器的 类型, 它可以是 块级元素, 也可以是行内容器.

也就是说, 块级元素和 行内元素, 都可以使用 line-height样式. 文本可以是 单行, 也可以是多行.

如: p.small, p.big , p , div,li, span { line-height: 200px;}

如果 块级元素中, 只包含一行, 单行, 那么, 设置行高line-height等于容器(如li, p, div)的高度, 则文字的上下正好填充行间距的1/2.

从而使单行文字 居于容器的 垂直居中. 这是line-height非常常用的一个用法