《css世界》的读书笔记

第三章 流、元素与基本尺寸

1.<a>、<button>等元素在使用键盘进行Tab键切换时可以被选中，即获取到焦点，表现为虚框或者外发光，这类元素为焦点元素；非焦点元素<div>、<span>等没有设置tabindex属性，即无法被tab键获取。在ie6/7浏览器下，非焦点元素对:active置若罔闻。(这里涉及到ie6，7的兼容性)

2.ie浏览器不支持伪元素的display值为list-item，即：:before、:after等伪元素。。。

3.大小不固定的图片和多行文字的垂直水平居中：http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html

4.width:auto的4种不同宽度表现：（1）充分利用可用空间。即、默认宽度是父容器的宽度。（2）收缩与包裹。即、宽度等于内容的宽度，而不是父容器的宽度。（3）收缩的最小。即：数字与英文单词不会像汉字一样轻易断开而跑到下一行，造成的效果如下图所示：不过遇到必须要换行的情况可以使用word-break:break-all;只对英文起作用，以字母作为换行依据和word-wrap:break-word; 只对英文起作用，以单词作为换行依据来实现强制换行。（4）超出容器限制。和第三种情况一样，也可以通过设置white-space:nowrap强制不换行。

5.“鑫三无准则”，即“无宽度，无图片，无浮动”，无宽度是为了保持“外部尺寸”的流动性。

6.包裹性拥有自适应性，指的是元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）。按钮是包裹性最好的例子，也是极具代表性的inline-block元素。其中<button>标签按钮会自动换行，<input>标签按钮，默认white-space:pre,是不会换行的，需要将pre值重置为默认的normal。除了inline-block元素，浮动元素以及绝对定位元素都具有包裹性，均有类似的智能宽度行为。

7.首选最小宽度，指的是元素最适合的最小宽度。当外部容器宽度为0时，内部元素的宽度分中文与英文两种情况，中文时最小宽度为每个汉字的宽度，英文时宽度由特定的连续的英文字符单元决定，一般会终止于空格、短横线、问号以及其他非英文字符等。

8.宽度分离原则。就是css中的width属性不与影响宽度的padding/border（有时候包括margin）属性共存。把它们分离开来，width独占一层标签，而padding，border，margin利用流动性在内部自适应呈现。

9.max-width和max-height的初始值为none，min-width/height的初始值为auto。

10.超越!important指的是max-width会覆盖width。超越最大指的是min-width覆盖max-width，此规则发生在min-width和max-width冲突的时候。

11.任意高度元素的展开收起动画技术。很多时候height的值是不固定的（即动态的），因此height使用的值是默认的auto，auto是个关键字值，并非数值，正如height:100%的100%无法和auto相计算一样，从0px到auto也是无法计算的，因此无法形成过渡或动画效果。解决方法：在展开的css（即：.element.active）中的height:auto换成max-height:666px;并不一定要666，只需要设定为保证比展开内容高度大的值就可以。因为max-height值比height计算值大的时候，元素的高度就是height属性的计算高度，也就是height:auto时候的高度值。这样，一个高度不定的任意元素的展开动画效果就实现了。有一点要注意，不要把max-height的值设置太大，这样页面展开关闭会有延迟。

12.如何辨别内联元素。（1）从定义看：内联元素的内联特指“外在盒子”，和“display为inline的元素”不是一个概念！inline-block和inline-table都是“内联元素”，因为他们的“外在盒子”都是内联盒子，所以即使它们的“内在盒子”分别为block和table等块状元素依然为内联元素。button按钮元素也是内联元素，因为其display默认值是inline-block；img图片元素也是内联元素，其display默认值是inline。（2）从表现看：“内联元素”的典型特征就是可以和文字在一行显示。因此，文字是内联元素，图片是内联元素，按钮是内联元素，原生表单控件等都是内联元素。