css 实践记录

子绝父相

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>

 子类选择器

:nth-child 和 :first-child 等只能作用在元素选择器上，如

 不需要flex的stick footer

  <div id="box">
      <div id="up">1</div>
      <div id="down">2</div>
  </div>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#box{
  position: absolute;
  height: 100%;
  width: 100%;
}

#up{
  padding-bottom: 200px;
  height: 100%;
  background: green;
}

#down{
  margin-top: -200px;
  background: gray;
  height: 200px;
}

以上border box 一句很重要。