Chiều rộng CSS: phù hợp với nội dung

Việc hiểu các thuộc tính định cỡ CSS là cần thiết đối với các nhà phát triển muốn có sự linh hoạt để trình bày nội dung trang web một cách phù hợp

Trong CSS, chúng tôi xác định kích thước phần tử bằng cách sử dụng giá trị độ dài (_______0_______6,

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

7), tỷ lệ phần trăm và từ khóa. Mặc dù các loại giá trị độ dài và tỷ lệ phần trăm thường được sử dụng cho bố cục trang web nhưng chúng không phải lúc nào cũng phù hợp hoàn hảo

Trong một số ngữ cảnh, chúng tôi sử dụng các loại giá trị từ khóa, bao gồm

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

8,

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9 và

0

Trong hướng dẫn này, chúng tôi đề cập đến những giá trị từ khóa này là gì, sự khác biệt của chúng và cách chúng có thể áp dụng cho một dự án trong thế giới thực

Trước khi chúng tôi tiếp tục, đảm bảo bạn có hiểu biết cơ bản về CSS

Kích thước bên trong và bên ngoài

Hãy xem xét một phần tử

1 chứa nội dung có giá trị cố định

2 và

3 của

4

  nemo suscipitarchitectodeserunt vero, eveniet soluta deleniti alias dolor
  illum praesentium ipsa minus

Ở đây, chúng tôi đã cung cấp cho

1 một đường viền để xem phạm vi kích thước

Khi chúng tôi thay đổi kích thước tự nhiên của một phần tử bằng cách áp dụng một giá trị cụ thể cho nó, như đã thấy trong hình trên, chúng tôi gọi kích thước đó là kích thước bên ngoài

Mặt khác, khi kích thước của nội dung xác định kích thước của phần tử, chúng tôi gọi đó là kích thước nội tại hoặc kích thước tự nhiên

Bằng cách giới hạn kích thước của khối ở một kích thước cụ thể, chúng tôi gặp phải tình trạng tràn nội dung, một nhược điểm của kích thước bên ngoài

Tuy nhiên, chúng tôi có thể khắc phục hành vi không mong muốn để tạo bố cục tốt hơn bằng cách xác định kích thước nội tại của phần tử từ nội dung bằng các giá trị từ khóa

Giá trị từ khóa .s_2 { /* .. */ width: min-content; /* .. */ } 9

Theo ,

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9 là kích thước nhỏ nhất mà một hộp có thể lấy mà không làm tràn nội dung của nó

Đối với nội dung ngang,

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9 sử dụng độ dài của phần nội dung rộng nhất trong hộp phần tử và tự động đặt giá trị độ dài đó làm chiều rộng hộp

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

Nội dung trong trường hợp này bao gồm văn bản và nội dung như hình ảnh và video

Nếu chúng ta xem lại ví dụ về hộp ở trên, chúng ta có thể áp dụng

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9 cho phần tử hộp như vậy

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

Và chúng ta sẽ có bố cục này

Ở đây, với

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9, từ dài nhất trong nội dung xác định kích thước của hộp;

Ví dụ thực tế về giá trị từ khóa .s_2 { /* .. */ width: min-content; /* .. */ } 9

Để triển khai từ khóa

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9 trong một dự án trong thế giới thực, hãy xem xét các trường hợp sử dụng sau

Thêm chú thích cho hình ảnh

Trong trường hợp chúng tôi muốn đánh dấu một hình ảnh bằng chú thích theo chiều rộng của hình ảnh, chúng tôi có thể sử dụng

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9 để đạt được kết quả mong muốn một cách liền mạch

Hãy xem đoạn mã sau

Điều này cung cấp cho phần tử

figure {
  /* .. */
  width: min-content;
}

4 một đường viền để xem phạm vi kích thước

Vì

figure {
  /* .. */
  width: min-content;
}

4 là một phần tử khối, chiều rộng của nó đương nhiên chiếm phần tử vùng chứa của nó

Bằng cách gán một

2 của

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9 cho phần tử

figure {
  /* .. */
  width: min-content;
}

4, kích thước của nó được xác định bởi phần nội dung rộng nhất. Trong trường hợp này, bit rộng nhất là hình ảnh

figure {
  /* .. */
  width: min-content;
}

Điều này hiển thị đầu ra sau với hình ảnh xác định chiều rộng

