张鑫旭html入门,学习张鑫旭前辈课程的有关笔记（二）

上一篇手记是第一部分，共5个属性，接下来的这篇，是另外5个属性。

同样，仅作为大家观看张鑫旭前辈视频的参考文档。作为查阅文档也是可以的。

《深入理解vertical-align》

vertical-align支持的属性以及组成：

1、线类：baseline、top、middle、bottom

2、文本类：text-top、text-bottom

3、上标下标类：sub、super

4、数值百分比类：20px、2em、20% ……

共性：都带数字、都支持负值、行为表现一致(在baseline对齐基础上上下偏移对应数值大小)

差异：vertical-align的百分比值是相对于line-height计算的(IE6/7下vertical-align百分比值不支持小数line-height)

vertical-align起作用的前提：只能应用于 inline水平 以及 'table-cell' 元素(默认状态下，也即 图片、按钮、文字、单元格 支持vertical-align)

inline水平：

inline：、、、、未知元素 ...

inline-block：(IE8+)、(IE8+) ...

'table-cell' 元素：

table-cell：

display：能更改元素的显示水平

例如把一张图片设置为 display: block; 后，vertical-align即失效

某些CSS声明：能间接更改元素的显示水平

例如把一张图片设置为 float: left; 或 position: absolute; 后，会使图片block水平化，从而vertical-align失效

使图片在父级(block水平)元素中垂直居中：

1、将父级元素的 line-height 设置为父级元素的高度大小，然后再为图片设置 vertical-align: middle; 即可

2、对父级元素设置 display: table-cell; vertical-align: middle; 即可(起作用的是table-cell本身)

实现多行文字与图片的垂直居中：

包裹文本的元素设置 display: inline-block; vertical-align: middle; 图片设置 vertical-align: middle;

对于内联元素，vertical-align与line-height虽然看不见，但实际上到处都是！(一对好基友)

如何去掉图片与容器的底部间隔：

1、图片block水平化( 使vertical-align失效 )

2、改变图片的默认对齐方式( 对图片设置vertical-align: bottom/middle/top; )

3、改变容器的行高( 设置line-height: 0; )

4、改变容器的字体大小( 设置font-size: 0; 即间接改变容器的行高 )

实现图片相对于容器的近似居中：

容器的line-height设置为容器的高度(比图片的高度值要大)，图片设置 vertical-align: middle; 即可

使一个空的兄弟内联结点不撑开图片与容器底部的距离：

对容器设置：line-height: 0; 对空的兄弟元素设置：vertical-align: top;

当line-height为0时，文字与容器的位置关系：

1、行高为0，则文字字符占据容器的高度也就变为0了

2、行高是决定文字的中心的，因此文字的高度也就移到了文字的中心

3、文字的高度就是它在容器的位置，因此文字的高度会出现在容器的顶部(为0了嘛)

4、此时，基线继续在文字的底部(inline-block元素默认的是基线对齐哦)

inline-block水平元素的默认基线位置：

1、当元素完全没有内容时，它的基线是容器的底部边沿

2、它的基线是里面的 inline box 的最后一行的基线

为inline-block水平的空的 span 为什么撑开了一段高度？

原因：与span在同一行的空白字符(摸不着的)的高度为0，但由于字体大小的原因，该空白字符的基线(字体底部)离字符中心为1/2字体大小的高度，

而span为空元素

因此必须与该空白字符基线对齐，从而把容器的底部撑开了1/2字体大小的高度

为inline-block水平的非空的 span 为什么不撑开高度了？

原因：该span的基线在拥有内容后不再是底部边沿，而是与 line box 的基线一致了，由于其高度为0(因为line-height为0)，line-height

vertical-align: bottom; 的作用：

在inline/inline-block水平元素中：使当前元素与整行 inline box 的底部对齐(inline box的其他内容则是baseline对齐)

在table-cell元素中：单元格底padding边缘和表格行的底部对齐

vertical-align: top; 的作用：

与vertical-align: bottom; 的作用刚好相对

vertical-align: middle; 的作用：

1、inline/inline-block元素：元素的垂直中心点和父元素基线上1/2的 字符的高度 处对齐

2、table-cell元素：单元格填充盒子相对于外面的表格行居中对齐(td单元格不足高度会用padding填补)

如何利用vertical-align实现图片的完全的垂直居中：

容器设置 line-height: 某个大于图片高度的值; font-size: 0; 图片设置：vertical-align:middle;

vertical-align: text-top;

inline盒子的顶部和父级 content area 的顶部对齐。(一定要注意：是父级的font-size的大小的content area区域！)

