CHƢƠNG 3 ĐỊNH KIỂU TRÌNH DIỄN TRANG WEB BẰNG CSS
3.8. HIỂN THỊ THEO DÒNG VÀ THEO KHỐI
Đối tƣợng tài liệu có thể đƣợc hiển thị theo dòng (inline) hoặc theo khối
(block). Thuộc tính display của đối tƣợng tài liệu đƣợc sử dụng để xác định kiểu
hiển thị. Một đối tƣợng hiển thị theo khối sẽ chiếm tồn bộ dịng mà nó có mặt,
khơng thể đứng cạnh các đối tƣợng khác trên cùng dòng, cho dù khoảng trống
phía sau của dòng còn đủ để hiển thị các đối tƣợng khác. Cũng có thể hình dung
là trình duyệt sẽ tự động thêm các đối tƣợng ngắt dòng (<br>) vào trƣớc và sau đối
tƣợng hiển thị theo khối. Ngƣợc lại, các đối tƣợng hiển thị theo dịng có thể đƣợc
trình diễn trên cùng dịng, đối tƣợng này cạnh đối tƣợng kia. Đặc biệt, nếu khoảng trống còn lại của dịng khơng cịn đủ, hoặc nội dung bên trong có chứa đối tƣợng ngắt dịng (<br>), hộp của đối tƣợng hiển thị theo dòng sẽ đƣợc gấp thành nhiều
đoạn và hiển thị trên nhiều dòng liên tiếp. Đối tƣợng hiển thị theo dịng khơng cho đặt giá trị cho các thuộc tính width, height, margin-top, và margin-bottom. Các
giá trị n|y đƣợc tính tự động. Lƣu ý, hộp của đối tƣợng hiển thị theo khối không bị gấp ngay cả khi bề rộng của nó lớn hơn bề rộng của vùng hiển thị.
Cũng có thể đặt kiểu hiển thị cho đối tƣợng là dòng-khối (inline-block). Hiển
thị theo dòng-khối tƣơng tự hiển thị theo khối, ngoại trừ cho phép c{c đối tƣợng
đứng trên cùng dịng.
Trong trang web ví dụ sau đ}y, chín đối tƣợng nhãn đƣợc khai b{o, trong đó
ba đối tƣợng đầu tiên đƣợc hiển thị theo dòng (mặc định của nhãn), ba đối tƣợng
tiếp theo đƣợc hiển thị theo khối v| ba đối tƣợng cuối cùng đƣợc hiển thị theo dòng-khối. Nội dung các nhãn thứ hai, năm v| t{m có chứa đối tƣợng ngắt dịng. Do đó, hộp của nhãn thứ hai đƣợc gấp đôi, một nửa đƣợc hiển thị ở đầu dòng tiếp theo, trong khi hộp của các nhãn thứ năm v| t{m có bề rộng x{c định (150 pixels) và nội dung bên trong nó đƣợc hiển thị theo dịng nội trong hộp. Tƣơng tự, nội
dung các nhãn thứ ba, sáu và chín rất dài dẫn đến hộp của nhãn thứ ba cũng đƣợc gấp trên nhiều dòng trong khi hộp của các nhãn thứ sáu và chín thì khơng. Các hộp của nhãn thứ bảy, tám và chín đƣợc hiển thị cùng dịng vì các nhãn này có
kiểu hiển thị là dòng-khối.
1. <!DOCTYPE html><html><head>
2. <title>L.3.8</title>
3. <meta charset="utf-8">
4. <style type="text/css">
5. label {border:solid 2px red; padding:2px 15px;
6. margin:10px; width:150px;}
7. label.b {display:block;}
8. label.ib {display:inline-block;}
WebAppDevLê Đình Thanh, Nguyễn Việt Anh 47 10.</head><body> 11. <label>Nhãn 1</label> 12. <label>Nhãn <br> 2</label> 13. <label>Nhãn nhãn nhãn nhãn nhãn nhãn nhãn nhãn nhãn nhãn 3</label>
14. <label class="b">Nhãn 4</label>
15. <label class="b">Nhãn <br> 5</label>
16. <label class="b">Nhãn nhãn nhãn nhãn nhãn nhãn nhãn nhãn 6</label>
17. <label class="ib">Nhãn 7</label>
18. <label class="ib">Nhãn <br> 8</label>
19. <label class="ib">Nhãn nhãn nhãn nhãn nhãn nhãn nhãn nhãn 9</label>
20.</body></html>