Định vị phần tử Css3. CSS - Các phần tử khối định vị

Phần tử khối trong HTML là phần tử theo mặc định chiếm toàn bộ chiều rộng của phần tử gốc của nó. Phần tử cha có thể là phần tử khối khác hoặc cửa sổ trình duyệt. Bạn có thể đặt chiều rộng và chiều cao của phần tử khối bằng thuộc tính CSS. Các phần tử khối định vị là quá trình định vị chúng trong cửa sổ trình duyệt và liên quan đến chúng bằng cách sử dụng các thuộc tính CSS location , left , top , right và Bottom . Thuộc tính vị trí CSS được thiết kế để đặt một trong bốn loại định vị có sẵn: tĩnh (mặc định), tuyệt đối, cố định và tương đối. Các thuộc tính CSS còn lại, cụ thể là left , top , right và Bottom , được sử dụng để đặt khoảng cách tương ứng với các cạnh trái, trên, phải và dưới của phần tử cha. Ngoài ra, khi thiết lập một số thuộc tính nhất định, các phần tử khối có thể chồng lên nhau và tính năng này cũng có thể được sử dụng trên các trang web.

Định vị mặc định (tĩnh)

Nếu bạn không chỉ định vị trí cho một phần tử khối hoặc chỉ định static , điều này giống nhau thì các phần tử khối sẽ được sắp xếp theo thứ tự. Hơn nữa, khối tiếp theo (ví dụ: màu đỏ) nằm trên một dòng mới. Ngoài ra, vị trí này không bị ảnh hưởng bởi việc đặt khoảng cách left , top , right và Bottom .

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

Với định vị tuyệt đối, vị trí của một phần tử được chỉ định tương ứng với các cạnh của cửa sổ trình duyệt bằng cách sử dụng khoảng cách được chỉ định bởi các thuộc tính left , top , right và Bottom . Nếu bạn chỉ định khoảng cách trái và phải cùng một lúc và chúng xung đột với nhau thì ưu tiên sẽ được dành cho left , điều tương tự cũng xảy ra với top và Bottom , trong đó khoảng cách top được ưu tiên. Định vị tuyệt đối thường được sử dụng kết hợp với định vị tương đối cho mục đích thiết kế, khi cần đặt các phần tử khác nhau tương đối với nhau; nó cũng có thể được sử dụng để tạo menu thả xuống, bố cục trang web, v.v.

Định vị cố định

Định vị cố định khác với các loại định vị khác và không di chuyển cùng với nội dung khi bạn cuộn trang. Các phần tử khối có vị trí cố định được neo bằng cách sử dụng các thuộc tính left , top , right và Bottom vào các cạnh của cửa sổ trình duyệt. Định vị cố định được sử dụng để tạo giao diện khung (cửa sổ trình duyệt được chia thành nhiều khu vực), menu cố định, chân trang cố định và các khối “vĩnh viễn” (danh sách các liên kết, nút xã hội, v.v.).

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

Vị trí tương đối được chỉ định bằng cách chỉ định khoảng cách left , top , right và Bottom so với vị trí hiện tại của nó.

Tuy nhiên, vị trí khối này cũng có thể được tạo bằng thuộc tính lề.

Định vị tương đối không thú vị khi sử dụng riêng nó, nó chủ yếu được sử dụng cùng với định vị tuyệt đối.

Hãy xem xét các lựa chọn:

Một trong những điều tốt nhất về CSS là các kiểu cho chúng ta khả năng định vị nội dung và các thành phần trên một trang theo hầu hết mọi cách có thể tưởng tượng được. Điều này bổ sung cấu trúc cho thiết kế của chúng tôi và giúp làm cho nội dung trở nên trực quan hơn.

Có một số loại định vị khác nhau trong CSS, mỗi loại này có phạm vi riêng. Trong chương này, chúng ta sẽ xem xét một số trường hợp sử dụng khác nhau—tạo bố cục có thể sử dụng lại và định vị các phần tử dùng một lần duy nhất—và mô tả một số phương pháp để thực hiện điều đó.

Định vị qua float

Một cách để định vị các phần tử trên một trang là thông qua thuộc tính float. Thuộc tính này khá linh hoạt và có thể được sử dụng theo nhiều cách khác nhau.

Về cơ bản, thuộc tính float lấy một phần tử, xóa nó khỏi luồng thông thường của trang và đặt nó ở bên trái hoặc bên phải phần tử cha của nó. Tất cả các phần tử khác trên trang sẽ bao quanh phần tử đó. Ví dụ: các đoạn văn sẽ bao quanh một hình ảnh nếu phần tử thuộc tính float được thiết lập.

Khi thuộc tính float được áp dụng cho nhiều phần tử cùng một lúc, nó có thể tạo bố cục với các phần tử nổi cạnh hoặc đối diện nhau, như được hiển thị trong bố cục nhiều cột.

Thuộc tính float nhận một số giá trị, hai giá trị phổ biến nhất là left và right, cho phép phần tử nổi sang bên trái hoặc bên phải phần tử mẹ của nó.

Hình ảnh ( float: left; )

nổi trong thực tế

Hãy tạo bố cục trang chung với tiêu đề ở trên cùng, hai cột ở giữa và chân trang ở dưới cùng. Tốt nhất, trang này nên được đánh dấu bằng các phần tử