vertical-align: text-bottom;

inline盒子的底部和父级 content area 的底部对齐。(与行高没有任何关系，至于父级的font-size有关)

text-top、text-bottom的作用：

用于定位固定大小的图标，以避免其受到行高或其他内联元素的影响

vertical-align: super

提高盒子(本内联盒子)的基线到父级合适的上标基线位置

vertical-align: sub

降低盒子的基线到父级合适的下标基线位置

相邻元素不同的vertical-align的行为表现：

关于 top 和 bottom：

对方可能受到高度最大的元素的影响，但并没有直接的影响，你对齐底部，我对齐顶部，互不干扰，没有关联

关于 text-top 和 text-bottom：

对方受到父级元素font-size大小的影响，相互之间并没有关联，请参照 vertical-align: text-top/text-bottom; 的讲解

如何使带有文字内容的容器的图片完全垂直居中：

把文字放置到一个span标签中，img 和 span 都设置 vertical-align: middle; 而父元素设置一个大于图片高度的line-height即可

text-bottom与baseline：

一个inline元素设置了 vertical-align: text-bottom; 后，它所对齐的content-area的底部是inline-box的content-area的底部

不要被另外设置了 vertical-align 的其他的inline元素影响了你对第一个inline元素的位置的判断！因为inline-box可能暂时是空的

但其所占的空间确实存在！

vertical-align到底如何影响元素：

切记，它只与当前元素和父级元素有关。与前后其他内联元素无任何关系！(不要被元素的相邻元素干扰对vertical-align的理解)

实现小图标与文字的居中对齐：

为小图标设置一个合适的 vertical-align 负值即可(兼容性较好)

如何实现一张图片自适应垂直居中

html,body{ height: 100%; }

p{ height: 100%; }

img{ vertical-align: middle; }

i{ display: inline-block; height: 100%; vertical-align: middle; }

如何实现多行文字自适应垂直居中

很多标签或文字内容

html,body{ height: 100%; }

p{ height: 100%; }

span{ display: inline-block; vertical-align: middle; }

i{ display: inline-block; height: 100%; vertical-align: middle; }

《深入理解line-height》

line-height，行高，两行文字基线之间的距离

基线：请参考小学英语作业本的书写线条，倒数第二条(红色的那条)就是基线

为啥是基线：因为基线是顶线、中线、底线定义的根本(另外，不同的语言、字体，基线也是不一样的)

所有内联元素的样式表现都与行内框盒子模型有关！

行内框盒子模型：

1、“内容区域”(content area)，是一种围绕着文字却看不见的盒子。“内容区域”的大小与font-size有关。

(查看方式：选中一段文字时所看见的背景颜色区域便是该段文字的内容区域)

2、“内联盒子”(inline boxes)，“内联盒子”不会让内容成块显示，而是排成一行。如果外部含inline水平的标签(span、a、em等)，则属于“内联盒子”。

“匿名内联盒子”，如果外部是个光秃秃的文字(没有span、a、em等包裹)，则属于“匿名内联盒子”。

3、“行框盒子”(line boxes)，每一行就是一个“行框盒子”，每个“行框盒子”又是由一个一个“内联盒子”组成。

4、“包含盒子”(containing box)，block水平标签，此盒子由一行一行的“行框盒子”组成。

其中、4包含3，3包含2，2和1关系说不清。

内联元素的高度是由行高决定的。

拥有单行文本的block水平标签为啥其高度等于行高：

1、行高由于其继承性，影响无处不在，即使单行文本也不例外；

2、行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。

内容区域高度(content area) + 行间距(vertical spacing) = 行高(line-height)

内容区域的特性：

1、内容区域高度只与字号(font-size)以及字体(font-family)有关，与line-height没有任何关系。

2、在宋体字体下，内容区域高度等于字体大小值。(此时 font-size + 行间距 = line-height)

行间距：是上下均分的。行半间距 = (行度 - 内容区域高度)/2

总结：

1、行高决定内联盒子高度；

2、行间距墙头草，可大可小(甚至负值)，保证高度正好等同于行高。

多行文本的高度就是单行文本高度的累加。

如果行框盒子里面有多个不同行高的内联盒子，通常情况下，行框盒子的高度等于最高的那个内联盒子的高度(如果该内联盒子使用了vertical-align等属性，则不成立)

line-height支持属性：

1、normal：与元素字体、用户的浏览器相关联(具有不确定性)。

2、：例如 1.5 ，根据当前元素的font-size大小进行计算。

3、：例如 1.5em、1.5rem、20px、20pt ，使用具体长度作为行高值。

