第三章 流、元素与基本尺寸
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)从表现看:“内联元素”的典型特征就是可以和文字在一行显示。因此,文字是内联元素,图片是内联元素,按钮是内联元素,原生表单控件等都是内联元素。