标签：定位 输入 relative 第一个 flow 行高 block mozilla 使用
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>
运行结果：
1
2
3
4
line-height:1
使用opacity的话会导致容器以及内容都透明，使用rgba可以实现容器透明，但内容不透明
<style>
.container{
background-color: rgba(99,99,99,0.5);
}
</style>
<div class="container">
123131
</div>
标签：定位 输入 relative 第一个 flow 行高 block mozilla 使用
原文地址：http://www.cnblogs.com/hellohello/p/7954221.html