4、：例如 150% ，相对于设置了该元素的font-size大小进行计算。

5、inherit ，行高继承。(IE8+)

行高默认有继承性，但在 input 等元素下元素的默认行高是normal，使用inherit可让文本框样式可控性更强。

那么， 1.5 1.5em 150% 的区别是什么？

计算无差别！差别在于子元素如果不声明line-height时：

1.5 是所有可继承元素根据font-size重计算行高的。(子元素会根据 1.5 进行重计算)

150%、1.5em 是根据当前元素根据font-size计算行高的，会继承给下面的元素。(子元素不会重计算，直接继承父元素的行高)

body全局数值行高使用经验：

body{ font-size: 14px; line-height: 1.4286; }

原因：匹配20像素，方便心算。

line-height = 20px / 14px = 1.42857...

行高与图片实际占据高度的关系：

行高不会影响图片的实际占据高度。

隐匿文本结点：

例如

图片的左边处于 p 标签的中心，说明 p 标签里面有一个隐匿的文本结点

例如

图片与p标签的底边有一段间隙，说明图片的右侧有一个隐匿的文本结点

消除图片底部间隙的方法：

1、图片块状化—— img{ display: block; }

2、图片底部对齐—— img{ vertical-align: bottom; }

3、盒子行高足够小—— .box{ line-height: 0; }

line-height的实际应用：

1、图片的水平垂直居中(IE8+)

.box{ line-height: 300px; text-align: center; }

.box > img{ vertical-align: middle; }

2、多行文本水平垂直居中(IE8+)

.box{ line-height: 250px; text-align: center; }

.box > .text{ display: inline-block; line-height: normal; text-align: left; vertical-align: middle; }

3、代替height，避免IE6/7下的 haslayout

把 height: 36px; 改为 line-height: 36px;(注意，没有必要同时为元素添加相同大小的 height 和 line-height ，height在这里是多余的)

《深入理解overflow》

overflow基本属性值：

1、visible(默认，正常显示超出的内容)

2、hidden(隐藏超出的部分)

3、scroll(直接添加滚动条)

4、auto(不超出容器时，正常显示，一旦超出容器后则显示滚动条)

5、inherit(IE8+)

overflow-x、overflow-y：

如果overflow-x与overflow-y的值相同，则两者加起来等同于overflow

如果它们的值不相同，要是其中一个被设置成hidden或scroll或auto，另外一个被设置为visible，则visible会被重置为auto

如何才能让overflow起作用：

1、元素非 display: inline; 水平

2、元素要有对应方位的尺寸限制。width/height/max-width/max-height/absolute拉伸 等。

overflow: visible;的妙用：

BUG来源：IE7浏览器下，文字越多，按钮两侧padding留白就越大

解决办法：给所有按钮添加CSS样式 overflow: visible; 即可

滚动条出现的条件：

1、天生拥有 overflow: scroll/auto; 属性

2、元素被设置了 overflow: auto; 或 overflow: scroll; 属性，而且内容超出了元素的尺寸限制

滚动条的来源：

无论什么浏览器，默认滚动条均来自 ，而不是

(原因：默认拥有 0.5em 的 margin 值)

JS获取滚动高度

Chrome浏览器：document.body.scrollTop;

其他浏览器是：document.documentElement.scrollTop;

因此，计算公式应为：var st = document.documentElement.scrollTop || document.body.scrollTop;

overflow的padding-bottom缺失现象(非Chrome浏览器)：

危害：会导致不一样的scrollHeight(元素内容高度)

滚动条的宽度机制：

影响：滚动条会占用容器的可用宽度或高度

水平居中跳动问题的修复

1、html{ overflow-y: scroll; }

2、.container{ padding-left: calc(100vw - 100%); }(.container是所有内容的大容器)(IE9+)

100vw：浏览器宽度； 100%：可用内容宽度

Chrome浏览器下自定义滚动条：

::-webkit-scrollbar{ width: 8px; height: 8px; }(滚动条宽度)

::-webkit-scrollbar-thumb{ background-color: rgba(0,0,0,.3); border-radius: 6px; }(滚动条)

