OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

HTML和CSS是什么玩意儿?


分享到
分类 心得体会   关键字 Html5   发布 andrewleeson  1395857389000
注意 转载须保留原文链接,译文链接,作者译者等信息。  
HTML和CSS的一些东西会让你忍不住说“这TM是什么玩意儿!”。以下是困惑、失策和困境这些困扰着HTML和CSS问题清单:
• Dottype的声明
• Box Model的计算问题
• Rem单位和Mobile Safari
• 浮动(float)排在第一
• 浮动(float)和清除浮动(clear)
• 浮动和计算高度
• 浮动元素是块级元素
• 垂直相邻margin的倒塌
• 设计表单的行
• Firefox和<input>按钮
• Firefox按钮的内部轮廓
• 始终在<button>上设置type
• IE浏览器选择器的限制
• 位置解释
• 位置和宽度
• 定位与转换

Doctype的声明

总要有dottype声明。我建议用html5中简单的dottype声明方式

<!DOCTYPE html>

不声明dottype会导致畸形的表单、输入框和其它的一些问题;且会让页面在quirk mode下显示。

Box Model的计算问题

当元素定义了padding 和border-width中的1个或2个后,你设置的width 值会变得比实际的大。为了避免这个问题的发生,现在就用box-sizing: border-box;这种通过的方法来重新设置。

Rem单位和Mobile Safari

虽然Mobile Safari支持使用rem的所有属性值时。但当rem被用在维媒体查询和以不同大小无限闪烁页面的文本时,它就不行了。

就这种情况而言,目前还是用em来代替rem吧。

html {
  font-size: 16px;
}

/* Causes flashing bug in Mobile Safari */
@media (min-width: 40rem) {
  html {
    font-size: 20px;
  }
}

/* Works great in Mobile Safari */
@media (min-width: 40em) {
  html {
    font-size: 20px;
  }
}

求助!如果你有苹果或WebKit关于这方面的错误报告,我很乐意将它放到本文中。由于它只适用于移动应用,不适用于桌面程序,Safari浏览器(非Mobile Safari),我不确定在哪里会报告这个错误。

浮动(float)排在第一

在文档顺序中,浮动的元素应该总是放在第一。浮动的元素需要一些东西来环绕,否则其顺序会下降,在内容之下显示。

<div class="parent">
  <div class="float">Float</div>
  <div class="content">
    <!-- ... -->
  </div>
</div>

浮动(float)和清除浮动(clear)

如果你使用浮动,很可能你需要使用清除浮动。任何跟着浮动元素的内容均会环绕着浮动元素,除非使用清除浮动。你可以使用以下的方法来清除浮动。

micro clearfix方法通过使用单独的类来清除浮动

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

或者,在parent中用auto 或 hidden 来指定overflow。

.parent {
  overflow: auto; /* clearfix */
}
.other-parent {
  overflow: hidden; /* clearfix */
}

考虑到overflow可能会产生意想不到的副作用,在parent中将其以特别的方式标注在定位元素旁。

专业意见!当清除浮动由于其它原因能作为属性使用时,通过像/* clearfix */ 这样的注释能让你把握自己的未来,且能让你的同事高兴。

浮动和计算高度

一个只有浮动内容的父元素将有一个计算的高度值height: 0;。给父元素加clearfix,强制浏览器计算一个高度值。

浮动元素是块级元素

用了float的元素会自动地变成display: block;没有必要两个属性都设置,因为float会覆盖你的display
.element {
  float: left;
  display: block; /* Not necessary */
}

有趣的事实:几年前,我们必须要设置display: inline;,让大多数的浮动元素能够兼容IE6,避免双倍margin值的bug,。不管怎样,那些日子早已过去了。

垂直相邻margin的倒塌

相邻元素(一个接一个地)的顶部和底部的margin可能会在很多情况下倒塌,但对于浮动元素或绝对定位的元素绝不会出现这样的情况。阅读这篇MDN文章或CSS2规范里的collapsing margin章节来了解更多东西吧。

水平相邻的margin永远不会倒塌。

设计表单的行

表单的行,<tr>,不要接收border,除非你在父<table>上设置了 border-collapse: collapse;。此外,如果<tr>和子<td>或<th>有同样的border-width,表单行的border将不起作用。点链接查看示例

Firefox和<input>按钮

由于一些未知原因,Firefox能提交line-height和适用不能被自定义CSS覆盖的<input>按钮。

你可以通过以下两种方法解决这个问题:

1.       坚持使用<button>元素

2.       在你的按钮中不要使用line-height

你应该先用第一种方法(不管怎样,我都建议用这种方法,因为<button>元素很好),以下是你需要知道的:

<!-- Not so good -->
<input type="submit" value="Save changes">
<input type="button" value="Cancel">

<!-- Super good everywhere -->
<button type="submit">Save changes</button>
<button type="button">Cancel</button>

