Bài 1: Giới thiệu về Trình quản lý quảng cáo

Bài Giảng CSS3: Bố Cục - Vị Trí, Căn Lề, Hiển Thị

1. Giới Thiệu

CSS3 cung cấp nhiều công cụ để kiểm soát bố cục của trang web, bao gồm các thuộc tính định vị, căn lề và hiển thị phần tử. Bài học này sẽ giúp bạn hiểu cách sử dụng:

Position: Điều chỉnh vị trí của phần tử (static, relative, absolute, fixed, sticky).
Margin & Padding: Căn lề và khoảng cách giữa các phần tử.
Display & Visibility: Điều khiển cách phần tử hiển thị trên trang.

2. Định Vị Phần Tử (Position)

2.1. `static` (Mặc định)

Đây là giá trị mặc định của tất cả phần tử.
Phần tử xuất hiện theo thứ tự bình thường trên trang.

.box {
    position: static;
}

2.2. `relative` (Tương đối)

Phần tử được đặt tương đối so với vị trí ban đầu của nó.
Có thể dịch chuyển bằng top, left, right, bottom.

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

2.3. `absolute` (Tuyệt đối)

Phần tử được định vị so với phần tử cha gần nhất có thuộc tính position khác static.
Nếu không có phần tử cha nào có position, nó sẽ định vị so với body.

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

2.4. `fixed` (Cố định)

Phần tử sẽ giữ nguyên vị trí so với cửa sổ trình duyệt, ngay cả khi cuộn trang.

.box {
    position: fixed;
    top: 10px;
    left: 0;
}

2.5. `sticky` (Bám dính)

Phần tử hoạt động như relative nhưng sẽ trở thành fixed khi cuộn đến một vị trí nhất định.
Cần có giá trị top, left, right, hoặc bottom để hoạt động.

.box {
    position: sticky;
    top: 20px;
}

3. Căn Lề (Margin & Padding)

3.1. `margin` (Khoảng cách bên ngoài)

Điều chỉnh khoảng cách giữa phần tử và các phần tử xung quanh.

.box {
    margin: 10px 20px 30px 40px; /* Trên, phải, dưới, trái */
}

3.2. `padding` (Khoảng cách bên trong)

Điều chỉnh khoảng cách giữa nội dung và viền của phần tử.

.box {
    padding: 10px 15px;
}

4. Hiển Thị (Display & Visibility)

4.1. `display`

Điều chỉnh cách phần tử hiển thị trên trang.
Một số giá trị phổ biến:
- block: Hiển thị như một khối (div, p, h1-h6, ...).
- inline: Hiển thị trên cùng một dòng (span, a, ...).
- inline-block: Giống inline nhưng có thể chỉnh width và height.
- none: Ẩn hoàn toàn phần tử khỏi trang.

.box {
    display: block;
}

4.2. `visibility`

Điều chỉnh tính hiển thị của phần tử nhưng vẫn giữ không gian của nó.
visible: Hiển thị (mặc định).
hidden: Ẩn nhưng vẫn chiếm diện tích trên trang.

.box {
    visibility: hidden;
}

5. Tổng Kết

Position giúp kiểm soát vị trí phần tử.
Margin & Padding giúp căn chỉnh khoảng cách.
Display & Visibility giúp kiểm soát cách phần tử xuất hiện trên trang.
Kết hợp các thuộc tính này giúp xây dựng bố cục linh hoạt và đẹp mắt.

💡 Thực hành: Hãy thử tạo một trang web nhỏ sử dụng các thuộc tính này để hiểu rõ hơn!

CODE BÀI GIẢNG

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Code bài 5: chia khung</title>
<style>
/*CSS UL MENU*/
.menu {
width: 100%;
height: 70px;
position: sticky;
top: 0px;
padding-left: 200px;
padding-right: 200px;
display: flex;
box-sizing:border-box;
align-items:center
}

.menu img {
height: 60px;
width: auto;
left: 200px;
}

.menu ul {
flex:1;
text-align:right
}

.menu ul li {
display: inline-block;
padding: 10px 15px;
}
.menu ul li a{
font-weight:bold;
color:#515151;
text-decoration:none
}
.menu button{
padding:15px 25px;
background:#ff6a00;
color:white;
border:none;
border-radius:30px
}
/* CSS BANNER*/
.banner {
width: 100%;
border: 1px solid #808080;
height: 600px;
padding-top: 200px;
padding-left: 200px;
box-sizing: border-box;
}

.banner .hello {
top: 250px;
left: 200px;
}

.banner h1 {
top: 0;
left: 0;
font-size: 80px;
line-height: 0;
}

.banner h2 {
top: 150px;
line-height: 0;
}

.call {
position: fixed;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
}
</style>
</head>
<body>

<section class="menu">
<img src="logo.svg" />
<ul>
<li>
<a href="#">Home</a>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Testmonial</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div>
<button>Components</button>
</div>
</section>
<section class="banner">
<div class="hello">
hello,I'm
</div>
<h1>
James Smith
</h1>
<h2>
UI/UX Designer
</h2>
</section>

Checklist các mục cần chuẩn bị PDF · 1.2MB

Tải xuống
Tài nguyên chính thức của Facebook Link ngoài

Mở link

1. Sử dụng html css viết trang web có giao diện như hình ảnh

- Sử dụng cách chia 12 cột

- Menu sử dụng ul li

- Box nhắn tin: Sử dung position: fixed cố định ở góc

- Box sản phẩm: có chữ NEW đính bên cạnh phải

2. Nộp file html và css kèm theo

Bài 1: Giới thiệu về Trình quản lý quảng cáo

Bài Giảng CSS3: Bố Cục - Vị Trí, Căn Lề, Hiển Thị

1. Giới Thiệu

2. Định Vị Phần Tử (Position)

2.1. static (Mặc định)

2.2. relative (Tương đối)

2.3. absolute (Tuyệt đối)

2.4. fixed (Cố định)

2.5. sticky (Bám dính)