----
Phần tử chứa các float
Như đã biết, thuộc tính float sẽ làm trôi dạt phần tử bên trong một phần tử khác, mục đích là để nội dung văn bản sẽ bao quanh phần tử được float, tuy nhiên, đôi khi việc float cũng gây ra những kết quả không như mong muốn.
Ví dụ, hãy thêm đường viền cho phần tử ul ở phần tạo trình đơn phía trên,
ul {
…
border: solid 2px yellow;
}
Quan sát kết quả trên trình duyệt, sẽ thấy phần tử ul bị thu lại chỉ còn là một đường kẻ ngang. Nghĩa là, các phần tử li đã bị tràn hết ra ngoài phần tử ul. Kết quả là không thể định dạng được màu nền, kích thước, các hiệu ứng cho ul.
Vấn đề bây giờ là làm sao để phần tử chứa các float sẽ dãn ra, để chứa trọn các phần tử float? Dưới đây là hai cách khá đơn giản và hay được sử dụng.
Cách đầu tiên là thiết lập luôn thuộc tính float cho phần tử chứa các float, và thiết lập chiều rộng cho nó là 100%,
Ví dụ,
ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
float: left;
border: solid 2px yellow;
}
Cách thư hai là thiết lập thuộc tính overflow: auto hoặc overflow: hidden cho phần tử chứa các float, và thiết lập chiều rộng cho nó là 100%,
Ví dụ,
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
/*overflow: auto;*/
float: left;
border: solid 2px yellow;
}
Lab2.5.b (exercise 15-2, p.353 [3])
Sử dụng kĩ thuật float để tạo các cột
Ở các phần trước đã thực hiện float các phần nội dung nhỏ, phần này sẽ thực hiện float các vùng nội dung lớn hơn, để tạo ra các cột cho trang web.
Sau đây là một số cách để tạo ra hai cột cho trang web,
– Float một div, thêm margin đủ rộng cho phần văn bản bao quanh div vừa được float
– Float cả hai div sang trái, hoặc phải
– Float một div sang trái, một div sang phải
Để chia trang web thành ba cột, cách làm tương tự, cần chú ý tính toán về kích thước cho hợp lý.
Dù chọn cách nào trên đây để chia cột cho trang web thì cũng cần để ý một số vấn đề sau:
– Phải thiết lập độ rộng (width) cho phần tử được float
– Cần tính toán độ rộng cẩn thận, bao gồm cả padding, border và margin. Nếu tổng chiều rộng của các cột lớn hơn độ rộng của cửa sổ trình duyệt (hoặc phần tử chứa) thì cột cuối cùng sẽ không đủ chỗ và bị rớt xuống phía dưới
Hạn chế của kĩ thuật chia cột bằng float là nó bị phụ thuộc vào thứ tự của các vùng nội dung trong mã nguồn. Vùng nội dung được float phải xuất hiện trước phần nội dung bao quanh nó. Tuy nhiên, nội dung trang web không phải luôn luôn có thứ tự thuận lợi như vậy.
Làm bài thực hành sau để hiểu rõ hơn về cách tạo hai cột bằng kĩ thuật float.
Lab2.5.c (exercise 15-3, p.354 [3])
2.5.3 Định vị phần tử
CSS cung cấp một số cách để định vị một phần tử trên trang web. Có thể định vị một phần tử theo kiểu thông thường, có thể định vị bằng vị trí cố định trên trang, hoặc cũng có thể định vị bằng vị trí cố định trên cửa sổ trình duyệt.
Các kiểu định vị
Để chọn kiểu định vị cho một phần tử, sử dụng thuộc tính position. Dưới đây là các đặc tính của position,
– Giá trị: static | relative | absolute | fixed | inherit
– Mặc định: static
– Áp dụng: mọi phần tử
– Kế thừa: không
Giá trị của thuộc tính position là các từ khóa, mỗi từ khóa ứng với một kiểu định vị, các phần sau sẽ tìm hiểu chi tiết về mỗi trường hợp, ở đây chỉ mô tả tóm tắt từng kiểu.
– static: đây là kiểu định vị thông thường, kiểu mặc định, trong đó, các phần tử sẽ được hiển thị theo đúng thứ tự của chúng trong mã nguồn. Từ static có nghĩa là tĩnh tại, nằm tại một vị trí, không di chuyển hay thay đổi vị trí.
– relative: phần tử được định vị dựa vào vị trí gốc (vị trí theo thứ tự trong mã nguồn) của nó. Vị trí gốc của phần tử trên giao diện sẽ vẫn được dành riêng cho nó, là một vùng không gian trống. Vị trí mới của phần tử được xác định dựa vào khoảng dời (offset distance) so với vị trí gốc. Từ relative có nghĩa là tương đối, nghĩa là vị trí mới sẽ là dịch chuyển một khoảng tương đối so với vị trí gốc.
– absolute: phần tử sẽ được tách khỏi luồng hiển thị thông thường, và vị mới của phần tử được xác định dựa theo cửa sổ trình duyệt hoặc phần tử chứa nó. Khác với kiểu relative, ở kiểu này, vùng không gian gốc của phần tử sẽ bị thu hồi, và nó thực sự không ảnh hưởng tới bố cục chung của các phần tử xung quanh.
– fixed: phần tử sẽ được tách khỏi luồng hiển thị thông thường, và vị trí mới của phần tử được xác định dựa theo cửa sổ trình duyệt chứ không dựa theo phần tử khác trong tài liệu. Khi người dùng cuộn nội dung tài liệu, thì phần tử định vị theo kiểu fixed vẫn nằm nguyên tại vị trí của nó trên cửa sổ trình duyệt.
Mỗi kiểu định vị có mục đích sử dụng riêng, tuy nhiên, kiểu absolute đa năng hơn cả. Với kiểu absolute, người thiết kế có thể đặt một đối tượng ở vị trí bất kì trong cửa sổ, hoặc trong một phần tử khác, có thể tạo bố cục nhiều cột, hoặc tạo các định dạng hiển thị đa dạng khác.
Cách xác định vị trí của phần tử
Sau khi đã chọn kiểu định vị, vị trí thực sự của phần tử được xác định dựa vào các thuộc tính sau,
top, right, bottom, left,
– Giá trị: đơn vị đo chiều dài | % | auto | inherit
– Mặc định: auto
– Áp dụng: các phần tử đã thiết lập kiểu hiển thị là relative, absolute và fixed
– Kế thừa: không
Các giá trị cung cấp cho mỗi thuộc tính (top, right, bottom, left) chính là khoảng dời (khoảng cách) so với các cạnh tương ứng. Ví dụ, giá trị của thuộc tính top chính là khoảng cách tính từ cạnh trên của cửa sổ trình duyệt (hoặc của một phần tử) tới cạnh trên của phần tử đang được thiết lập vị trí. Nếu top có giá trị dương, phần tử sẽ được dịch chuyển xuống phía dưới, ngược lại, nếu top có giá trị âm, phần tử sẽ được dịch chuyển lên phía trên. Tương tự, nếu left có giá trị dương, phần tử sẽ được dịch chuyển sang phía phải, nếu giá trị âm sẽ dịch sang phía trái.
Kiểu định vị relative
Như ở phần trên đã trình bày, kiểu định vị relative sẽ dịch chuyển phần tử một khoảng tương đối so với vị trí mặc định ban đầu của nó. Không gian ban đầu của phần tử vẫn được duy trì và tiếp tục ảnh hưởng tới bố cục của các nội dung xung quanh.
Quan sát ví dụ, thiết lập cho phần tử em kiểu định vị là relative, và giá trị top: 30px, left: 60px.
[HTML]
<p>Nhiệt độ trung bình tháng ở <em>Đà Lạt không bao giờ vượt quá 20°C</em>, ngay cả trong những tháng nóng nhất. Thành phố Đà Lạt là tỉnh lỵ của tỉnh Lâm Đồng, nằm trên cao nguyên Lâm Viên, thuộc vùng Tây Nguyên, Việt Nam. Từ xa xưa, vùng đất này vốn là địa bàn cư trú của những cư dân người Lạch, người Chil và người Srê thuộc dân tộc Cơ Ho. Cuối thế kỷ 19, khi tìm kiếm một địa điểm để xây dựng trạm nghỉ dưỡng dành cho người Pháp ở Đông Dương, Toàn quyền Paul Doumer đã quyết định chọn cao nguyên Lâm Viên theo đề nghị của bác sĩ Alexandre Yersin, người từng thám hiểm tới nơi đây vào năm 1893</p>
[CSS]
em {
position: relative;
top: 30px;
left: 60px;
background-color: #ff6347;
}
Xem hình minh họa,
Từ hình minh họa trên có thể thấy, phần không gian gốc của phần tử em trước khi nó được định vị theo kiểu relative vẫn được duy trì, các nội dung xung quanh vẫn được hiển thị như là đang có phần tử em tại đó. Do vậy, mặc dù đã được dịch chuyển tới vị trí mới, nhưng phần tử vẫn còn ảnh hưởng tới bố cục của các nội dung xung quanh. Ngoài ra, việc dịch chuyển phần tử tới vị trí mới có thể dẫn đến tình trạng phủ lấp các nội dung khác.
Với những hạn chế như vậy, nên kiểu định vị relative ít được sử dụng độc lập, mà nó thường được sử dụng làm “ngữ cảnh” cho kiểu định vị absolute.
Kiểu định vị absolute
So với kiểu định vị relative, kiểu absolute làm việc hơi khác một chút và linh hoạt hơn trong việc đặt một phần tử chính xác trên trang. Làm lại ví dụ giống như trong phần relative, chỉ thay đổi thuộc tính position thành absolute.
[CSS]
em {
position: absolute;
top: 30px;
left: 60px;
background-color: #ff6347;
}
Xem hình minh họa,
Quan sát trên hình minh họa sẽ thấy, không gian của phần tử em trước khi nó được thiết lập là absolute đã được thu hồi. Ở vị trí mới, phần tử em cũng phủ lấp các nội dung xung quanh. Có thể thấy, một phần tử được định vị theo kiểu absolute không làm ảnh hưởng đến bố cục của các phần tử xung quanh.
Vậy có phải khi định vị theo kiểu absolute thì phần tử luôn lấy cửa sổ trình duyệt làm mốc không? Thực tế không phải vậy, mà nó sẽ lấy khối chứa (containing block) gần nhất làm mốc. Đừng nhầm khối chứa với phần tử kiểu block (block element), đây là hai khái niệm khác nhau. Khối chứa mặc định của một trang web chính là phần tử html, nó được gọi là khối chứa khởi tạo (initial containing block). Do vậy, phần tử em sẽ lấy khung chứa toàn bộ tài liệu (chính xác là vùng nội dung của cửa sổ trình duyệt) làm mốc.
Như vậy, trước khi thực hiện thiết lập vị trí theo kiểu absolute, cần tìm hiểu và xác định được khối chứa.
-----------
Cập nhật [13/7/2018]
-----------
Xem thêm: Học làm web (46) - CSS căn bản (22)