HTML/CSS一些知识点

收集了一些关于HTML/css的点，很杂。

关于HTML、CSS

BFC
讲解链接

生成规则

根元素；

float的值不为none；

overflow的值不为visible；

display的值为inline-block、table-cell、table-caption；

position的值为absolute或fixed；

text-rendering

text-rendering CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。

该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox）和 Webkit（Chrome、Safari）内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。

/* Keyword values */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
/* Global values */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;

auto
浏览器依照某些根据去推测在绘制文本时，何时该优化速度，易读性或者几何精度。对于该值在不同浏览器中解释的差异，请看兼容性表。
optimizeSpeed
浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度. 它会使字间距和连字无效。
optimizeLegibility
浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度.它会使字间距和连字有效。该属性值在移动设备上会造成比较明显的性能问题，详细查看 text-rendering。
geometricPrecision
浏览器在绘制文本时将着重考虑几何精度，而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放，所以该值可以使使用某些字体的文本看起来不错。

对于 SVG，当文本缩放时，浏览器会计算文本最终大小（取决于特定的字体大小和相应的缩放比例）并且从操作平台的字体系统中请求一个符合该计算值的字体大小。但如果你请求一个字体大小，比如 9 并且 140% 的缩放，这个最终的字体大小为 12.6，字体系统中明显不存在，所以浏览器会向下取整到 12。这导致文本缩放是阶梯式的。

但这个 geometricPrecision 特性——当被渲染引擎完全支持时——会使文本缩放是流畅的。对于大比例的缩放，你可能看到并不太漂亮的文本渲染，但这个字体大小是你期望的，而不是被 Windows 或 Linux 系统四舍五入或向下取整的字体大小。

CSS选择器

Css选择器会增加浏览器匹配选择器和文档元素时所消耗的时间,应尽量避免使用消耗更多匹配时间的选择器。

数量等于NUM
X:nth-last-child(NUM):first-child,
X:nth-last-child(NUM):first-child~X
数量大于或等于NUM
X:nth-last-child(n+NUM),
X:nth-last-child(n+NUM)~X
数量小于或等于NUM
X:nth-last-child(-n+NUM):first-child,
X:nth-last-child(-n+NUM):first-child~X
数大于等于NUM小于等于M
X:nth-last-child(n+NUM):nth-last-child(-n+M):first-child,
X:nth-last-child(n+NUM):nth-last-child(-n+M):first-child~X

另附上Css选择器从高到低的一个排序：

1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel=”external”]）
9.伪类选择器（a:hover, li:nth-child）

移动web页面使用字体

ios 系统

默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体

android 系统

默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体

winphone 系统

默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体

结论

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持
特殊场合需要的字体可用字蛛进行生成
1
body{font-family:Helvetica;}

css不会出现死循环

张鑫旭为我们深刻的解释了其中的奥妙。
文章链接如下：
从height:100%不支持聊聊CSS中的“死循环”

CSS锯齿

<style type="text/css">
.toothbg{width:100%;height:20px;background:#41B61A;
    background-image:-webkit-gradient(linear,50% 0,0 100%,from(transparent), color-stop(.5,transparent),color-stop(.5,#e5e5e5),to(#e5e5e5)),
                    -webkit-gradient(linear,50% 0,100% 100%,from(transparent), color-stop(.5,transparent),color-stop(.5,#e5e5e5),to(#e5e5e5));
    background-image:-moz-linear-gradient(50% 0 -45deg,transparent,transparent 50%,#e5e5e5 50%,#e5e5e5),
                    -moz-linear-gradient(50% 0 -135deg,transparent,transparent 50%,#e5e5e5 50%,#e5e5e5);                               
    background-size:30px 15px;
    background-repeat:repeat-x;
    background-position:0 100%;                   
}
</style>
<body>
    <div class="toothbg"></div>
</body>

兼容IE7 8 9的背景遮罩

1
2
3

<div class="demo">
    <p>背景透明，文字不透明</p>
</div>

.demo{
  padding: 25px;
  background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
.demo p{
  color: #FFFFFF;
}
@media \0screen\,screen\9 {/* hack,只支持IE6、7、8 */
  .demo{
    background-color:#000000;
    filter:Alpha(opacity=50);
    position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
    *zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
  }
  .demo p{
    position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
  }  
}