Khóa học IT CSS Cơ bản 028_Float, Định vị, Căn chỉnh

Float

Trong CSS, float là một kỹ thuật bố cục sử dụng thuộc tính float để làm cho các phần tử nổi dọc theo bên trái hoặc bên phải của container, cho phép các phần tử khác bao quanh nó.

Ví dụ:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>

Hiệu ứng: Hiệu ứng ví dụ Các phần tử float có thể làm cho chiều cao của phần tử cha bị sụp đổ, có thể ảnh hưởng đến các phần tử trong các DIV khác, và nhiều phần tử float trên cùng một dòng có thể chồng lên nhau. Thuộc tính clear cần được sử dụng để kiểm soát ảnh hưởng lẫn nhau của chúng.

Ví dụ:

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }
7
    /* Sử dụng thuộc tính `clear` để hủy bỏ ảnh hưởng của phần tử float
8
     .content {
9
        clear: both;
10
    } */

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>
3

4
    <div class="content">
5
        Đây là văn bản sẽ bị ảnh hưởng.
6
    </div>

Hiệu ứng: Hiệu ứng ví dụ Ví dụ:

1
    .float-left {
2
        float: left;
3
    }
4
    .float-right {
5
        float: right;
6
    }

1
    <img class="float-left" src="zhaojian1.jpg" alt="" srcset="">
2
    <div class="float-right">25 tháng 1, 2024</div><div class="float-right">Tiêu đề bài viết Tiêu đề bài viết Tiêu đề bài viết</div>

Hiệu ứng:

Hiệu ứng ví dụ

Float là một kỹ thuật ban đầu để tạo bố cục nhiều cột, nhưng trong các bố cục hiện đại, các kỹ thuật bố cục linh hoạt hơn như Flexbox hoặc Grid thường được khuyến nghị.

Định vị

Trong CSS, định vị đề cập đến việc thiết lập phương pháp định vị của các phần tử thông qua thuộc tính position, và chỉ định vị trí của các phần tử so với các phần tử cha đã định vị gần nhất thông qua các thuộc tính top, right, bottom, left.

Định vị là tương đối với phần tử tổ tiên đã định vị gần nhất (position không phải là static). Nếu không có phần tử tổ tiên đã định vị, nó được định vị tương đối với khối chứa ban đầu (thường là phần tử <html>).
Các phần tử định vị tuyệt đối và định vị cố định được loại bỏ khỏi luồng tài liệu bình thường và có thể ảnh hưởng đến bố cục của các phần tử khác.
Giá trị thuộc tính thường sử dụng pixel (px) hoặc phần trăm (%).

Định vị tĩnh static

Định vị tĩnh (Static Positioning) là giá trị mặc định của thuộc tính position và thường không cần chỉ định rõ ràng. Các phần tử được định vị tĩnh được sắp xếp bình thường trong luồng tài liệu và không bị ảnh hưởng bởi các thuộc tính top, right, bottom, left.

Định vị ban đầu initial

Trong CSS, initial là một từ khóa được sử dụng để đặt lại giá trị thuộc tính về giá trị ban đầu của nó. Đối với thuộc tính position, giá trị ban đầu của nó là static. Sử dụng position: initial; tương đương với việc không thiết lập thuộc tính position.

Định vị tương đối relative

Phần tử được định vị tương đối với vị trí bình thường của nó.

Ví dụ:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        background-color: aquamarine;
5
    }
6
    .relative-example {
7
        position: relative;
8
        top: 100px;
9
        left: 20%;
10
    }

1
  <!-- <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> Thử thêm br hoặc các phần tử khác -->
2
  <div class="base relative-example"></div>

Hiệu ứng: Hiệu ứng ví dụ

Định vị tuyệt đối absolute

Phần tử được định vị tương đối với phần tử tổ tiên đã định vị gần nhất.

