CSS Cơ Bản – Box Model, Display, Position và Các Thuộc Tính Layout Truyền Thống

Đây là nhóm kiến thức cốt lõi giúp bạn hiểu cách trình duyệt dựng bố cục. Mọi kỹ thuật layout truyền thống và hiện đại đều xây trên nền tảng này.

1. Nội dung chính

• Box Model: content, padding, border, margin
• Display: block, inline, inline-block, none
• Position: static, relative, absolute, fixed, sticky
• Float & Clear: cơ chế layout truyền thống
• Overflow & Visibility

2. Ví dụ

/* Box Model */
.box {
  width: 200px;
  padding: 16px;
  border: 2px solid #333;
  margin: 20px;
}

/* Display */
span { display: inline; }
div { display: block; }
img { display: inline-block; }

/* Position */
.relative-box {
  position: relative;
  top: 10px;
}

.absolute-box {
  position: absolute;
  right: 10px;
  top: 20px;
}

.fixed-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Float */
img {
  float: left;
  margin-right: 10px;
}
.clearfix {
  clear: both;
}

/* Overflow */
.wrapper {
  width: 150px;
  height: 80px;
  overflow: auto;
  visibility: visible;
}

Ví dụ Box Model với box-sizing

/* Mặc định: content-box */
.box-default {
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  /* Tổng chiều rộng thực tế: 200 + 40 + 20 = 260px */
}

/* border-box: kích thước bao gồm padding và border */
.box-border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  /* Tổng chiều rộng thực tế: 200px */
}

Ví dụ Position với z-index

.parent {
  position: relative;
  z-index: 1;
}

.child-1 {
  position: absolute;
  z-index: 10;  /* Hiển thị trên child-2 */
}

.child-2 {
  position: absolute;
  z-index: 5;
}

3. Kiến thức trọng tâm

💡 GHI NHỚ: Box Model là nền tảng của mọi tính toán layout: tổng chiều rộng = content + padding + border + margin

💡 GHI NHỚ: display quyết định cách phần tử chiếm không gian và tương tác với dòng

💡 GHI NHỚ: absolute định vị dựa trên phần tử tổ tiên có position khác static; fixed bám vào viewport

💡 GHI NHỚ: float từng là kỹ thuật layout chính trước Flexbox và Grid, nay chủ yếu dùng cho text wrapping

💡 GHI NHỚ: overflow kiểm soát nội dung tràn; visibility giữ vị trí nhưng ẩn nội dung

4. Bài tập nhanh

1. Tạo một box với padding, border, margin và kiểm tra kích thước thực tế bằng devtools:

.exercise-box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid #3498db;
  margin: 30px;
  background: #ecf0f1;
}

2. Tạo 3 phần tử và thay đổi display để quan sát sự khác biệt giữa block – inline – inline-block:

<div class="block">Block element</div>
<span class="inline">Inline element</span>
<div class="inline-block">Inline-block element</div>

.block { display: block; background: red; }
.inline { display: inline; background: green; }
.inline-block { display: inline-block; background: blue; }

3. Tạo một hình ảnh float trái và cho đoạn văn bản bao quanh:

<div class="article">
  <img src="image.jpg" alt="Float example" class="float-left">
  <p>Đoạn văn bản sẽ bao quanh hình ảnh...</p>
</div>

.float-left {
  float: left;
  width: 150px;
  margin-right: 20px;
  margin-bottom: 10px;
}

.article::after {
  content: "";
  display: table;
  clear: both;
}

5. Kết luận

Box Model, Display, Position và Float là nền tảng giúp bạn hiểu cách trình duyệt dựng giao diện. Khi nắm vững, bạn sẽ dễ dàng chuyển sang Flexbox, Grid và các kỹ thuật layout hiện đại.