Sizing grid và flexbox item

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9 cũng là một giá trị hợp lệ cho các thuộc tính định cỡ lưới và flex. Trong CSS, thuộc tính

0 của hệ thống flexbox đặt kích thước của hộp nội dung. Điều này làm cho từ khóa

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9 trở thành một giá trị lý tưởng để tự động nhận được kích thước tối thiểu nội tại của hộp

---

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các sự cố trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

---

Trong trường hợp này, chúng tôi sử dụng

2

Tương tự như vậy, trong một hệ thống lưới, chúng ta có thể gán từ khóa

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9 cho các thuộc tính

4 hoặc

5 để có được kích thước hộp tối thiểu nội tại

Hãy xem xét đoạn mã sau

Lưu ý rằng chúng tôi đã xóa nội dung của phần tử cho ngắn gọn

Hãy chuyển đổi cấu trúc thành bố cục dạng lưới và áp dụng từ khóa

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9

.grid {
  display: grid;
  grid-template-rows: min-content auto min-content;
  height: 100vh;
}

Với điều này, chúng tôi nhận được giá trị tối thiểu nội tại cho chiều cao nội dung mà không gây tràn

Nếu chúng tôi không áp dụng

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9, chúng tôi sẽ có hành vi khác. Để hình dung hành vi này, chúng ta có thể tạm thời loại bỏ

4 và áp dụng chiều cao cố định cho

9

.grid {
  ...
  /* grid-template-rows: min-content auto min-content; */
  ...
}
.header {
  ...
  height: 40px;
}

Với điều này, chúng tôi không còn nhận được kích thước nội dung tự nhiên. Trong trường hợp này, các ô phần tử có thể quá lớn so với nội dung của chúng, khiến nội dung tràn ra các ô

Giá trị từ khóa

0

Theo ,

0 đại diện cho kích thước lý tưởng của hộp trong một trục nhất định khi có không gian có sẵn vô hạn

Nói cách khác,

0 đại diện cho kích thước hộp cần chứa tất cả nội dung của nó mà không bị gói hoặc tràn hộp

Với điều này, hãy áp dụng một

0 cho một kích thước phần tử

  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 

Khi điều này ám chỉ, chúng tôi nhận được kết quả này

Ở đây, phần tử hộp đầu tiên lấy giá trị chiều rộng mặc định của

.grid {
  display: grid;
  grid-template-rows: min-content auto min-content;
  height: 100vh;
}

4, do đó chứa nhiều không gian nhất có thể cho phép của vùng chứa. Nhưng, khi áp dụng giá trị

0 cho cùng một hộp, chúng tôi nhận được kích thước nội dung chính xác của hộp

Giá trị từ khóa

0 là lý tưởng trong trường hợp chúng tôi cần chiều rộng tối đa của nội dung để quyết định kích thước của hộp

Một ví dụ thực tế về từ khóa giá trị

0

Hãy xem xét một cấu trúc bố trí lưới nơi chúng tôi áp dụng một

0 cho các cột lưới

HTML bao gồm những điều sau đây

  
Lorem
  

    Lorem ipsum dolor sit amet
  
  
Lorem ipsum dolor

Sau đó, thêm CSS

.container {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  /* .. */
}

Điều này hiển thị cột có giá trị

0 lấy kích thước nội dung trong khi cột có đơn vị

.grid {
  ...
  /* grid-template-rows: min-content auto min-content; */
  ...
}
.header {
  ...
  height: 40px;
}

0 lấy dung lượng còn lại

Tác dụng không mong muốn của

0

0, như chúng ta đã biết, hoạt động khá tốt đối với không gian có sẵn vô hạn, nơi phần tử hộp có thể chứa tất cả nội dung của nó mà không bị gói và làm tràn vùng chứa chính của nó

Tuy nhiên, trong trường hợp phần tử cha hoặc phần tử tổ tiên không thể chứa kích thước của hộp, hộp có xu hướng tràn

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

0

Việc thêm CSS sẽ đặt

2

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

1

Với mã này, chiều rộng tối đa nội tại của hộp dài hơn vùng chứa, gây tràn

Trong tình huống này, chúng tôi phải điều chỉnh nội dung hộp để phù hợp với không gian có sẵn của vùng chứa. Đây là nơi mà từ khóa

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

8 xuất hiện

Giá trị từ khóa .s_2 { /* .. */ width: min-content; /* .. */ } 8

Tùy thuộc vào kích thước của phần tử vùng chứa, khi áp dụng

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

