All Articles

Some tip for CSS

Muốn test code html, css thì vào codepen.io

  1. Làm cho 3 div có cùng chiểu cao, thì cần 1 div bên ngoài, bọc 3 div kia

    same-height {  
    display: flex;
    align-items: stretch;
    }
  2. items full-width
item-full-width {    
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;  
    margin-right: 16px;
    padding: 16px;  
    &:last-child {
        margin: 0;
    }
}
  1. relative vs absolute (position) absolute sẽ canh theo tag relative gần nhất chứa nó.

    <div class="card">
    <img src="" class="thumb" alt=""> </img>
    <span class="newest">Newest</span>    
    </div>
    .card {
    width: 400px;
    border: 2px solid #000;
    border-radius: 12px;
    position: relative;
    }
    .thumb {
    width: 100%;
    border-radius: 12px;
    }
    .newest {
    background: #EE4358;
    padding: 12px;
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    position: absolute;
    top: 10px;
    right: 10px;
    }
  2. before vs after

    <div class="card">    
    <span class="before">before</span>    
    hello
    </div>
    .before {
    color: red;
    }

    output: before hello

Cách viết trên cũng có thể viết lại như thế này

<div class="card">       
    hello
</div>
.card::before {
    color: red;
    content: "before"
}

Có thể hiểu, khi dùng ::before thì sẽ tạo ra 1 tag span ảo, y chang bên trên chèn vào trước chữ hello. ::after cũng tương tự như vậy.