Bạn nên biết cách sử dụng các thuộc tính CSS trên các phần tử. Bài viết này sẽ giải thích thuộc tính object-position và float với một ví dụ dễ hiểu
cú pháp
1. thuộc tính vị trí đối tượng. Cú pháp của thuộc tính vị trí đối tượng
object-position :
vị trí có thể là một giá trị số chỉ định khoảng cách từ bên trái của hộp nội dung [i. trục e x] và khoảng cách từ đầu hộp nội dung [i. e. , trục y]. Nó cũng có thể lấy các giá trị như trái, phải, trên, dưới và ban đầu và kế thừa chúng dưới dạng một chuỗi để chỉ định vị trí
2. tài sản nổi. Cú pháp của thuộc tính float
float : none|inherit|left|right|initial
phương pháp
Phương pháp 1. Sử dụng thuộc tính vị trí đối tượng
object-position property: The object position property is used to position any element within a container to the required position within the container. The < img > element or < video > element are mostly positioned within a container using the object position property.
cú pháp
Cú pháp cho thuộc tính vị trí đối tượng là
object-position: position
Vị trí có thể nhận các giá trị số, chuỗi cụ thể, tỷ lệ phần trăm, độ dài và giá trị bù cạnh. Một số giá trị được hiển thị trong các ví dụ bên dưới
/* Keyword values */ object-position: top; object-position: bottom; object-position: left; object-position: right; object-position: center; /* values */ object-position: 20% 80%; /* values */ object-position: 0 0; object-position: 3cm 9cm; object-position: 7ch 15em; /* Edge offsets values */ object-position: bottom 12px right 40px; object-position: right 4em bottom 15px; object-position: top 0 right 18px;
Ví dụ Hãy xem một ví dụ đơn giản về thuộc tính vị trí đối tượng và đặt img ở trên cùng bên trái của vùng chứa
!
đầu ra
Phương pháp 2. Sử dụng thuộc tính float
tài sản nổi. Thuộc tính float được sử dụng để thay đổi vị trí hình ảnh trong CSS sang cực bên trái hoặc cực bên phải của vùng chứa. Float được sử dụng để định vị một phần tử chỉ theo chiều ngang. Cú pháp của thuộc tính float như sau
float : none|inherit|left|right|initial
nơi đây,
bên trái. đặt phần tử ở cực bên trái của vùng chứa bên phải. đặt phần tử ở cực bên phải của vùng chứa kế thừa. kế thừa thuộc tính nổi từ cha mẹ của nó [div, phần tử ngữ nghĩa, v.v. ] không ai. phần tử được hiển thị ở vị trí ban đầu của nó như nó là
Hầu hết công việc chúng tôi đã thực hiện với CSS khá đơn giản. thay đổi phông chữ, màu sắc, khoảng cách và đường viền. Tất cả những thay đổi đó đều hữu ích và cần thiết, nhưng không phải là phần khó của CSS
Mọi thứ trở nên thú vị hơn khi bạn bắt đầu di chuyển nội dung trên trang
Tài sản
4!
Cách dễ nhất để di chuyển nội dung là thuộc tính
4. Nó sẽ lấy nội dung và di chuyển nó sang bên trái hoặc bên phải của trang!
Khi nội dung nổi di chuyển, bất kỳ nội dung nào theo sau nó sẽ di chuyển lên trên và chảy xung quanh nó. Điều đó có nghĩa là nội dung nổi sẽ di chuyển sang một bên của trang và văn bản khác sẽ tránh trùng lặp với nó
Như một ví dụ về
4 [và các thuộc tính CSS sau này trong chủ đề này], chúng tôi sẽ sử dụng một trang HTML có cấu trúc như thế này!
Part 1
……
Part 2
…
Để minh họa cách hoạt động của
4, chúng tôi sẽ áp dụng CSS này!
#happy { float: right; }Trang kết quả sẽ trông như thế này
Trang có áp dụng floatBạn có thể xem ví dụ này trong trình duyệt của mình nếu bạn thích. Bạn có thể chọn các biểu định kiểu khác nhau được mô tả ở đây và thử nghiệm với chiều rộng của nội dung để xem điều đó ảnh hưởng đến bố cục như thế nào
Như bạn có thể thấy, các
được di chuyển sang bên phải của trang và văn bản xuất hiện sau văn bản đó sẽ tránh chồng chéo lên văn bản đó, nhưng bên dưới hình, văn bản này sẽ kéo dài trở lại phía bên phải của trangCũng lưu ý. vị trí thẳng đứng của hình không thay đổi. nó ở ngay bên dưới cái đầu tiên
, nơi bạn mong đợi. Nó chỉ di chuyển sang bên phải. Đoạn sau được chuyển lên trên và có các dòng được gói lại
Tài sản
#happy { float: right; }0Khi trôi nổi một số nội dung như vậy, thông thường không nhất thiết phải biết chính xác những gì sẽ theo sau. Nếu bạn có một khối nổi lớn, có thể khó dự đoán nó sẽ tương tác như thế nào với nội dung theo sau
Trong ví dụ trên, bạn có thể thấy rằng phần thứ hai bắt đầu trong khi nội dung nổi vẫn ở bên phải của nó. Sẽ là bất thường khi bắt đầu một phần khác của trang trong khi nội dung từ phần trước đó vẫn còn đó. thật tuyệt nếu di chuyển nội dung sau xuống bên dưới hình nổi
Thuộc tính
#happy { float: right; }0 chỉ làm điều này. nó nói với trình duyệt rằng bạn muốn di chuyển một phần nội dung xuống cho đến khi không có gì nổi bên cạnh nó. bên trái, bên phải hoặc cả hai bênĐể giải quyết vấn đề bắt đầu một phần mới với nội dung nổi bên cạnh nó, chúng ta có thể làm điều gì đó như thế này trong CSS
0float : none|inherit|left|right|initial
Nó sẽ trông như thế này trong trình duyệt, như sau
di chuyển xuống cho đến khi không có gì nổi ở bên trái hoặc bên phải của nó. Trang được áp dụng float và xóaChúng tôi cũng có thể chỉ định
#happy { float: right; }2 trong trường hợp này, vì không có gì nổi ở bên trái. Có lẽ sẽ đầy đủ hơn khi chỉ định#happy { float: right; }3. chúng tôi sẽ không muốn bắt đầu một phần với bất kỳ thứ gì nổi ở bên trái nếu chúng tôi đã làm điều đó sau trên một số trang khác. Bạn cũng có thể thử nghiệm với ví dụ nàyCác tài sản
4 và!
#happy { float: right; }0 hoạt động tốt. Tuy nhiên, có nhiều ý tưởng thiết kế trực quan mà bạn có thể muốn thực hiện nhưng lại rất khó ánh xạ vào các thao tác thả nổi. Trong những trường hợp đó, chúng ta cần tìm kiếm một công cụ mạnh mẽ hơn…Tài sản
#happy { float: right; }6Thuộc tính
#happy { float: right; }6 vừa mạnh vừa nguy hiểm hơn4 và!
#happy { float: right; }0Đặt
00 trên một phần tử cho phép bạn sử dụng các thuộc tính CSSfloat : none|inherit|left|right|initial
01,float : none|inherit|left|right|initial
02,float : none|inherit|left|right|initial
03 vàfloat : none|inherit|left|right|initial
04 để di chuyển phần tử xung quanh trang đến chính xác nơi bạn muốn. Ví dụ: đặtfloat : none|inherit|left|right|initial
05 di chuyển phần tử sao cho đầu của phần tử cách đầu trang làfloat : none|inherit|left|right|initial
06float : none|inherit|left|right|initial
Điều này nghe có vẻ dễ dàng. Ví dụ: chúng ta có thể di chuyển hình ảnh lên trên cùng bên phải của trang như thế này
4object-position: position
Điều đó sẽ hiển thị như thế này. Bạn có thể thử nghiệm với ví dụ này và cả những ví dụ sau
Trang bị sai vị tríBạn có thể thấy vấn đề với
#happy { float: right; }6. ngay khi bạn bắt đầu định vị nội dung, nội dung đó sẽ bị loại khỏi luồng nội dung thông thường trên trang và sẽ chồng lên nội dung khác. Đây là điều bạn phải hết sức lưu ý khi sử dụng#happy { float: right; }6. bạn cần nghĩ đến tất cả các cách có thể để nội dung của bạn có thể trùng lặp trên các thiết bị và kích thước cửa sổ khác nhauVẫn còn một số cách định vị tuyệt đối có thể hữu ích. Ví dụ: chúng tôi có thể cho phép chồng chéo nhưng làm cho nó trông ổn với
09 để làm cho nội dung trong mờfloat : none|inherit|left|right|initial
8object-position: position
Giá trị âm
40 di chuyển con số phía sau nội dung khác. Điều đó có vẻ hợp lý. chúng tôi có thể cho phép nội dung chồng lên nhau, nhưng không sao vì kiểu dáng khác được thực hiện với nội dung đóobject-position: position
Trang có định vị và minh bạchMột cách sử dụng tốt khác của định vị tuyệt đối. di chuyển nội dung xung quanh khi bạn biết chính xác mình có bao nhiêu dung lượng để làm việc. Ví dụ ở đây ta sẽ chuyển hình lên đầu trang. kỹ thuật này có thể hữu ích cho menu hoặc tiêu đề trang [có tiêu đề trang, logo và menu]
0/* Keyword values */ object-position: top; object-position: bottom; object-position: left; object-position: right; object-position: center; /* values */ object-position: 20% 80%; /* values */ object-position: 0 0; object-position: 3cm 9cm; object-position: 7ch 15em; /* Edge offsets values */ object-position: bottom 12px right 40px; object-position: right 4em bottom 15px; object-position: top 0 right 18px;
Ở đây, hình nằm ở đầu trang, lấy toàn bộ chiều rộng của nó. Hình ảnh [chỉ nội dung trong đó] có kích thước chính xác là cao
41object-position: position
Trang có định vị và định cỡ cẩn thậnSẽ không có trùng lặp miễn là chúng tôi đảm bảo nội dung sau đây có lề trên
41 hoặc lớn hơn. Chọn cái đó trướcobject-position: position
khó khăn vì cách cấu trúc HTML, nhưng nó thể hiện ý định ở đây Có những giá trị khác có thể được trao cho
#happy { float: right; }6. Mặc định là44. Sử dụngobject-position: position
45 hoạt động giống nhưobject-position: position
44 nhưng bạn có thể điều chỉnh vị trí của phần tử tương ứng với vị trí của phần tử đó.object-position: position
Cài đặt
47 giống nhưobject-position: position
48, nhưng liên quan đến cửa sổ. những thứ cố định sẽ không di chuyển khi người dùng cuộn. Thậm chí còn có nhiều cơ hội hơn cho nội dung không mong muốn trùng lặp theo cách đóobject-position: position
Vị trí bạn đưa ra [với
01,float : none|inherit|left|right|initial
03, v.v.] cho phần tử được định vị tuyệt đối thường liên quan đến toàn bộ trang. trên cùng của toàn bộ trang, bên trái của trang, v.v. Điều này không đúng nếu bất kỳ phần tử nào chứa phần tử được định vị thì chính nó được định vị. Thủ thuật này đã được sử dụng trên trang ví dụ để làm cho mọi thứ trôi nổi/được định vị trong ví dụ. cácđã áp dụngfloat : none|inherit|left|right|initial
45, không phải để di chuyển nó mà để làm cho nó chứa vật nổi/được định vị bên trong nóobject-position: position
Khó khăn định vị
Như bạn có thể nhận thấy trong phần này [và trong khi thực hiện các bài tập], định vị mọi thứ theo cách bạn muốn trong CSS có thể khó khăn
Sử dụng
4 đủ dễ dàng nếu bạn đang làm những gì nó được thiết kế cho. hình nổi bên cạnh nội dung khác. Nếu bạn đủ may mắn để biết chính xác nội dung của mình lớn đến mức nào, thì có thể sử dụng!
#happy { float: right; }6 mà không gặp quá nhiều khó khănTuy nhiên, có nhiều cách khác mà bạn có thể muốn sắp xếp nội dung, nơi không rõ ràng ngay lập tức về cách đạt được chúng với
4 hoặc!
#happy { float: right; }6. một menu trong một cột ở bên trái của nội dung khác;Trong CSS Frameworks, chúng ta sẽ khám phá một số công cụ giúp định vị và định kiểu nội dung dễ dàng hơn
Làm cách nào để di chuyển hình ảnh trong CSS?
Cách di chuyển hình ảnh trong CSS .Sử dụng thuộc tính Object-Positionví dụ 1. Vị trí đối tượng. trung tâm hàng đầuví dụ 2. Vị trí đối tượng. Trên bên tráiví dụ 3. Vị trí đối tượng. Trên cùng bên phảiVí dụ 4. Vị trí đối tượng. Ban đầuSử dụng tài sản nổiLàm cách nào để định vị một hình ảnh trong CSS?
Bạn có thể dễ dàng định vị hình ảnh bằng cách sử dụng thuộc tính vị trí đối tượng . Bạn cũng có thể sử dụng nhiều cách khác như thuộc tính float sẽ được thảo luận thêm trong bài viết này. phương pháp. thuộc tính vị trí đối tượng. Chỉ định cách định vị phần tử hình ảnh với tọa độ x, y bên trong hộp nội dung của nó.Làm cách nào để căn chỉnh hình ảnh trong CSS?
Để căn giữa hình ảnh bằng Lưới CSS, bọc hình ảnh trong phần tử div vùng chứa và hiển thị lưới. Sau đó, đặt thuộc tính place-items thành trung tâm . P. S. các mục vị trí có giá trị trung tâm căn giữa mọi thứ theo chiều ngang và chiều dọc.