css 小常识

一、vertical-align可以采用负值（正/负值根据基线上下移动），也可以采用百分比值，而这个百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

此外，width,height,font-size的百分比是相当于父元素的相同属性的值来计算的；

line-height的百分比值是根据父元素的font-size来计算的；

二、浏览器标题栏小图标：

<link rel="shortcut icon" href="图片位置" type="image/x-icon"/>

三、首行缩进使用text-indent：2em。

四、我们知道默认浏览器默认字体大小是16px，通过body{font-size：62.5%}，我们将默认字体变为62.5%*16px=10px;这时候1em刚好等10px。

统一使用em作为单位就很简单了。

五、css具有继承性。

（1）文本相关属性：font-*{family、size、style、weight}；line-heigh；text-align；text-indent；word-spacing。

（2）颜色：color。

（3）列表属性：list-style-{image、position、type}。

六、外边距叠加。

这里指的是垂直外边距叠加（margin-top;margin-bottom）。水平外边距不会叠加。

外边距叠加之后外边距高度等于发生叠加之前的二个外边距中的最大值。外边距叠加针对的是block以及inline-块元素，不包括inline元素。

七、用边框border创建三角形：

 

 div{border: 20px solid;
	 border-color: red transparent transparent transparent;
	 height: 0;
	 width: 0;
	 }	 

八、inline元素和inline-block元素的vertical-align是针对周围的元素来说的；table-cell元素的vertical-align属性是针对自身。

九、当表单元素与标签不对齐时，可以调整vertical-align属性的值，正常为vertical-align：-3px(表示元素相对于基线向下偏移3px)。

十、单行文字居中：

对于单行文字，我们可以设置父元素行高（line-height）和高（height）相等就可以实现文字垂直居中。加上text-align:center可以实现完全居中。

十一、多行文字居中：

父元素高度固定，我们可以可以采用下面的方法:

 

父元素{
display: table-cell;vertical-align: middle;
}

　

十二、z-index只对position值为static之外的值有效（absolute、relative、fixed）

十三、页面顶部阴影

body::before{
content:"";
position:fixed;
top:-10px;left:0;
width:100%;height:10px;
box-shadow:0 0 10px red;
z-index:200;}

 十四、禁用文本框缩放功能

textarea{resize:none}

十五、

哪些情况会触发BFC（块级格式化上下文）呢？常见的如下：

• float的值不为none。
• overflow的值为auto,scroll或hidden。
• display的值为table-cell, table-caption,或inline-block。
• position的值不为relative和static。

待续··