这本书讲解了HTML和CSS可能会使你说什么他妈的原因，它例举了一系列通常令人沮丧的HTML和CSS困境，窘境甚至失策的地方。

内容

·

文档类型声明

·

盒数学模型

·

Rem单位和Mobile Safari

·

浮动第一

·

浮动和清除

·

浮动和计算高度

·

块级浮动元素

·

垂直边缘经常崩溃

·

样式表行

·

Firefox和按钮

·

Firefox 按钮内部轮廓

·

总是在中设置类型type

·

IE浏览器的选择器限制

·

位置解释

·

位置和宽度

·

定位和转换

文档类型声明

HTML文件总是包含一个文档类型，我推荐HTML5的简单文档类型：

跳过文档类型会导致畸形的表格,输入框甚至更多,因为页面将会在兼容模式下渲染。

盒子模型(Box Model)

设置了宽度width的页面元素当有填充(padding)和/或者边框宽度(border-width)时会变得更宽。为了避免这些问题,利用现在常见的box-sizing: border-box; reset.

Rem单位和Mobile Safari

Mobile Safari支持在所有属性值中使用rem，当rem用于一维媒体查询时是不成熟的，它会导致在不同的页面大小中不停地闪烁文本。

现在，用em代替rem.html {

font-size: 16px;

}

/* 在Mobile Safari中会引起闪烁 */

@media (min-width: 40rem) {

html {

font-size: 20px;

}

}

/* 在 Mobile Safari 中表现很棒*/

@media (min-width: 40em) {

html {

font-size: 20px;

}

}

求帮助!如果你有一个链接能够报告这个错误给苹果或WebKit,我想把它报告上去。我不确定去哪里报告只适用于移动,而不适用于桌面的Safari浏览器。

浮动第一

被浮动的元素应该排在文档顺序中的第一位。浮动元素需要环绕,否则他们反而会导致元素往下挪,而不是出现在内容的下面。

浮动和清除

如果你要浮动一个元素,你可能需要清除它的浮动。任何跟随一个浮动元素的内容,将会一直环绕该元素,直到它被清除浮动。要清除浮动,可以使用以下技术之一。

用 .clearfix与一个单独的类清除你的浮动。.clearfix:before,

.clearfix:after {

display: table;

content: "";

}

.clearfix:after {

clear: both;

}

另外一种方法，在父元素上指定overflow的属性为auto或者hidden.parent {

overflow: auto; /* clearfix */

}

.other-parent {

overflow: hidden; /* clearfix */

}

请注意,overflow会导致其他意想不到的副作用,特别是在父元素中定位的元素的四周。

注意！让未来的自己和你的同事开心，当清理浮动而且这个属性可以用于其他的原因，要声明/ * clearfix

* /。

浮动和计算高度

一个父元素只有浮动的内容将有一个计算的高度height:0 ;给父元素添加清除浮动强迫浏览器计算一个高度。

块级浮动元素

浮动元素自动变成display:block;没有必要同时设置两个属性，因为float会覆盖掉你的display属性..element {

float: left;

display: block; /* 不需要 */

}

有趣的事实，几年前，为了IE6中大多数的浮动正常工作，避免将margin的值翻倍，我们得设置display:inline;然而,那些日子早已过去了。

垂直边缘经常崩溃

在很多情况下，相邻元素(一个接一个)的顶部和底部边界会崩溃。但是浮动或者绝对定位的元素不会这样。阅读这篇MDN文章或者CSS2规范 崩溃的边缘部分崩溃的边缘部分去找到更多相关内容。

样式表行

表行，

,不要接受borders属性，除非你在父元素

或者

有相同的border-width,表格行的border将不会被应用。看这个JS本链接为例。 Firefox和按钮 不知道什么原因，Firefox应用line-height属性去提交，而input按钮不能被定制的CSS样式覆盖。有两个选择可以解决这个问题： 1.坚持元素 2.在按钮上不要使用line-height属性 如果你选择第一个方法(而且我推荐这个方法，毕竟是很棒的)，以下是你需要知道的： Save changes Cancel 如果你想选择第二种方法，就不要给垂直对齐按钮的按钮文本设置line-height属性，而只用padding属性。在Firefox中查看这个JS本示例看看它原始的问题和变通方案。 好消息！在Firefox 30中可能会修复这个问题。对未来的我们来说是个好消息，但是我们要意识到它不会修复旧版本的问题。 Firefox按钮内部轮廓 火狐在button(和)的:focus伪类上增加一个内部轮廓。很明显,它是为可访问性设置的，但貌似它的定位很奇怪。用这个CSS样式来覆盖它： input::-moz-focus-inner, button::-moz-focus-inner { padding: 0; border: 0; } 你可以看到这个修复与前一节中提到的JS本示例JS本示例在行动上是相同的。 注意！要确保在buttons,links和inputs上包含相同的focus聚焦状态, 为了给通过内容标记的专业用户和有视力障碍的用户提供一个功能可见的访问性是至关重要的。 总是在中设置类型 元素的默认类型是submit,这意味着表单中的任何按钮都会提交这个表单。不提交表单的时候用type="button"，提交表单的时候要用type="submit"。 保存修改 取消 当要给按钮设置一个动作但又不在表单中时，使用  type="button" x 有趣的事实:很明显，IE7不是很好的支持上设置的value属性。而不读属性的内容，它从innerHTML(闭合的＜按钮>标签之间的内容)获取按钮的文本而不是从属性的值读取。然而，我不认为这值得很大的关注，原因有两个：IE7的使用率每况日下，在元素上同时设置value属性和innerHTML似乎是相当罕见。 IE浏览器的选择器限制 IE9及其以下版本的浏览器限制每个样式表最多有4096个选择器，也限制了31个复合的样式表和每个页面包含的元素。所有超过这个限制的内容都会被浏览器忽略。是把你的CSS样式表分开还是重构，我建议后者。 作为一个有用的注意点，这里列出了浏览器如何计数选择器个数： /* 一个选择器 */ .element { } /* 两个以上选择器*/ .element, .other-element { } /* 三个以上选择器 */ input[type="text"], .form-control, .form-group > input { } 位置解释 元素被设置为position:fixed;那么它们的位置和浏览器窗口是相对的。被设置了position:absolute;的元素的位置与最接近他们的父元素相对应而不是静态的(例如，相对的，绝对的，或固定)。 位置和宽度 不要在已设置position: [absolute|fixed];，left和right.的元素上设置width：100%;使用width:100%;相当于配合使用left:0;和right:0;使用其中一个或另一个，但不要同时使用。 定位和转换 如果一个元素的父元素设置了transform属性,浏览器就会打破设置的position:fixed;样式。使用转换会创造一个新的控制块，会高效的强迫父元素设置position:relative;而且固定的元素也会以position:absolute;的样式显示。