Lesson 3: Box model & position

Kiến thức về Box model, position sẽ quyết định rất nhiều tới cách trình bày phần tử trên giao diện

PreviousLesson 2: CSS NextLesson 4: Layout

Last updated 5 months ago

Lesson 3: Box model & position

Kiến thức về Box model, position sẽ quyết định rất nhiều tới cách trình bày phần tử trên giao diện

Box model

Box Model là một khái niệm quan trọng trong CSS để xác định cách một phần tử HTML được hiển thị trên trang web. Mỗi phần tử trên trang được xem như một hình chữ nhật bao quanh bởi các lớp khác nhau, bao gồm:

Content: Nội dung của phần tử, như văn bản hoặc hình ảnh, nằm bên trong hình chữ nhật.
Padding: Khoảng cách giữa nội dung và viền (border) của phần tử.
Border: Đường viền bao quanh padding và nội dung của phần tử.
Margin: Khoảng cách bên ngoài viền, tạo không gian giữa phần tử này với các phần tử khác.

Xác định trên cửa sổ dev tool của trình duyệt:

Cùng thử tạo một Box:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box model & position</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            padding: 20px;
            border: 10px solid black;
            margin: 15px;
            background-color: rgb(234, 159, 159);
        }
    </style>
</head>

<body>
    <div>MINDX</div>
</body>

</html>

Hãy thử dựa vào hình ảnh box model trên cửa sổ devtool, cùng phân tích về các thuộc tính!

Position

Position trong CSS quy định cách thức một phần tử được đặt trong tài liệu HTML.

Để hiểu về khái niệm này, hãy tưởng tượng rằng:

Giao diện là một không gian 3 chiều, góc nhìn của màn hình tưởng chừng giao diện là mặt phẳng, nhưng nó là 1 góc nhìn của không gian 3 chiều. Và position sẽ là tính chất định nghĩa cách đặt phần tử theo không gian.

Hình 3D

Nhìn một mặt (Browser)

Tính chất về không gian này sẽ giúp làm được rất nhiều các trải nghiệm nâng cao, phổ biến như:

Hiển thị Popup (Modal)

Hiển thị dạng Dropdown

Và còn ất nhiều các ứng dụng khác nữa, tuỳ thuộc vào cách thiết kế của lập trình viên và bản thiết kế.

Tư tưởng về di chuyển 'vị trí'

Ám chỉ cách một box model (thẻ trong html) có thể di chuyển, theo 4 hướng cơ bản:

top: di chuyển lên trên

right: di chuyển sang phải

bottom: di chuyển xuống dưới

left: di chuyển sang trái

Các hướng trên, di chuyển theo lẽ thông thường với mặt phẳng

Có một hướng đặc biệt, đó là hướng không gian (z)

Ví dụ chiếu trên trục toạ độ:

Vậy, ta có thể hiểu được rằng, hướng z sẽ là hướng di chuyển theo không gian, với chiều tiến là đi 'hướng về màn hình', chiều lùi là đi 'xa ra màn hình'.

static

position: static;

Đây là giá trị mặc định cho tất cả các phần tử. Khi một phần tử có position: static, nó sẽ được đặt theo thứ tự tự nhiên của tài liệu, tức là theo dòng chảy thông thường của HTML.

khi phần tử có position: static, các thuộc tính:top, right, bottom,left và

z-indexsẽ không có hiệu lực.

relative

Tương đối so với vị trí ban đầu:

position: relative;

Phần tử vẫn nằm trong dòng chảy của tài liệu, nhưng có thể điều chỉnh vị trí của nó bằng cách sử dụng các thuộc tính top, right, bottom, và left.

Khi dịch chuyển, không gian mà phần tử chiếm giữ ban đầu vẫn được giữ lại, không làm thay đổi bố cục tổng thể của trang.

Ví dụ:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box model & position</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 10px solid black;
            margin: 15px;
        }

        div.box1 {
            background-color: yellow;
        }

        div.box2 {
            background-color: red;
            position: relative;
            /* Phần tử bị di chuyển lên trên 100px */
            top: -100px;
            /* Phần tử bị di chuyển sang phải 100px */
            right: -100px;
            /* Phần tử bị di chuyển xa hơn màn hình 1 đơn vị so với văn bản bình thường */
            z-index: -1;
        }

        div.box3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box1">MINDX 1</div>
    <div class="box2">MINDX 2</div>
    <div class="box3">MINDX 3</div>
</body>

</html>

Kết quả:

absolute

Vị trí tuyệt đối

position: absolute;

Phần tử được đặt ra khỏi dòng chảy bình thường của tài liệu (có thể hiểu được đưa lên một không gian khác) và được định vị tương đối so với phần tử chứa gần nhất có position khác static. Nếu không có phần tử chứa nào có position không phải là static, nó sẽ được định vị so với viewport (cửa sổ trình duyệt).

Các phần tử xung quanh sẽ hoạt động như thể phần tử absolute không tồn tại.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box model & position</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 10px solid black;
            margin: 15px;
        }

        div.box1 {
            background-color: yellow;
        }

        div.box2 {
            background-color: red;
            position: absolute;
        }

        div.box3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box1">MINDX 1</div>
    <div class="box2">MINDX 2</div>
    <div class="box3">MINDX 3</div>
</body>

</html>

fixed

Vị trí cố định

position: fixed;

Phần tử được định vị so với viewport và không thay đổi vị trí khi trang được cuộn. Điều này có nghĩa là phần tử sẽ luôn hiển thị tại một vị trí cố định trên màn hình, theo màn hình, bất kể người dùng cuộn trang đến đâu.

Thích hợp cho các phần tử cần luôn hiển thị như thanh điều hướng, nút quay lại đầu trang, v.v.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box model & position</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 10px solid black;
            margin: 15px;
        }

        div.box1 {
            background-color: yellow;
        }

        div.box2 {
            background-color: red;
            position: absolute;
        }

        div.box3 {
            background-color: blue;
        }

        .scrTop {
            position: fixed;
            right: 50px;
            bottom: 100px;
        }
    </style>
</head>

<body>
    <div class="box1">MINDX 1</div>
    <div class="box2">MINDX 2</div>
    <div class="box3">MINDX 3</div>
    <button class="scrTop">Scroll to Top</button>
</body>

</html>

sticky

Lai giữa relative và fixed

position: sticky;

Phần tử bắt đầu như relative, nhưng khi người dùng cuộn trang đến một vị trí nhất định, nó sẽ trở thành fixed. Phần tử sẽ giữ vị trí cố định đó cho đến khi cuộn ra khỏi giới hạn của phần tử chứa nó.

Phù hợp khi muốn một phần tử cố định chỉ khi nó đi đến một vị trí nhất định trên trang.

Ví dụ thanh header tại trang https://tailwindcss.com/docs/installation:

Trên đây là những kiến thức căn bản về position, có thể được coi là một tư tưởng, sẽ giúp lập trình viên thiết kế những giao diện mang lại trải nghiệm tốt hơn cho người dùng, cũng như đáp ứng được cho các bản design.