8 cho phần tử hộp bên trong vùng chứa, hộp sẽ sử dụng kích thước

0, kích thước

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9 hoặc vùng chứa có sẵn làm kích thước lý tưởng của nó

Khi được cung cấp không gian có sẵn vô hạn,

0 xác định kích thước lý tưởng của hộp. Tuy nhiên, khi khung nhìn hẹp hơn, không gian có sẵn sẽ trở thành kích thước của hộp để tránh tràn cho đến khi hộp sử dụng

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9

Nếu chúng ta xem lại ví dụ trước, bằng cách áp dụng một

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

8 cho phần tử hộp, chúng ta có những điều sau đây

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

2

Lưu ý rằng chúng tôi phải sử dụng tiền tố nhà cung cấp

  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 

2 để sử dụng giá trị từ khóa này trên Mozilla Firefox

Như đã thấy trong GIF bên dưới, hộp sử dụng không gian có sẵn nhưng không bao giờ mở rộng ra ngoài

0 và khi khung nhìn hẹp hơn, hộp không bao giờ co lại ngoài

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9

Hàm

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

5

Cũng lưu ý rằng hàm

  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 

5 cho phép nhà phát triển xác định chiều rộng tối đa cho phép đối với kích thước của phần tử. Hàm CSS này thường định cỡ các cột và hàng của lưới bằng cách sử dụng lần lượt là

5 và

4

Sử dụng

  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 

5 chấp nhận đơn vị

  
Lorem
  

    Lorem ipsum dolor sit amet
  
  
Lorem ipsum dolor

0 hoặc

  
Lorem
  

    Lorem ipsum dolor sit amet
  
  
Lorem ipsum dolor

1 làm đối số

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

3

Tương tự như từ khóa

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

8, khi gán giá trị hàm này để xác định kích thước trong bố cục lưới, nó sẽ sử dụng đối số đã chỉ định làm kích thước hộp tối đa cho phép trong khi đảm bảo hộp không bao giờ vượt quá

0

Hãy xem xét cấu trúc bố cục lưới và áp dụng một

  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 

5 cho cột lưới

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

4

Trong CSS, chúng tôi thêm

  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 

5

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

5

Đối số được truyền cho

  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 

5phân biệt hai hàm

Trong cột đầu tiên của bố cục lưới, chúng tôi đã chuyển ____4_______4 làm đối số, do đó, cột có chiều rộng tối đa cho phép là ____4_______4 và cột thứ hai có chiều rộng tối đa cho phép là ____51_______9. Cột thứ ba lấy không gian vùng chứa còn lại vì nó được gán giá trị là

.grid {
  display: grid;
  grid-template-rows: min-content auto min-content;
  height: 100vh;
}

4

Các hộp có kích thước được xác định bởi

  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
  
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
 

5 không bao giờ mở rộng ra ngoài chiều rộng đã chỉ định đồng thời cũng không bao giờ vượt quá

0. Tuy nhiên, khi khung nhìn hẹp hơn, hộp có thể co lại để vừa với nội dung

Phần kết luận

Với các giá trị từ khóa nội tại, chúng tôi có thể linh hoạt trình bày nội dung trang theo những cách phù hợp nhất. Trong hướng dẫn này, chúng tôi đã đề cập đến cách sử dụng các giá trị từ khóa

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

9,

0 và

.s_2 {
  /* .. */
  width: min-content;
  /* .. */
}

8 với các ví dụ thực tế để bạn có thể bắt đầu sử dụng chúng trong các dự án của mình

Nếu bạn thích hướng dẫn này, hãy đảm bảo bạn chia sẻ nội dung này trên web. Và, nếu bạn có câu hỏi hoặc đóng góp, vui lòng chia sẻ suy nghĩ của bạn qua phần bình luận

Giao diện người dùng của bạn có ngốn CPU của người dùng không?

Khi giao diện người dùng web ngày càng phức tạp, các tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất cả người dùng của bạn trong sản xuất, hãy thử LogRocket. https. // tên lửa. com/đăng ký/

LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các chỉ số hiệu suất chính của giao diện người dùng, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, ghi nhật ký yêu cầu mạng và tự động hiển thị tất cả các lỗi

chiều rộng phù hợp là gì

Cách đặt chiều rộng div cho phù hợp

Bạn có nên sử dụng 100% chiều rộng?

Chiều rộng tối đa phù hợp là gì