Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

html - Tại sao chiều cao: 100% trên phần tử con không được áp dụng khi phần tử cha có giá trị chiều cao tối thiểu/chiều cao tối đa nhưng không có giá trị chiều cao?

In lại Tác giả: Walker 123 Thời gian cập nhật: 28-11-2023 00:31:50 30 4
mua khóa gpt4 Nike

Giả sử chúng ta có thiết lập sau:

.container {
  màu nền: đỏ;
  chiều rộng: 500px;
  chiều cao tối thiểu: 300px;
}

.đứa trẻ {
  màu nền: xanh lam;
  chiều rộng: 500px;
  chiều cao: 100%;
}

rõ ràng,thùng chứa Phần tử khi được hiển thị có chiều cao được đặt thành 300px,Nhưng đứa trẻ Phần tử không có bất kỳ chiều cao nào, mặc dù được đặt thành 100%.

khithùng chứaĐặt chiều cao của phần tử thành số chẵn1pxgiờ,đứa trẻPhần tử sẽ đột nhiên lấp đầy toàn bộthùng chứa Chiều cao là 300px.

.container {
  màu nền: đỏ;
  chiều rộng: 500px;
  chiều cao tối thiểu: 300px;
  chiều cao: 1px;
}

.đứa trẻ {
  màu nền: xanh lam;
  chiều rộng: 500px;
  chiều cao: 100%;
}

Ngay cả khi chiều cao không được thiết lập,thùng chứa Các phần tử cũng sẽ được 300px được trình bày rõ ràng, vậy tại sao lại cần phải có đứa trẻ Đặt chiều cao của một phần tử trước khi áp dụng nó chiều cao: 100%?

EDIT: Nói rõ hơn, tôi không tìm giải pháp để làm cho chiều cao của trẻ chiếm toàn bộ phần tử gốc, tôi chỉ đang cố gắng hiểu tại sao điều này lại xảy ra.

câu trả lời hay nhất

Trong trường hợp đầu tiên, bạn không xác định bất kỳ chiều cao nào, vì vậy rõ ràng phần trăm chiều cao của trẻ sẽ không thành công.

từ đặc điểm kỹ thuật :

Chỉ định chiều cao phần trăm Tỷ lệ phần trăm được tính tương ứng với chiều cao của khối chứa của hộp được tạo nếu chiều cao của khối chứa không bằng. được chỉ định rõ ràng (tức là nó phụ thuộc vào chiều cao nội dung) và phần tử này không được định vị tuyệt đối, giá trị sẽ được tính thành 'tự động'.

chiều cao tối thiểu Chỉ là một đường viền, chiều cao của phần tử vẫn phụ thuộc vào nội dung của nó. Nếu bạn có nhiều hơn một 300px các phần tử thì các phần tử sẽ vượt quá 300px

.container {
  màu nền: đỏ;
  chiều rộng: 500px;
  chiều cao tối thiểu: 300px;
  phần đệm: 10px;
}

.đứa trẻ {
  màu nền: xanh lam;
  chiều rộng: 500px;
  chiều cao: 400px;
  hoạt hình: thay đổi tuyến tính vô hạn 2s thay thế;
}
@keyframe thay đổi{
   từ {
     chiều cao: 100px;
   }
}

Trong trường hợp thứ hai, bạn chỉ định chiều cao, do đó tỷ lệ phần trăm sẽ hoạt động, nhưng việc tính toán chiều cao phức tạp hơn một chút vì chúng tôi cũng có chiều cao tối thiểu

Thuật toán sau đây mô tả cách hai thuộc tính ảnh hưởng đến giá trị được sử dụng của thuộc tính 'height':

  1. Chiều cao dự kiến ​​sử dụng được tính toán (không có 'chiều cao tối thiểu' và 'chiều cao tối đa') theo các quy tắc trong phần "Tính chiều cao và lề" ở trên.
  2. Nếu chiều cao dự kiến ​​này lớn hơn 'max-height' thì các quy tắc ở trên sẽ được áp dụng lại, nhưng lần này sử dụng giá trị 'max-height' làm giá trị được tính toán cho 'height'.
  3. Nếu kết quả chiều cao nhỏ hơn 'chiều cao tối thiểu', các quy tắc trên được áp dụng lại, nhưng lần này sử dụng giá trị của 'chiều cao tối thiểu' là giá trị được tính cho 'chiều cao'.

