半透明边框

由于背景色会侵入到边框所在的范围，如果想要半透明的边框，可以使用background-clip属性。这个属性规定背景的绘制区域，其初始值为border-box，如果将属性值设置为padding-box，背景就会被裁剪到内边距框。
HTML代码：

<div class="parent">
    <div class="test">
        this is a test
    </div>
</div>

在CSS Secret中提到了弹性布局，这里就简单写了四个实例来回顾下弹性布局

居中

可以利用flex，让子容器在父容器中居中。设置父容器display属性为flex，并设置子容器margin属性为auto即可。
HTML代码：

<div class="parent">
        <div class="child">
            child
        </div>
</div>

CSS代码：

.parent,.child{
    border:1px solid #333;
}
.parent{
    display: flex;
    height: 300px;
}
.child{
    width: 100px;
    height: 100px;
    margin: auto;
}

这里主要记录下DOM基于CSS选择符和HTML5的一些扩展。

基于CSS选择符的扩展

有时候需要通过 CSS 选择符查询 DOM 文档取得元素的引用，可以使用以下两种方法：

• querySelector()

  <div id="header">this is header</div>
  <p></p>
  <div class="footer">this is footer</div>
  <script type="text/javascript">
  console.log(document.querySelector("#header").firstChild.nodeValue);
  var text = document.createTextNode("this is a paragraph.");
  document.querySelector("p").appendChild(text);
  //获取类为footer的第一个元素
  document.body.querySelector(".footer");
  </script>
  

DOM是document object model的缩写，即：文档对象模型。DOM将HTML和XML描述为一个具有层次结构的节点树。DOM作为一个接口，可以对HTML或者XML进行添加，删除和修改。
根据 DOM，HTML 文档中的每个成分都是一个节点。DOM 是这样规定的：

• 整个文档是一个文档节点
• 每个 HTML 标签是一个元素节点
• 包含在 HTML 元素中的文本是文本节点
• 每一个 HTML 属性是一个属性节点
• 注释属于注释节点
  阅读全文 »

不同浏览器之间或者相同浏览器不同版本之间存在着不一致性问题，可以使用客户端检测来解决不一致性带来的兼容问题。

能力检测 (特性检测)

能力检测不是用来识别特定的浏览器，而是识别浏览器的能力。它并不关心用户使用的是什么浏览器，该方法只要确定浏览器支持某种特定的功能，就可以根据该功能提出解决方案。

if(object.someProperty){
    //do something
}