Các khái niệm CSS quan trọng

TL;DR / Tổng quan

Trong Nilead, mọi phần tử trên trang web của bạn đều tuân theo mô hình hộp CSS, xác định cách tính toán khoảng không gian và ảnh hưởng đến bố cục ra sao. Từ khoảng cách ngoài (margin) và khoảng đệm (padding) cho đến vị trí, hành vi float và xếp lớp z-index, việc hiểu rõ các khái niệm nền tảng này của CSS là chìa khóa giúp bạn kiểm soát bố cục và tránh các vấn đề ngoài ý muốn.

Yêu cầu trước

• Hiểu biết cơ bản về HTML và CSS

• Có quyền truy cập vào Bộ xây dựng website trực quan của Nilead

• Nắm rõ các thao tác chọn và chỉnh sửa kiểu phần tử

Hướng dẫn chi tiết

Box Model là gì?

Tất cả các phần tử HTML đều được xem như các hộp. Mô hình hộp xác định mỗi phần tử có cấu trúc gồm:

• Nội dung (ví dụ: văn bản hoặc hình ảnh)

• Padding (khoảng đệm xung quanh nội dung)

• Border (đường viền bao quanh phần tử)

• Margin (khoảng cách bên ngoài phần tử, tách phần tử ra khỏi các phần tử khác)

Các hộp này được xếp chồng và lồng vào nhau về mặt trực quan, và kích thước của chúng có thể được điều chỉnh qua Bảng điều khiển Kiểu dáng (Style Panel).

Margin âm

Các loại hiển thị (Display Types)

Thuộc tính Display xác định cách một phần tử hành xử trong bố cục. Một số giá trị phổ biến bao gồm:

💡 Mẹo: Sử dụng inline-block nếu bạn muốn hành vi hiển thị theo dòng kèm theo có thể tùy chỉnh kích thước.

div {
  display: inline;        /* Giá trị mặc định cho tất cả các phần tử, trừ khi stylesheet của UA ghi đè */
  display: inline-block;  /* Có tính chất của block, nhưng nằm trên một dòng */
  display: block;         /* Stylesheet của UA đặt các phần tử như <div> và <section> là block */
  display: run-in;        /* Không được hỗ trợ phổ biến, ít sử dụng */
  display: none;          /* Ẩn phần tử */
}

Hiển thị Inline

Giá trị mặc định cho các phần tử. Hãy nghĩ đến các phần tử như <span>, <em>, hoặc <b> và việc bao quanh một đoạn văn bản với các phần tử này sẽ không làm gián đoạn dòng chảy của văn bản.

Hiển thị Inline Block

Một phần tử dạng inline nhưng có thể thiết lập chiều rộng và chiều cao.

Hiển thị Block

Các phần tử block không nằm chung dòng mà sẽ bắt đầu một dòng mới. Mặc định (nếu không thiết lập chiều rộng) chúng sẽ chiếm toàn bộ không gian ngang có thể.

Vị trí (Position)

Định vị phần tử

Thuộc tính position trong CSS xác định cách một phần tử được đặt trên trang.

⚠️ Các phần tử sticky và fixed có thể gây ảnh hưởng đến hiệu suất trong các bố cục cuộn phức tạp.

Vị trí tương đối

Các thuộc tính top và bottom xác định độ lệch theo chiều dọc so với vị trí mặc định; các thuộc tính left và right xác định độ lệch theo chiều ngang.

Vị trí Tĩnh (Static Position)

Giá trị vị trí mặc định của bất kỳ hộp nào. Điều này khiến hộp được phân bố theo luồng thông thường và các thuộc tính top, bottom, left và right (còn gọi là giá trị offset hộp) sẽ không có tác dụng vì hộp được xem là không được định vị.

Vị trí Tuyệt đối (Absolute Position)

Một phần tử được định vị tuyệt đối là phần tử có giá trị computed position là absolute hoặc fixed. Một hộp ở vị trí tuyệt đối sẽ được đặt lệch rõ ràng so với khối chứa của nó, và hộp này sẽ không tham gia vào luồng thông thường. Các phần tử anh chị sau đó sẽ không nhận biết được sự tồn tại của nó trong bố cục tổng thể.

Float & Clear

Float di chuyển các phần tử sang trái hoặc phải, cho phép văn bản và các phần tử nội tuyến khác bao quanh.

• Dùng float: left/right để căn chỉnh phần tử

• Dùng clear: both (hoặc left/right) để ngăn chồng chéo từ các float trước đó

⚠️ Float có thể khiến các khối cha bị sụp độ cao. Hãy dùng kỹ thuật clearfix hoặc tránh sử dụng float trong bố cục hiện đại bằng cách sử dụng Flexbox hoặc Grid.

Float có thể được sử dụng để tạo toàn bộ bố cục trang web.

Thuộc tính liên quan với float là clear. Một phần tử được áp dụng thuộc tính clear sẽ không nằm cạnh float như float mong muốn, mà sẽ di chuyển xuống dưới float.