Trong trường hợp thứ hai, có vẻ như bạn đã xác định rõ ràng chiều cao:300px Và tỷ lệ phần trăm sẽ tính đến giá trị đó. Trong trường hợp này, ngay cả khi nội dung lớn hơn, phần tử gốc sẽ không phát triển và sẽ bị tràn. Bạn thậm chí có thể định nghĩa bằng 0 chiều cao.

.container {
  màu nền: đỏ;
  chiều rộng: 500px;
  chiều cao tối thiểu: 300px;
  chiều cao: 0;
  phần đệm: 10px;
}

.đứa trẻ {
  màu nền: xanh lam;
  chiều rộng: 500px;
  chiều cao: 400px; 
  hoạt hình: thay đổi tuyến tính vô hạn 2s thay thế;
}
@keyframe thay đổi{
   từ {
     chiều cao: 100px;
   }
}

chiều cao tối đa Logic tương tự cũng xảy ra, nhưng trong trường hợp này chiều cao cần phải rất lớn

.container {
  màu nền: đỏ;
  chiều rộng: 500px;
  chiều cao tối đa: 300px;
  chiều cao: 99999px;
  phần đệm: 10px;
}

.đứa trẻ {
  màu nền: xanh lam;
  chiều rộng: 500px;
  chiều cao: 400px; 
  hoạt hình: thay đổi tuyến tính vô hạn 2s thay thế;
}
@keyframe thay đổi{
   từ {
     chiều cao: 100px;
   }
}

Nếu quan tâm, bạn có thể chuyển đổi logic của mình bằng cách sử dụng flexbox và bạn sẽ có thể làm những gì mình muốn mà không cần đặt chiều cao rõ ràng.

Dựa vào căn chỉnh căng mặc định trên trục ngang

.container {
  màu nền: đỏ;
  chiều rộng: 500px;
  chiều cao tối thiểu: 300px;
  hiển thị:flex;
}

.đứa trẻ {
  màu nền: xanh lam;
  chiều rộng: 500px;
  /* chiều cao: 100%;*/
}

Hoặc sử dụng phát triển linh hoạt Thuộc tính thay vì chiều cao trục chính:

.container {
  màu nền: đỏ;
  chiều rộng: 500px;
  chiều cao tối thiểu: 300px;
  hiển thị:flex;
  hướng flex: cột;
}

.đứa trẻ {
  màu nền: xanh lam;
  chiều rộng: 500px;
  flex-grow:0.8; /* đây là 80%, sử dụng 1 cho 100% */
}

CSS Grid cũng có thể giải quyết được vấn đề này

.container {
  màu nền: đỏ;
  chiều rộng: 500px;
  chiều cao tối thiểu: 300px;
  hiển thị:lưới;
  lưới-mẫu-hàng:1fr;
}

.đứa trẻ {
  màu nền: xanh lam;
  chiều rộng: 500px;
  chiều cao: 80%;
}

Về html - tại sao chiều cao là: 100% trên phần tử con không được áp dụng khi phần tử cha có giá trị chiều cao tối thiểu/chiều cao tối đa nhưng không có giá trị chiều cao?, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/58548583/

30 4 0
Đề xuất bài viết: html - "nth-last-child(1)" không nhắm mục tiêu phần tử cuối cùng
Đề xuất bài viết: C++ - Chuyển đổi int thành byte và viết phương thức kiểm tra tương ứng
Đề xuất bài viết: Cách chuyển tham chiếu mảng dưới dạng tham số từ tập hợp sang hàm C++
Đề xuất bài viết: std::list có trỏ đến cùng một bộ nhớ không?
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress