子绝父相
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
利用子绝父相来实现一种比较老的居中方式：1.明确宽度；2.定位左边到容器的中间位置；3.margin-left负值来左移元素的一半，实现元素容器居中
<style> ???.container{ ???????position: relative; ???} ???.item{ ???????position: absolute; ???????background-color: #0F9E5E; ???????display: inline-block; ???????width: 90px; ???????left: 50%; ???????margin-left: -45px; ???????height: 10px; ???}</style><div class="container"> ???<div class="item"></div></div>小三角
思路很简单，就是输入法输入一个菱形，然后隐藏掉一半就行了。
<style rel="stylesheet"> ???.tri:before{ ???????content: ‘◇‘; ???????line-height: 1; ???????font-size: 30px; ???????display: inline-block; ???????height: 15px; ???????overflow: hidden; ???}</style><span class="tri"></span>+ 和 ~ 选择器
div+p：选择紧接在 <div> 元素之后的 一个 <p> 元素。
p~ul：选择 <p> 元素后的 所有 <ul> 元素。
应用场景：选中第一个以为的所有元素。以下两种方式都可以实现
<style> ???/*.item ~ .item*/ ???.item + .item{ ?????????color: red; ???}</style><div class="item first">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div>运行结果：
1234
行高和字体大小一致
line-height:1
容器半透明，内容不透明
使用opacity的话会导致容器以及内容都透明，使用rgba可以实现容器透明，但内容不透明
<style> ???.container{ ???????background-color: rgba(99,99,99,0.5); ???}</style><div class="container"> ???123131</div>css 实践记录
原文地址：http://www.cnblogs.com/hellohello/p/7954221.html