Các yếu tố định vị trên một trang web với thuộc tính vị trí CSS

Có Thể 7, 2024

Trước Cascading Style Sheets, bạn bị giới hạn trong quyền kiểm soát đối với vị trí của các đối tượng trên trang web của bạn. Bạn có thể sử dụng bảng HTML để kiểm soát vị trí một chút nhưng điều này không chính xác lắm. Giờ đây với CSS, bạn có thể kiểm soát chính xác cách từng phần tử được đặt trên trang web của bạn.

Trước khi bạn có thể sử dụng thuộc tính vị trí CSS để định vị các thành phần trên trang web của mình, chúng tôi cần thảo luận về thuật ngữ được sử dụng để giao tiếp với trình duyệt web. CSS không chỉ xem xét chiều rộng và chiều cao của trang web của bạn mà còn cả kích thước của trình duyệt web.

Chiều rộng và chiều cao của trình duyệt
Lúc đầu, bạn có thể nghĩ rằng điều này đề cập đến cửa sổ trình duyệt mở. Nhưng nó thực sự đề cập đến toàn bộ trình duyệt bao gồm các nút điều khiển và nút.
Chiều rộng và chiều cao trực tiếp
Đây là thuật ngữ cho khu vực hiển thị của trình duyệt. Nó không bao gồm các điều khiển.
Chiều rộng và chiều cao của tài liệu
Đây là toàn bộ chiều rộng và chiều cao của trang web của bạn. Nếu các kích thước này lớn hơn chiều rộng và chiều cao Live, thì trình duyệt sẽ hiển thị thanh cuộn khi cần.

Bây giờ bạn đã biết các thuật ngữ cho các ranh giới mà bạn có thể định vị các phần của trang web của mình bằng CSS, hãy xem bốn giá trị vị trí.

Tĩnh
Đây là mặc định. Trừ khi bạn chỉ định khác cho một yếu tố, trình duyệt sẽ sử dụng định vị tĩnh. Giống như âm thanh, với định vị tĩnh, bạn không thể định vị lại các thành phần trên trang web. Vậy làm thế nào để trình duyệt xác định nơi đặt từng đối tượng trên trang web của bạn? Nó định vị từng phần tử theo thứ tự xuất hiện trong mã HTML của bạn. Nếu bạn có một hình ảnh logo, sau đó là một lời chào và sau đó là thông báo bản quyền trong HTML của bạn, trình duyệt sẽ đặt chúng trên trang web theo thứ tự đó. Bạn không thể di chuyển lời chào trên hình ảnh logo.
Quan hệ
Định vị tương đối hoạt động giống như tĩnh ở chỗ thứ tự của các phần tử trong mã HTML kiểm soát luồng của các phần tử trên trang. Tuy nhiên, bạn có thể sử dụng định vị tương đối để kiểm soát vị trí của một yếu tố liên quan đến các yếu tố khác trên trang web.
Tuyệt đối
Khi bạn sử dụng định vị tuyệt đối với một yếu tố, điều này sẽ làm cho yếu tố đó độc lập với phần còn lại của trang web. Vì vị trí của nó không còn được xác định theo thứ tự của HTML, nên bạn sẽ cần sử dụng tọa độ X và Y để định vị phần tử.
đã sửa
Điều này hoạt động tương tự như định vị tuyệt đối. Tuy nhiên, phần tử có định vị cố định sẽ không cuộn với trang web. Đây là một tính năng hay để sử dụng cho logo hoặc menu mà bạn muốn hiển thị khi trang cuộn lên trên.

Video HướNg DẫN: [khóa học HTML/CSS] Cách dùng thẻ img và map để hiển thị hình ảnh html. (Có Thể 2024).

Các phần tử định vị trên một trang web với Thuộc tính vị trí CSS, HTML, CSS, thuộc tính vị trí CSS, định vị tĩnh, định vị tương đối, định vị tuyệt đối, định vị cố định, cách định vị các phần tử trên trang web, sử dụng CSS để định vị các phần tử trên trang web

Bài TrướC

TiếP Theo Bài ViếT

Bài ViếT Liên Quan

máy tính

Dungeon - Đánh giá trò chơi trên PC

Có Thể 2024

Một người kế thừa tinh thần cho loạt Dungeon Keeper, "Dungeon" cho một nỗ lực tốt nhưng bỏ lỡ rất nhiều điều khiến DK trở nên tuyệt vời. Giống như Dungeon Keeper, Dungeons là một trò chơi về, xây...

máy tính

Chọn định dạng hình ảnh phù hợp

Có Thể 2024

Khi đăng ảnh lên trang web của bạn, bạn có hai tùy chọn chính: Định dạng trao đổi đồ họa (GIF) hoặc Nhóm chuyên gia chụp ảnh chung (JPEG). Mỗi định dạng đều có điểm mạnh và điểm yếu khác nhau, vì vậy...