,

,

,

. Nhãn
khá thường được sử dụng trong bố cục của các trang web hiện đại để tạo lưới và đơn giản có nghĩa là một loại khối hoặc vùng chứa nào đó. Cũng có thể lồng các thẻ khác vào trong đó, điều này là không thể với tất cả các thành phần khối, vì vậy
thuận tiện để sử dụng. Các khối thường được xếp chồng lên nhau và không được chèn vào các phần tử nội tuyến. Các phần tử nội tuyến HTML là văn bản và CSS được sử dụng để tạo kiểu cho nó.
Với chiều rộng nội dung, tổng chiều rộng khối là tổng của các giá trị phần đệm bên phải và bên trái, lề, đường viền và chiều rộng. Ở một độ cao nhất định - từ phần đệm trên và dưới, lề, đường viền và chiều cao. Văn bản trong các thành phần khối được căn trái theo mặc định. Nếu một trong số chúng chứa các phần tử nội tuyến cùng với các phần tử khối thì một khối ẩn danh sẽ được tạo xung quanh các phần tử nội tuyến. Kiểu mặc định sẽ được áp dụng cho nó. Nó cũng sẽ kế thừa kiểu dáng đã chỉ định được gán cho cha mẹ của nó.
Luồng tài liệu
Luồng đề cập đến thứ tự hiển thị các thành phần trang, được xác định bởi các thuộc tính được chỉ định trong CSS. Trong trường hợp này, theo mặc định, các khối được xếp từ trên xuống dưới và nếu không đủ chỗ, các thẻ nội tuyến sẽ được chuyển sang dòng mới và sắp xếp từ trên xuống dưới và từ trái sang phải. Vị trí của một phần tử trên trang phụ thuộc vào vị trí của nó trong mã: nó càng cao thì nó càng được định vị sớm. Mỗi phần tử khối trông giống như một hình chữ nhật đẩy các phần tử lân cận của nó ra xa. Bạn có thể thay đổi hành vi này bằng cách sử dụng các thuộc tính đặc biệt. Căn chỉnh các khối nhất định vào giữa hoặc các cạnh của vùng chứa trong CSS được gọi là định vị.
Yếu tố định vị
Vị trí của các khối có thể được kiểm soát bằng cách sử dụng vị trí tuyệt đối và tương đối. Định vị được sử dụng để cung cấp cho các phần lớn của trang một vị trí cụ thể, để tạo các giao diện, cửa sổ bật lên và các yếu tố trang trí phức tạp. Thuộc tính chính được sử dụng để định vị các khối trong CSS là vị trí. Nó có bốn thuộc tính chính:
• liên quan đến;
• tuyệt đối;
• đã sửa;
• tĩnh.
Với sự trợ giúp của họ, bạn có thể chuyển đổi chế độ bố cục bằng cách chỉ định một trong bốn tham số: trên, phải, dưới hoặc trái. Ngoài ra còn có một thuộc tính để sắp xếp các lớp - z-index. Định vị với thuộc tính tĩnh thường không được sử dụng vì nó biểu thị vị trí mặc định của các khối. Do đó, việc sử dụng bất kỳ tham số nào đều không ảnh hưởng đến nó. Ba thuộc tính còn lại được sử dụng cho bố cục: tương đối, tuyệt đối, cố định.
Định vị tương đối
Định vị tương đối các khối trong CSS, tức là thuộc tính vị trí: tương đối có nghĩa là phần tử có thể được di chuyển và vị trí ban đầu của nó đã thay đổi. Khối như vậy vẫn còn trong luồng. Trên thực tế, người bị thay thế không phải chính anh ta mà là bản sao của anh ta. Giá trị thuộc tính được đặt để cho biết chính xác khối sẽ di chuyển theo hướng này hay hướng khác. Chúng thường được đo bằng pixel. Nhưng có thể chấp nhận sử dụng các đơn vị khác.

Sử dụng thuộc tính để định vị tương đối
Thuộc tính trên cùng di chuyển bản sao của một khối cụ thể lên hoặc xuống theo số pixel được chỉ định trong thuộc tính. Khi sử dụng nó, các phần tử nằm bên dưới hoặc bên trên vẫn giữ nguyên vị trí của chúng, vì trên thực tế, khối được dịch chuyển cũng không di chuyển đi đâu cả.
Thuộc tính dưới cùng di chuyển khối theo hướng ngược lại với thuộc tính trên cùng. Giá trị dương giúp di chuyển nó lên và giá trị âm giúp di chuyển nó xuống. Thuộc tính right và left lần lượt di chuyển phần tử sang phải và trái. Bằng cách kết hợp tất cả chúng, bạn có thể đặt vị trí chính xác của khối trên trang, dịch chuyển nó dọc theo trục tọa độ dọc và ngang. Nếu bạn tăng mức thụt lề, chúng sẽ được tính không phải từ cạnh của khối mà từ phần bù của bản sao sang một bên.

