css技巧总结（一）

1、定位的同时设置方位情况

说明: 绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度

可以利用该规律进行响应式布局

.left{
    position: absolute;
    left: 0;
    right: 80%;
    top: 0;
    bottom: 0;
    background: green;
}
.right{
    position: absolute;
    left: 20%;
    right: 0;
    top: 0;
    bottom: 0;
    background: yellow;
}

<span class='right'>1</span>
<span class='left'>2</span>

2、相邻兄弟选择器之常用场景 

在列表制作的时候，常常会遇到第一个或者最后一个的边框与父级重叠，导致样式不协调，这个时候就可以使用该方法进行处理

*{
    padding: 0;
}
ul{
    border: 1px solid red;
    list-style-type: none;
}
ul>li+li{
    border-top: 1px solid red;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

3、隐藏文本的常用两种方法

text-indent: -9999px; 或者 font-size: 0; （一般来讲这种情况logo会写成背景图片的情况）

.logo {
    width: 190px;
    height: 80px;
    float: left;
    margin-top: 8px
}
.logo h1 {
    position: relative
}

.logo h1 .logo-bd {
 display: block;
 margin-left: 22px;
 padding-top: 58px;
 width: 142px;
 overflow: hidden;
 background: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) 0 0 no-repeat;
 text-indent: -9999px;
}

<div class="logo">
<h1>
    <a href="#" role="img" class="logo-bd clearfix">淘宝⽹</a>
</h1>
</div>

 4、outline的属性妙用

特点： outline在文档流中是不计算大小，但是border是需要计算大小的

*{
    padding: 0;
    margin: 0;
}
ul{
    width: 500px;
    margin: auto;
    list-style-type: none;
}
li{
    border: 5px solid red;
    padding: 5px;
    outline-offset: -5px;        //注意这个属性的使用，对外框进行偏移,但是这个属性是有兼容性问题
}
ul>li+li{
    margin-top: -5px;        //与上面的不一样之处在于这个是去调整margin-top
}
ul>li:hover{
    /*border: 2px solid blue;*/
    outline: 5px solid blue;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>    

 5、横向滚动，容器随着内容变大而不换行

*{
    margin: 0;
    padding: 0;
}
.container{
    background: #999;
    width: 200px;
    margin: 100px auto;
    overflow-x: auto;
    overflow-y: hidden;
}
.wrap{
    white-space: nowrap;
    padding: 0 10px;
}
.item{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: blue;
    margin-right: 10px;
}

<div class='container'>
    <div class="wrap">
        <div class='item'>1</div>
        <div class='item'>2</div>
        <div class='item'>3</div>
        <div class='item'>4</div>
        <div class='item'>5</div>
        <div class='item'>6</div>
    </div>
</div>