about

HTML5 与 CSS3 自认为基础已经娴熟，但还是有很多 tricky 点不了解。特开贴记录。

HTML5

dl 标签

表格标签，从未使用过。类似于 table，但还有所不同。仅使用键值对的表格。


<dl>
<dt>Age</dt>
<dd>29</dd>
<dt>Location</dt>
<dd>Auckland</dd>
<dt>Email</dt>
<dd>tommywhy1989@gmail.com</dd>
</dl>

标签高度

尽量把确定的宽高写在标签属性上，以减少元素重排浪费内存。小优化。

属性

属性一定要看好，不要有空格，不然js取到的值是 undefined

CSS3

border

浮动时可以将 border 算入百分比中。
1
2
3
{box-sizing: border-box; 
width:50%;
float:left;}

inline-block

当使用inline-block后，会在底部多出几像素的空白。两句配合可应付处女座级别的客户需求。
1
2
{display: inline-block;
vertical-align: top;}

css 选择器

多类选择器：无空格。即 section 的同时是 .skills
1
section.skills > h2{}

后代选择器：有空格。即 userCard 下面找 text 找 summary
1
.userCard .text .summary h1

子类中个别偶数选择。
1
section.skills > ol > li:nth-child(even){}

属性选择器,

1	[data-x]{transform: translateY(0);transition: all .4s;}

ps: css只负责动画效果，js 只负责找DOM元素
利用 js 控制 .active 的添加与删除实现动画。
1
2
.topNavBar nav li.active > a::after ,
.topNavBar nav li.highlight > a::after{}

css 阴影

实用工具=>阴影生成器
https://www.cssmatic.com/box-shadow

css 伪类

before after 用的很少。其实做很多，不过容易给他人阅读造成困扰。
太极图
http://tommywhy.com/effects/yinYang.html

占位

做登录验证的时候有个小需求，就是在input 后面输出错误信息。
登录框宽度不定的情况下使用伪类占位，验证信息直接填充在 content 中。

.container .formControl>.error:after {
            display: inline-block;
            content: attr(text-content-after);
            width: 10em;
        }

html 的 text-content-after 可以获取到伪类的 content 值

1	<span class="error" text-content-after='''></span>

再用 js 将错误信息填充到 text-content-after 中。

1	$form.find('[name = "email"]').siblings('.error').attr("text-content-after", 'email error~！')

这样就实现了伪类提示错误信息。避免html结构复杂化。真香~！