LƯU Ý Mặc dù thuộc tính float vẫn có thể được sử dụng để tạo bố cục, ngày nay chúng ta đã có những công cụ mạnh mẽ hơn để xây dựng layout cho trang web, đó là Flexbox và Grid.

#footer {   clear: both;   }

Thuộc tính clear có bốn giá trị hợp lệ. Giá trị both được sử dụng phổ biến nhất, giúp xóa float đến từ cả hai hướng. Left và Right được dùng để chỉ xóa float theo một hướng tương ứng.

Một trong những điều gây bối rối khi làm việc với float là nó có thể ảnh hưởng đến phần tử chứa nó (phần tử "cha"). Nếu phần tử cha này chỉ chứa các phần tử được float, thì chiều cao của nó sẽ bị co lại thành không.

Lưu ý Cần thận trọng khi dùng float vì việc sửa lỗi có thể khá khó khăn.

Z-Index & Lớp chồng

z-index xác định thứ tự xếp chồng của các phần tử (phần tử nào được hiển thị phía trên).

• Giá trị càng cao = càng gần người xem hơn

• Giá trị mặc định là 0

• Chỉ áp dụng cho các phần tử có position (ví dụ: không phải static)

Ví dụ:

.header { z-index: 10; position: relative; }
.modal { z-index: 1000; position: fixed; }

Transform

Sử dụng transform để xoay, thay đổi tỷ lệ, làm nghiêng hoặc di chuyển các phần tử.

Ví dụ:

transform: rotate(45deg); transform: translateX(20px);
transform: scale(1.2);

Kết hợp các hiệu ứng transform:

transform: translateX(10px) rotate(15deg);

Sử dụng transform để tạo hiệu ứng động, hiệu ứng hover hoặc điều chỉnh bố cục.

Transition

Transition giúp chuyển đổi mượt mà giữa các trạng thái kiểu dáng.

button { transition: background-color 0.3s ease-in-out; }

Hiệu ứng này sẽ tạo hoạt ảnh khi nền thay đổi khi rê chuột hoặc nhấp.

Phông chữ, Khoảng cách và Hiệu suất

• Letter-spacing điều chỉnh khoảng cách giữa tất cả các ký tự

• Font-kerning điều chỉnh khoảng cách giữa các cặp ký tự nhất định

  font-feature-settings: "kern" 1;
  font-kerning: normal;

• Các định dạng phông chữ web:

  • WOFF2 = hiện đại, kích thước nhỏ

  • WOFF = tương thích với hầu hết các trình duyệt

  • TTF, EOT = cũ, chỉ dùng dự phòng

• FOIT (Flash of Invisible Text) có thể xảy ra nếu font-display không được thiết lập. Sử dụng:

  font-display: swap;

Tính năng kiểu chữ nâng cao

Có hai thiết lập trong file phông chữ xác định khoảng cách giữa các ký tự:

1. Letter spacing: Được xác định bởi lề cạnh trái và phải của mỗi ký tự.

2. Font kerning: Ám chỉ điều chỉnh cụ thể giữa hai ký tự liền nhau

Khoảng cách (spacing) không thể bị tắt hoàn toàn. Ngược lại, kerning mặc định bị tắt trong các trình duyệt và bạn cần bật nó lên bằng CSS của mình.

p {
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

Flash of Unstyled Text (Hiện chữ chưa định dạng)

Khi sử dụng font tuỳ chỉnh qua @font-face, các trình duyệt thường hiển thị font dự phòng trong danh sách font cho đến khi font tuỳ chỉnh được tải về.

Flash of Invisible Text (Hiện chữ tạm thời bị ẩn)

Gần đây, các trình duyệt đã phát hiện khi văn bản được đặt ở font tuỳ chỉnh mà chưa tải xong, chúng sẽ làm văn bản bị ẩn đi cho tới khi font đó được tải (hoặc sau một số giây nhất định). Hành vi này có thể dẫn tới việc nội dung bị ẩn vĩnh viễn.

Câu hỏi thường gặp

1. Tại sao container của tôi lại bị thu nhỏ chiều cao khi tôi float các phần tử bên trong?
Float không làm tăng chiều cao của phần tử cha. Hãy dùng overflow: auto hoặc clearfix.

2. Tại sao phần tử inline của tôi không nhận width và height?
Các phần tử dạng inline bỏ qua các thuộc tính này. Hãy chuyển sang inline-block hoặc block.

3. Làm cách nào để xếp các hộp thoại modal lên trên các phần tử khác?
Đặt z-index cao (vd: 1000) và dùng position: fixed.

4. Tôi có thể kết hợp transform và transition không?
Có — bạn có thể tạo hiệu ứng chuyển động cho transform bằng transition.

5. Khi nào tôi nên dùng position: absolute so với fixed?
Dùng absolute để bố trí bên trong một container; dùng fixed cho các phần tử như header cố định hoặc modal.