Common CSS Attributes

Mỗi element là một hộp gồm 4 lớp: content → padding → border → margin. Hiểu box model là điều kiện đầu tiên để layout đúng.

css
display: block;        /* chiếm cả dòng, nhận width/height */
display: inline;       /* chỉ rộng theo nội dung, KHÔNG nhận width/height */
display: inline-block; /* inline + nhận width/height */
display: flex;         /* 1D layout — xem mục Flexbox */
display: grid;         /* 2D layout — xem mục Grid */
display: contents;     /* element biến mất, giữ children */
display: none;         /* gỡ khỏi flow, không chiếm chỗ */

css
position: static;     /* mặc định, không chịu top/left/... */
position: relative;   /* mốc cho con absolute, dịch chuyển từ vị trí gốc */
position: absolute;   /* bay khỏi flow, tham chiếu ancestor relative gần nhất */
position: fixed;      /* tham chiếu viewport — luôn dính */
position: sticky;     /* dính khi scroll qua threshold */

top: 10px;     /* vị trí tính từ trên xuống */
bottom: 10px;  /* từ dưới lên */
left: 10px;    /* từ trái */
right: 10px;   /* từ phải */
inset: 0;      /* shorthand: top/right/bottom/left = 0 */
z-index: 10;   /* thứ tự chồng */

css
/* Truncate 1 dòng kèm "..." */
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

css
background-color: #fff;
background-image: url(bg.jpg);
background-image: linear-gradient(to right, red, orange, yellow);
background-image: -webkit-linear-gradient(left, red 0%, orange 50%, yellow 100%);

background-size: cover;        /* lấp đầy 100% khối, có thể crop */
background-size: contain;      /* thấy hết ảnh, có thể chừa khoảng */
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;  /* cố định khi scroll — parallax */
background-clip: text;         /* clip ảnh nền theo text — kết hợp -webkit-text-fill-color: transparent */

/* Shorthand */
background: #fff url(bg.jpg) no-repeat center/cover fixed;

css
border: 1px solid #ddd;
border-radius: 0.5rem;
border-radius: 50%;             /* tròn — áp dụng cho element vuông */

outline: 2px solid blue;        /* không tính vào box, không đẩy layout */
outline-offset: 4px;

box-shadow: 2px 2px 7px rgba(0,0,0,.2);
/*           ↑   ↑   ↑     ↑
             x   y  blur  color
             dương x = sang phải, dương y = xuống dưới */

Bật flex bằng display: flex hoặc display: inline-flex.

flex-direction — trục chính

flex-wrap — xuống dòng?

justify-content — canh chiều ngang (theo trục chính)

align-items — canh chiều dọc (trục phụ)

Khối ngoài cần có chiều cao để thấy hiệu ứng.

Item-level

css
.parent {
  display: flex;
  gap: 1rem;
}
.child {
  flex: 1;            /* shorthand: grow shrink basis (1 1 0) */
  flex: 0 0 200px;    /* fixed 200px — không co không giãn */
  align-self: center; /* override align-items cho riêng item */
  order: 2;           /* đổi thứ tự */
}

css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));   /* responsive */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  gap: 1rem;
}
.item {
  grid-area: header;
  grid-column: 1 / 3;       /* span từ cột 1 đến trước cột 3 */
  grid-column: span 2;
}

css
/* Transform — đổi hình thái element, KHÔNG re-layout */
transform: translate(-50%, -50%);
transform: rotate(-45deg);
transform: scale(1.1);            /* zoom phóng to */
transform: translate(10px, 0) rotate(45deg) scale(1.1);  /* combine */

/* Transition — animate sự thay đổi giữa 2 state */
transition: all 0.3s ease;
transition: transform 0.2s, opacity 0.2s;
transition: 0.4s;                 /* shorthand */

css
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.box {
  /* shorthand: name | duration | timing | delay | count | direction | fill-mode */
  animation: fade-in 0.4s ease 0s 1 normal forwards;
}

css
/* Pseudo-class */
li:nth-child(3)        { ... }   /* phần tử thứ 3 */
li:nth-child(odd)      { ... }   /* lẻ */
li:nth-child(2n+1)     { ... }
li:first-child         { ... }
li:last-child          { ... }
a:hover, a:focus       { ... }

/* Pseudo-element */
.box::before { content: ''; }
.box::after  { content: ''; }
p::first-letter { font-size: 2em; }

/* Combinator */
.parent > .child       /* con trực tiếp */
.prev   + .next        /* anh em liền kề */
.prev   ~ .siblings    /* mọi anh em sau */

• box-sizing: border-box — đặt global cho mọi element để khỏi đau đầu width.
• margin: 0 auto — canh giữa block element theo chiều ngang.
• Ẩn element nhưng giữ accessibility: opacity: 0 hoặc class sr-only, không dùng display: none.
• Center tuyệt đối: position: absolute; inset: 0; margin: auto hoặc dùng flex/grid với place-items: center.
• float: left/right — kỹ thuật cũ, ngày nay dùng flex/grid.
• Background gradient + clip text: background-clip: text; -webkit-text-fill-color: transparent.