如果你想要用第二种方法的话,只要不设置line-height且只使用padding垂直对齐按钮文本就行了。用firefox浏览器打开链接来看看原始的问题和解决方案。

好消息!这个问题在Firefox30中似乎被解决了。对于我们以后的使用来说这是个好消息。但值得注意的是这个问题仅在新版本中得到解决,旧版本的问题并未得到解决。

Firefox按钮的内部轮廓

Firefox用:focus给按钮(<input>和<button>)增加了一个内部轮廓。显然,这是为了其可访问性做的,不过它的位置似乎相当怪异。用以下这段CSS来覆盖它:
input::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

你可以通过前一章节提到的例子中查看这个解决方案

专业意见!一定要在按钮、链接和输入元素中包含一些焦点状态。提供可访问功能是至关重要的,对于用tab键来选择内容的专业用户亦是如此。

始终在<button>上设置type

默认值是submit,意味着表单内的button都可以提交表单。所有type=”button”的元素匀不会提交表单,type=”submit”的元素则会提交表单。
<button type="submit">Save changes</button>
<button type="button">Cancel</button>

在应用中,如果在表单外使用button就使用type=”button”。

<button class="dismiss" type="button">x</button>

有趣的事实:显然IE7不能很好的支持button的value属性。如果不看属性内容的话,innerHtml(<button>标签之间的内容)可以弥补这个问题。然而,由于IE7的使用率已经下降和给<button>设置value及innerHtml似乎极少见这两个原因让我觉得这并不是一个很值得关注的问题。

IE浏览器选择器的限制

IE9及更早版本的IE浏览器每个样式表中只支持4096个选择器。组合样式表和每个页面中包含<style></style>的数量也受到了限制,最大只能31。在这个限制之后做的任何东西都会被浏览器给忽略掉。分割CSS,或者开始重构。我建议后者

作为一个有用的边注,下面是浏览器计算选择器的方法:

/* One selector */
.element { }

/* Two more selectors */
.element,
.other-element { }

/* Three more selectors */
input[type="text"],
.form-control,
.form-group > input { }

位置解释

设置了position:fixed;的元素被放置在与浏览器窗口有关的地方。设置了position:absolute;的元素被放置在离与static(例如,relative,absolute,fixed)不同位置的父元素最近的地方。

位置和宽度

不要给已经设置了position:[absolute|fixed];,left,right的元素设置width:100%。使用width:100%与使用left:0,right::0效果是一样的。选择使用其中一种,但别两种都用。

定位与转换

如果父元素设置了transform,那么position:fixed将不起作用。用transform创建一个新的包含块,有效的强制父元素设置position:relative且固定元素的作用与position:absolute.一样。

 

查看Demo和阅读Eric Meyer's post on the matter

原文地址: 点此
社区评论 ( Beta版 )
  • #0 teaware 1395997119000
    Dottype 应该是 Doctype
  • #1 米珠薪桂 1396061860000
    发表的东西一样要检查过没有错别的地方哦!
  • #2 WhisperPanda 1396430434000
    垂直相邻margin的倒塌 这个应该是外边距的重合(折叠)吧...
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. JSON为王,为什么XML会慢慢淡出人们的视野
  2. 为什么你写的Python运行的那么慢呢?
  3. NODE.JS为什么会成为企业中的首选技术
  4. 快乐Node程序员的10个习惯
  5. 用纯CSS实现的箭头
  6. 什么是最好的编程语言?(怎样才能爱上编程呢?)
  7. 该不该闭合这些元素?曾经〈br/〉的写法是错误的
  8. 如何雇佣杰出的外包程序员
  9. 为什么优秀的管理者如此罕见
  10. 没必要害怕Angular.Js
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. NODE.JS为什么会成为企业中的首选技术
  2. 我们由 icon-font 转向 SVG 的10 个理由
  3. Linux死机了,你会怎么办?
  4. 没必要害怕Angular.Js
  5. 如何雇佣杰出的外包程序员
  6. 使用简单的JavaScript,我们为什么应该抵制ES6的一些特性
  7. 我们抛弃了AngularJS:单页面应用的5大缺陷
  8. JavaScript的模块加载可能有害
  9. 为什么使用"use strict"可以节约你的时间
  10. LESS vs Sass?是时侯选择Sass了

 关键字 - Html5
  1. 用纯CSS实现的箭头
  2. 让Select选择框可编辑可输入可自动补全可下拉选择
  3. HTML5的TCP和UDP Web Socket API草案定稿
  4. 传统广告与H5广告的差别在哪里?
  5. WeMall微信商城源码插件代金券部分代码
  6. WeMall微信商城源码插件会员卡代码详情
  7. WeMall微信商城源码插件大转盘代码详情
  8. 你应该使用HTML5的header和footer标签吗?
  9. 5个实用Web界面设计工具 | 附开发案例
  10. 从PDF转换到HTML5的三种方法,你用过吗?

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号