::-webkit-scrollbar-track{ background-color: #DDDDDD; border-radius: 6px; }(背景槽)

BFC(Block Formatting Context)块级格式上下文

作用：避免内部元素对外部元素产生影响，例如浮动导致父元素的塌陷、子元素margin穿透问题

能触发BFC的overflow属性：auto、scroll、hidden

内部浮动无影响

.clearfix{ overflow: hidden; _zoom: 1; }

然，通过overflow清除浮动的副作用明显，因此通用的清楚浮动的影响写法如下：

.clearfix{ *zoom: 1; }

.clearfix:after{ content: ''; display: table; clear: both; }

overflow与两栏自适应布局

img.left{ float: left; }

div.right{ overflow: scroll/auto/hidden; }(在这种情况下，div中的内容相对于img.left使用.clearfix无效，这就是BFC化)

因此，使用padding做流体自适应布局时，千万别让自适应BFC化(例如使用overflow: hidden;)

各种BFC属性的特性与表现：

overflow: hidden; 自适应，但“溢出不可见”限制应用场景

float + float 包裹性 + 破坏性，无法自适应，块状浮动布局

position: absolute 脱离文档流，自娱自乐

display: inline-block 包裹性，无法自适应; IE6/7下，block水平无法识别

display: table-cell 包裹性，但天生无溢出特性，绝对宽度也能自适应

实现两栏自适应布局的通用写法：

.cell{

display: table-cell; width: 2000px; //IE8+ BFC特性

*display: inline-block; *width: auto; //IE7- 伪BFC特性

}

overflow与绝对定位

overflow: hidden; 失效：元素设置了 position: absolute;

overflow: auto; 滚动失效：元素设置了 position: absolute;

绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。

(包含块指“含position:relative/absolute/fixed;声明的父级元素，没有则上溯到body元素”)

如何避免overflow失效：

1、overflow元素自身为包含块；

2、overflow元素的子元素(该子元素为绝对定位元素的父级)为包含块；

3、任意合法transform声明当作包含块。

overflow元素自身transform(IE9+/FireFox支持，其余浏览器均不支持)

overflow元素的子元素transform(IE9+的所有浏览器均支持)

overflow失效的妙用：实现元素的右侧自适应固定定位

 

.father{ height: 0; overflow: hidden; text-align: right; } .child{ position: absolute; }

依赖于overflow的样式表现

resize: both/horizontal/vertical;(此声明起作用的前提：元素的overflow属性值不能是visible)

resize拖拽区域的大小是 17px * 17px (也就是滚动条的尺寸)

text-overflow: ellipsis; ellipsis文字溢出...省略(此声明起作用的前提：元素设置了overflow:hidden;)

overflow与锚点技术

锚点定位的条件

1、容器可滚动(overflow不能为visible)

2、锚点元素在容器内

锚点定位的本质

改变容器的滚动高度

锚点定位的触发

1、url地址中的锚链与锚点元素；

2、可focus的锚点元素处于focus态。(请参考表单元素的tab跳转)

使用场景

单页面应用的选项卡技术

《深入理解absolute》

absolute与float的兄弟关系：

1、都具有包裹性(父元素应用绝对定位后，父元素的宽度会收缩，但保持包裹住子元素的状态)

2、都具有破坏性(子元素应用绝对定位后，父元素的高度会塌陷)

absolute与relative：

当子元素只是浮动到父元素的左上角(left:0; top:0;)处时，父元素不必设置 position: relative; ，子元素直接设置 position: absolute; 就可以了

无依赖的absolute定位：

不受relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值(即只是悬浮在原来位置的z轴的上方)

位置跟随

如果元素是block水平的，当应用了absolute绝对定位后，依然是换行显示的。(即前面的文字不会被挡住。IE8+支持，IE7的修复办法：在绝对定位外面套一层空div即可)

如果元素是inline/inline-block水平的，当应用了absolute绝对定位后，依然保持在前面文字的后面

(另外，在Chrome浏览器下，当元素设置了absolute定位后，再改变元素的display属性为inline/block时，页面不会重新渲染)

图标定位(无依赖绝对定位)

链接 .icon{ position: absolute; margin-top: -10px; background: url(...); height: 10px; width: 10px; }

.tip{ position: absolute; width: 10px; height: 10px; margin-left: -10px; background: url(...); }

应用的原理：位置跟随。

关键点：“链接”或“”与之间不能存在空格或换行

下拉框定位(无依赖绝对定位)

• 1
• 2

搜索

input,a{ height: 30px; }

.slide-down{ position: absolute; margin-top: 30px; }

实现绝对定位的图片的水平居中(并非最佳实践)

 

div{ text-align: center; height: 0; overflow: hidden; }

img{ position: absolute; width: 30px; margin-left: -15px; }

实现右侧固定的链接

 

1> 2> 3>

.fixed-father{ height: 0; text-align: right; } .fixed-children{ display: inline; position: fixed; margin-left: 20px; }

应用的原理：位置跟随。

*号提示的absolute化

*提示文字

.star{ position: absolute; margin-left: -1em; color: #FF0000; }

提示文字与小图标对齐

提示的文字

.tip{ position: absolute; line-height: 21px; } .icon{ position: absolute; margin-left: -20px; width: 20px; height: 21px; display: inline-block; }

优点：该提示在input框后面时，即使超出body的宽度，也不会换行。即保证内容在一行上显示。

回流与重绘

原则：动画尽量作用在绝对定位元素上！

z-index无依赖

1、如果只有一个绝对定位元素，自然不需要z-index，自动覆盖普通元素；

2、如果两个绝对定位，控制DOM流的前后顺序达到需要的覆盖效果(遵循后来居上原则)，依然无z-index；

3、如果多个绝对定位交错，利用 z-index: 1; 控制；

4、如果非弹框类的绝对定位元素 z-index > 2 ，必定z-index冗余，请优化。

left/right/top/bottom与width/height的相互替代性(IE7+)

例如

position: absolute; left: 0; top: 0; width: 50%;

position: absolute; left: 0; top: 0; right: 50%;

又例如

position: absolute; left: 0; right: 200px;

position: absolute; left: 0; width: calc(100% - 200px); (calc是CSS3的特性，只有现代浏览器才支持)

通常情况下

元素的百分比height要想其起作用，需要父级容器的height值不为auto

绝对定位拉伸下

即使父级元素的height值是auto，只要容器绝对定位拉伸形成，百分比高度值也是支持的

例如：.page{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .list{ float: left; height: 33.3%; width: 33.3%; position: relative; }

left/right/top/bottom与width/height的相互合作性

width/height设置的尺寸 要优先于 left/right/top/bottom拉伸的尺寸

当遭遇到 margin: auto; 时，两者的合作性即可得到体现：(IE8+)

实现盒子的水平垂直居中： .box{ position: absolute; left: 0; right: 0; top: 0; right: 0; width: 50%; height: 50%; margin: auto; }

absolute与整体布局

1、body降级，子元素升级

html,body{ height: 100%; }

.page{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

2、在 .page 里面，各模块(含头、尾、侧边栏)各居其位

header,footer{ position: absolute; left: 0; right: 0; }

header{ height: 48px; top: 0; }

footer{ height: 52px; bottom: 0; }

aside{ width: 250px; position: absolute; left: 0; top: 0; bottom: 0; }

.content{ position: absolute; top: 48px; bottom: 52px; left: 250px; overflow: auto; }

《深入理解float》

float的设计初衷：

仅仅是为了实现文字环绕效果

float的感性认知：

包裹性：

1、收缩：元素应用了float后，宽度收缩，紧紧地包裹住内容(即元素的宽度收缩到元素内的内容的宽度大小)

2、坚挺：原来没有高度，但元素应用了float后，元素的高度突然扩展到内容的高度大小

3、隔绝：元素应用了float后，盒子里面的内容发生了任何事情，都与盒子外的内容无关(BFC)

破坏性：

1、子元素应用了float后，父容器塌陷：父容器的高度变为0

具有包裹性(BFC特性)的其他属性：

display: inline-block/table-cell

position: absolute/fixed/sticky

overflow: hidden/scroll

具有破坏性的其他属性：

display: none

position: absolute/fixed/sticky

清除float对其他元素所带来的影响：

1、float元素底部插入一个带有 clear: both; 属性的元素

1、底部放置一个HTML block水平元素 -

2、CSS after(IE8+)伪元素底部生成 - .clearfix:after{ clear: both; }

2、父元素BFC化(IE8+)或 haslayout(IE6/7)

BFC/haslayout的通常声明

1、float: left/right

2、position: absolute/fixed

3、overflow: hidden/scroll(IE7+)

4、display: inline-block/table-cell(IE8+)

5、width/height/zoom: 1/...(IE6/7)

综上，IE8以上浏览器使用：.clearfix:after{ content: ''; display: block; height: 0; overflow: hidden; clear: both; }

.clearfix{ *zoom: 1; }

更好的方法：

.clearfix:after{ content: ''; display: table; clear: both; }

.clearfix{ *zoom: 1; }

切记，.clearfix 只需应用在浮动元素的父级元素上

浮动的特性：

1、元素block块状化(砖头化)

2、破坏性造成的紧密排列特性(去空格化)

智能化自适应布局：

很多其他内容

.container{ width: 600px; margin: auto; }

.left{ float: left; margin-right: 20px; }

.right{ display: table-cell; *display: inline-block; width: 2000px; *width: auto; }