11. Thẻ div trong HTML để tạo các khối giao diện

 

1. Tính chất của thẻ div trong HTML

Thẻ div trong HTML là một thẻ bình thường, được hiển thị mặc định ở dạng block. Vì vậy, ta thường sử dụng nó để tạo các block trên giao diện của trang web.

Chiều dài mặc định của thẻ div là 100%, nghĩa là nó kéo dài full từ bên trái sang bên phải, miền được giới hạn bởi khoảng trống mà các thẻ HTML bên ngoài tạo thành. Thẻ div không có một thuộc tính điều chỉnh cách hiển thị nào cả, mà ta phải kết hợp với CSS để thay đổi nếu cần.

Cú pháp thẻ div như sau:

1
2
3
<div>
    ... Nội dung bên trong
</div>

Bạn cũng có thể tạo nhiều thẻ div lồng nhau như sau:

1
2
3
4
5
6
7
<div>
    <div>
        <div>
            ... Nội dung bên trong
        </div>
    </div>
</div>

Đương nhiên là lạm dụng quá nhiều thẻ HTML trong một giao diện sẽ ảnh hưởng đến tốc độ tải trang, SEO .. và nhiều yếu tố khác. Vì vậy, với những người làm frontend kinh nghiệm thì họ sẽ rất hạn chế sử dụng quá nhiều cấp HTML.

2. Cách tạo một khối div trên giao diện HTML

Để sử dụng thành thạo thì bạn phải biết cách kết hợp với các thuộc tính CSS để tùy chỉnh phần hiển thị mặc định của thẻ div.

Thay đổi background cho thẻ div

Khá đơn giản, ta chỉ cần sử dụng thuộc tính background trong CSS là được.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            #div1{
                background: yellow;
            }
            #div2{
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="div1">
           DIV 1
        </div>
        <div id="div2">
           DIV 2
        </div>

    </body>
</html>

Thiết lập chiều cao và chiều rộng cho thẻ div

Sử dụng thuộc tính height và width là ta có thể thay đổi được chiều cao và chiều rộng của thẻ div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            #div1{
                background: yellow;height: 100px;width: 100px;
            }
            #div2{
                background: red;height: 100px;width: 100px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
           DIV 1
        </div>
        <div id="div2">
           DIV 2
        </div>

    </body>
</html>

Tạo đường viền cho thẻ div

Để tạo đường viền thì ta sử dụng thuộc tính border trong CSS nhé.

1
2
3
4
5
6
#div1{
    background: yellow;
    height: 100px;
    width: 100px;
    border: solid 3px blue
}



Thay đổi khoảng trống giữa nội dung và đường viền

Sử dụng thuộc tính padding trong CSS để tạo ra khoảng không giữa chúng nhé.

1
2
3
4
5
6
7
div{
    background: yellow;
    height: 100px;
    width: 100px;
    border: solid 3px blue;
    padding: 30px;
}


Thiết lập canh giữa màn hình cho thẻ div

Nếu bạn muốn thẻ div hiển thị canh giữa so với hai bên lề thì hãy sử dụng thuộc tính margin nhé

1
2
3
4
5
6
7
8
div{
background: yellow;
    height: 100px;
    width: 100px;
    border: solid 3px blue;
    padding: 30px;
    margin: 0px auto;
}

Trong đó 0px là khoảng cách ở phía trên và phía dưới, còn auto là khoảng cách tự động giữa bên trái và bên phải. Vì mình đặt auto nên nó sẽ tự động canh giữa. Hãy chạy ví dụ để xem kết quả nhé.


Đưa về bên trái hoặc bên phải với float

Thuộc tính float trong CSS sẽ giúp ta canh trái hoặc canh phải cho thẻ div đó.

  • float:left => canh trái
1
2
3
4
5
6
7
8
div{
    background: yellow;
    height: 300px;
    width: 400px;
    border: solid 1px red;
    padding: 30px;
    float:left
}


  • float:right => canh phải
1
2
3
4
5
6
7
8
div{
    background: yellow;
    height: 300px;
    width: 400px;
    border: solid 1px red;
    padding: 30px;
    float:right
}





Để tắt thuộc tính float 

Khi kích hoạt thuộc tính float, các div sẽ được sắp xếp linh động. Có thể theo 1 hàng, hoặc nhảy tới 1 vị trí bất kì nào khác. Các div khai báo sau đó cũng bị ảnh hưởng theo , nhảy tùm lum vị trí

Để các div khai báo về sau, trở vẻ trạng thái inline bình thường, ta khai báo thuộc tính clear:both (nghĩa là xóa float, kể từ lúc này)

<div style="float:left;background: yellow;padding: 30px;">Xin chào</div>
<div style="float:left;background: green;padding: 30px;">HCM</div>
<div style="float:right;background: red;padding: 30px;">HN</div>
<div style="clear:both"></div>
<div style="background: grey;padding: 30px;">HP</div>




Nhận xét