Ví dụ:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .absolute-example {
6
        position: absolute;
7
        top: 50px;
8
        left: 100px;
9
        background-color: blueviolet;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base absolute-example"></div>

Hiệu ứng:

Hiệu ứng ví dụ

Định vị cố định fixed

Phần tử được định vị tương đối với cửa sổ trình duyệt và luôn duy trì vị trí cố định trên màn hình.

Ví dụ:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .fixed-example {
6
        position: fixed;
7
        bottom: 40%;
8
        left: 40%;
9
        background-color: gold;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
3
    <div class="base fixed-example"></div>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

Hiệu ứng:

Hiệu ứng ví dụ

Định vị dính sticky

Phần tử trở thành định vị cố định khi cuộn đến một vị trí cụ thể, nếu không thì là định vị tương đối.

Ví dụ:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .sticky-example {
6
        position: sticky;
7
        top: 10%;
8
        left: 40%;
9
        background-color: darkcyan;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base sticky-example"></div>
3
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
6
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

Hiệu ứng:

Hiệu ứng ví dụ

Định vị kế thừa inherit

Phần tử trở thành định vị cố định khi cuộn đến một vị trí cụ thể, nếu không thì là định vị tương đối.

Ví dụ:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .inherit-example {
6
        position: inherit;
7
        top: 100%; /* Lưu ý ranh giới */
8
        left: 100%; /* Lưu ý ranh giới */
9
        background-color: violet;
10
    }

1
    <div class="base relative-example">
2
        <div class="base inherit-example"></div>
3
    </div>

Hiệu ứng: Hiệu ứng ví dụ

Thứ tự xếp chồng (Các phần tử chồng lên nhau)

z-index là một thuộc tính CSS được sử dụng để kiểm soát thứ tự xếp chồng. Nó xác định thứ tự hiển thị của một phần tử trong xếp chồng dọc, tức là phần tử nào sẽ ở phía trước hoặc phía sau phần tử nào.

Giá trị z-index có thể là số âm.
Các phần tử có z-index lớn hơn sẽ che phủ các phần tử có giá trị nhỏ hơn.
z-index chỉ hoạt động trên các phần tử đã định vị (position không phải là static)
z-index yêu cầu opacity của phần tử được đặt thành khác 0

Ví dụ:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        position: absolute;
5
    }
6
    .z-index-example1{
7
        background-color: red;
8
        z-index: 9;
9
    }
10
    .z-index-example2{
11
        background-color: blue;
12
        z-index: 1;
13
    }

1
    <div class="base z-index-example1"></div>
2
    <div class="base z-index-example2"></div>

Căn chỉnh

Căn chỉnh CSS đề cập đến việc kiểm soát căn chỉnh ngang và dọc của các phần tử thông qua các thuộc tính CSS. Các thuộc tính căn chỉnh CSS có thể được áp dụng cho bất kỳ phần tử nào, bao gồm văn bản, hình ảnh, bảng, danh sách, v.v.

Các thuộc tính căn chỉnh phổ biến có các giá trị sau:

left: Căn trái
center: Căn giữa
right: Căn phải
top: Căn trên
middle: Căn giữa
bottom: Căn dưới

Căn chỉnh ngang `text-align`

Được sử dụng để đặt căn chỉnh ngang của nội dung văn bản trong hộp phần tử.

Ví dụ:

1
.text-center {
2
  text-align: center; /* Căn giữa theo chiều ngang */
3
}
4
.text-left {
5
  text-align: left; /* Căn trái */
6
}
7
.text-right {
8
  text-align: right; /* Căn phải */
9
}
10
.text-justify {
11
  text-align: justify; /* Căn đều hai bên */
12
}

1
  <div class="text-center">Đây là một câu ABCDE 12345</div>
2
    <div class="text-left">Đây là một câu ABCDE 12345</div>
3
    <div class="text-right">Đây là một câu ABCDE 12345</div>
4
    <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel sapien accumsan, ac efficitur nulla bibendum. Nullam posuere fermentum nulla, in ultricies leo gravida sit amet. Vestibulum ut mi vitae libero accumsan dapibus.</div>

Hiệu ứng: Hiệu ứng ví dụ

Căn chỉnh dọc `vertical-align`

Được sử dụng để đặt căn chỉnh dọc của các phần tử inline bên trong một phần tử. Thường được sử dụng cho các phần tử inline và không có ảnh hưởng trực tiếp đến các phần tử cấp khối.

Ví dụ:

1
.base{
2
    height: 150px;
3
}
4
.vertical-align-baseline {
5
    vertical-align: baseline; /* Căn chỉnh đường cơ sở mặc định */
6
}
7
.vertical-align-top {
8
    vertical-align: top; /* Căn trên */
9
}
10
.vertical-align-middle {
11
    vertical-align: middle; /* Căn giữa */
12
}
13
.vertical-align-bottom {
14
    vertical-align: bottom; /* Căn dưới */
15
}

1
    <div class="base">
2
        <img class="vertical-align-baseline" src="zhaojian1.jpg" alt="" srcset="">Đây là một câu ABCDE 12345
3
    </div>
4
    <div class="base">
5
        <img class="vertical-align-top" src="zhaojian1.jpg" alt="" srcset="">Đây là một câu ABCDE 12345
6
    </div>
7
    <div class="base">
8
        <img class="vertical-align-middle" src="zhaojian1.jpg" alt="" srcset="">Đây là một câu ABCDE 12345
9
    </div>
10
    <div class="base">
11
        <img class="vertical-align-bottom" src="zhaojian1.jpg" alt="" srcset="">Đây là một câu ABCDE 12345
12
    </div>

Hiệu ứng: Hiệu ứng ví dụ

Float

Định vị

Định vị tĩnh static

Định vị ban đầu initial

Định vị tương đối relative

Định vị tuyệt đối absolute

Định vị cố định fixed

Định vị dính sticky

Định vị kế thừa inherit

Thứ tự xếp chồng (Các phần tử chồng lên nhau)

Căn chỉnh

Căn chỉnh ngang text-align

Căn chỉnh dọc vertical-align

Bình luận

Căn chỉnh ngang `text-align`

Căn chỉnh dọc `vertical-align`