Định vị tuyệt đối
Vị trí tuyệt đối của các khối trong CSS được chỉ định bởi giá trị của thuộc tính vị trí tuyệt đối. Một phần tử được định vị hoàn toàn nằm ngoài luồng tài liệu và vị trí của nó được đảm nhận bởi các khối lân cận. Chiều rộng của phần tử như vậy được kéo dài tùy thuộc vào nội dung của nó và bạn có thể thay đổi nó bằng cách chỉ định giá trị nhất định thuộc tính trên, trái, phải, dưới. Định vị tuyệt đối các khối trong CSS rất hữu ích cho các tiêu đề. Nhưng vị trí: tuyệt đối không chỉ hoạt động với các khối mà còn cho phần tử nội tuyến.
Căn chỉnh các phần tử vào giữa
Phần tử nội tuyến tuyệt đối được định vị sẽ hoạt động giống hệt như phần tử nội tuyến. Do đó, định vị cũng có thể được sử dụng để kiểm soát văn bản trong CSS. Bạn có thể áp dụng một số thuộc tính mới cho nó, chẳng hạn như thay đổi chiều cao và chiều rộng. Căn giữa và căn dọc trong CSS sử dụng sự kết hợp của một số thuộc tính. Kiểm soát căn chỉnh theo chiều dọc của thuộc tính trên cùng. Nếu bạn muốn căn giữa một khối trong CSS, vùng chứa chính phải được định vị tương đối và phần tử căn chỉnh phải được định vị tuyệt đối. Vùng chứa cần đặt thuộc tính top: 50% và để di chuyển phần tử đi một nửa chiều cao của chính nó, hãy sử dụng thuộc tính dịch có giá trị “0, -50%”. Các phần tử được định vị tuyệt đối có thể được phân biệt trong kiểu mới, vì chúng có các thuộc tính không có sẵn cho các kiểu định vị khác.

Vị trí so với góc trên bên trái của trình duyệt
Các thuộc tính left, top, right và Bottom hoạt động khác nhau trên các phần tử được định vị tuyệt đối và tương đối. Đối với các phần tử tương đối, các thuộc tính này đặt độ lệch tương ứng với vị trí của phần tử. Những cái được định vị tuyệt đối chiếm một vị trí tương đối với một hệ thống nhất định tọa độ gắn với kích thước của cửa sổ trình duyệt. Điểm bắt đầu của hệ thống này là các góc của cửa sổ. Khi sử dụng thuộc tính left, phần thụt lề sẽ được tính từ phía bên trái của trình duyệt nhưng sẽ không có thanh cuộn. Thuộc tính top, khi được định vị tuyệt đối, sẽ chỉ định khoảng cách từ đầu trình duyệt đến đầu phần tử mà nó được áp dụng. Bằng cách kết hợp cả hai thuộc tính, phần tử có thể được di chuyển tương ứng với góc trên cùng bên trái của trình duyệt.

Vị trí so với góc trên bên phải của trình duyệt
Tương tự, bằng cách sử dụng thuộc tính right và top, bạn có thể nhấn một phần tử ở bên phải cửa sổ trình duyệt và thay đổi vị trí dọc của nó, di chuyển nó sang bên phải. góc trên cùng. Nếu thuộc tính bên phải được đặt thành giá trị âm, khối sẽ di chuyển ra ngoài viền cửa sổ. Sau đó, một thanh cuộn sẽ xuất hiện. Để di chuyển một phần tử xuống dưới, hãy sử dụng thuộc tính Bottom. Nó chỉ định thụt lề từ cạnh dưới cùng của cửa sổ trình duyệt đến cuối khối. Nếu giá trị của nó là âm thì thanh cuộn cũng xuất hiện vì phần tử được di chuyển ra ngoài Giơi hạn dươi cửa sổ trinh duyệt.
Hệ tọa độ để định vị tuyệt đối
Theo mặc định, tất cả các phần tử được định vị tuyệt đối đều được gắn với một hệ tọa độ - cửa sổ trình duyệt. Nhưng nó có thể được thay đổi bằng cách đưa ra một số vị trí tương đối của phần tử cha. Khi đó khối con sẽ thay đổi vị trí tùy thuộc vào khối cha. Nếu trong số các phần tử cha có một số phần tử có vị trí tương đối thì việc đếm được thực hiện từ phần tử gần nhất trong số chúng. Trong trường hợp này, vị trí mặc định sẽ từ những gì được chỉ định trong thẻ cơ thể.

Điểm tham chiếu cho phần tử được định vị tuyệt đối
Trước khi một phần tử được định vị tuyệt đối, nó ở một nơi nào đó được gọi là nguồn gốc ngầm định. Nếu một khối như vậy không được cấp thuộc tính, nó sẽ không di chuyển. Bạn có thể thay đổi nó bằng cách đặt thuộc tính lề. Nó sẽ hoạt động tương tự như các thuộc tính định vị. Nếu bạn không xác định giá trị của thuộc tính left và tất cả các thuộc tính khác thì nó sẽ bằng auto. Bạn cũng có thể sử dụng auto để trả các phần tử về vị trí ban đầu.

Định vị cố định
Một giá trị khác được cố định. Thuộc tính vị trí neo một phần tử vào một vị trí cụ thể. Định vị cố định thường được sử dụng để tạo menu trong CSS. Nó tương tự như tuyệt đối, nhưng khối cố định rơi ra khỏi dòng chảy. Ngay cả khi cuộn trang, phần tử như vậy sẽ vẫn được giữ nguyên, vì vậy sẽ rất thuận tiện khi sử dụng nó để tạo menu trong CSS. Điểm bắt đầu sẽ được gắn với cửa sổ trình duyệt. Nếu có một số khối được định vị, chúng được sắp xếp bằng cách sử dụng thuộc tính chỉ mục z. Với sự trợ giúp của nó, bạn có thể chồng các khối tương đối với các khối tuyệt đối nếu bạn cung cấp cho chúng chỉ mục tương ứng, được biểu thị dưới dạng số nguyên. Nó càng lớn thì khối sẽ càng cao.
Một trong mặt tốt nhất Những gì CSS làm 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 vài các loại khác nhauđịnh vị 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 của trang. phần tử cha. 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ử
,
,