Hướng dẫn css inherit width from parent - chiều rộng kế thừa css từ cha mẹ

75

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Sự hiểu biết của tôi là width: 100% cho phép chiều rộng của phần tử giống như cha mẹ của nó, trong khi width: inherit chỉ làm điều đó khi chiều rộng của cha mẹ được chỉ định rõ ràng. Đây có phải là sự hiểu biết đúng không?

Nếu vậy, tôi có vẻ như khi width: inherit hoạt động, thì width: 100% sẽ luôn hoạt động, vì vậy bạn luôn có thể sử dụng cái sau. Sau đó, mục đích của việc viết width: inherit là gì? Khi nào nó trở nên hữu ích?

Nếu sự hiểu biết của tôi là sai, sự khác biệt giữa hai người là gì?

Tương tự với

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

2.

TIGT

1.6702 Huy hiệu vàng17 Huy hiệu bạc37 Huy hiệu đồng2 gold badges17 silver badges37 bronze badges

hỏi ngày 21 tháng 2 năm 2012 lúc 8:47Feb 21, 2012 at 8:47

Xem jsfiddle http://jsfiddle.net/bt5nj/2/ và http://jsfiddle.net/bt5nj/3/

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

3 kế thừa chiều rộng được xác định bởi cha mẹ.parent.

HTML:

  

      

  
​

CSS:

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

Điều này làm cho

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

4 chiều rộng 25%, nhưng nếu tôi xác định lại nó bằng

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

5, nó sẽ xác định chiều rộng là

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

4 50%.

​

MANU động mạch

8.1435 huy hiệu vàng56 Huy hiệu bạc67 Huy hiệu đồng5 gold badges56 silver badges67 bronze badges

Đã trả lời ngày 21 tháng 2 năm 2012 lúc 8:55Feb 21, 2012 at 8:55

Chuck Norrischuck NorrisChuck Norris

14.8K12 Huy hiệu vàng89 Huy hiệu bạc122 Huy hiệu đồng12 gold badges89 silver badges122 bronze badges

4

Từ khóa kế thừa CSS khiến phần tử lấy giá trị tính toán của thuộc tính từ phần tử cha của nó. Nó có thể được áp dụng cho bất kỳ thuộc tính CSS nào, bao gồm cả tài sản tốc ký của CSS. Đối với các thuộc tính được kế thừa, điều này củng cố hành vi mặc định và chỉ cần thiết để ghi đè một quy tắc khác.

.wrap { 
  width: 80%;
}

Các thuộc tính CSS có chiều rộng và chiều cao có được kế thừa theo mặc định không?

Ban đầu - Đặt chiều cao/chiều rộng thành giá trị mặc định của nó. kế thừa - chiều cao/chiều rộng sẽ được kế thừa từ giá trị cha mẹ của nó.

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

Làm thế nào để bạn có chiều rộng đầy đủ của một div cha mẹ?

Phương pháp 2: Chúng ta có thể tạo thuộc tính hiển thị của container con thành hàng bảng và hiển thị thuộc tính của container cha mẹ thành bảng, sẽ lấy tất cả chiều cao có sẵn từ phần tử div cha mẹ. Để che tất cả các chiều rộng, chúng ta có thể làm cho chiều rộng của div cha mẹ lên 100%.

Thuộc tính

  #parent {
      width:50%;
      height:30px;
  }

  #child {
      width:inherit;
      height:100%;
      background-color:red;
  }

7 trong CSS chỉ định chiều rộng của khu vực nội dung phần tử. Khu vực nội dung của người Viking này là phần bên trong phần đệm, đường viền và lề của một phần tử (mô hình hộp).

Đối với các phần tử được định vị hoàn toàn có khối chứa dựa trên phần tử thùng chứa khối, tỷ lệ phần trăm được tính toán theo chiều rộng của hộp đệm của phần tử đó.

Giá trị từ khóa

Với một số giá trị từ khóa đặc biệt, có thể xác định chiều rộng (và/hoặc chiều cao) theo nội dung của phần tử.

.wrap { 
  width: 80%;
}

7

Giá trị

.wrap { 
  width: 80%;
}

7 là thước đo nhỏ nhất phù hợp với nội dung của nó nếu tất cả các cơ hội bọc mềm trong hộp được thực hiện.soft wrap opportunities within the box were taken.

Ví dụ tốt nhất cho loại giá trị này là một phần tử

.wrap { 
  width: 80%;
}

9 được viết đúng:

Một con mèo con đáng yêu mà chúng tôi có trong hình ảnh này được gói gọn trong một yếu tố hình. Làm thế nào thân yêu, hãy nhìn xem chú thích này là bao lâu! ________ 4What a lovely kitten we got there in this image which is encapsulated in a figure element. How dear, look how long this caption is!

Khi chúng tôi đã áp dụng một số kiểu cơ bản cho đánh dấu này, chúng tôi sẽ nhận được:

Nếu chúng ta muốn phần tử hình đó về cơ bản là kích thước của hình ảnh đó, vì vậy văn bản kết thúc ở các cạnh của hình ảnh. Chúng ta có thể nổi nó sang trái hoặc phải, bởi vì Float sẽ thể hiện cùng một loại hành vi thu nhỏ để phù hợp, nhưng nếu chúng ta muốn tập trung vào nó thì sao?

.wrap { 
  width: 80%;
}

7 cho phép chúng tôi tập trung nó:

Bởi vì chúng tôi đã chỉ định

.wrap { 
  width: 80%;
}

7 cho phần tử

.wrap { 
  width: 80%;
}

9, nên nó có độ rộng tối thiểu có thể có khi thực hiện tất cả các cơ hội bọc mềm (như khoảng trống giữa các từ) để nội dung vẫn phù hợp với hộp.

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

3

Tài sản

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

3 đề cập đến số đo hẹp nhất mà một hộp có thể thực hiện trong khi phù hợp với nội dung của nó - nếu không có cơ hội bọc mềm trong phần tử được thực hiện.

Kiểm tra những gì xảy ra nếu chúng tôi áp dụng điều này cho bản demo mèo con/hình đơn giản của chúng tôi:

Bởi vì chú thích rất dài hơn hình ảnh rộng (nó không có bất kỳ cơ hội bọc mềm nào, giống như khoảng trống giữa các từ), nó có nghĩa là nó phải hiển thị chú thích trên một dòng, do đó

.wrap { 
  width: 80%;
}

9 rộng như vậy hàng.

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

6

???. Một trong những bí ẩn lớn của cuộc sống.

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

7

Giá trị

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

7 gần tương đương với

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

9 và

0 trong hành vi, ngoại trừ nó hoạt động cho các chiều rộng không xác định.

Chẳng hạn, hãy để nói rằng chúng ta cần tập trung vào một điều hướng nội tuyến trên trang. Đặt cược tốt nhất của bạn sẽ là áp dụng

1 cho

2 và

3 cho

4. Điều này sẽ cung cấp cho bạn một cái gì đó như thế này:

Tuy nhiên, nền màu xanh (từ phần tử

2) lan truyền trên toàn bộ tài liệu vì

2 là phần tử cấp khối, có nghĩa là chiều rộng của nó chỉ bị hạn chế bởi phần tử chứa của nó. Điều gì sẽ xảy ra nếu chúng ta muốn có nền màu xanh sụp đổ xung quanh các mục danh sách?

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

7 để giải cứu!

Với

.wrapper-1 {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}

.wrapper-2 {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

7 và

9, điều này hoạt động giống như một sự quyến rũ và chỉ có điều hướng có nền màu, không phải toàn bộ chiều rộng tài liệu.

Nếu bạn tham gia vào loại điều này, bạn sẽ rất vui khi biết công thức để xác định kích thước của độ dài hàm lượng phù hợp là:

fit-content = min(max-content, max(min-content, fill-available))

Đây là một giá trị khá không sử dụng, vì vậy nếu bạn đưa ra một trường hợp sử dụng tuyệt vời, hãy cho chúng tôi biết!

Hỗ trợ trình duyệt

I E	Bờ rìa	Firefox	Trình duyệt Chrome	Cuộc đi săn	Opera
Tất cả các	Tất cả các	Tất cả các	Tất cả các	Tất cả các	Tất cả các

Android chrome	Android Firefox	Trình duyệt Android	iOS safari	Opera Mobile
Tất cả các	Tất cả các	Tất cả các	Tất cả các	Tất cả các

Android chrome

Android Firefox

Là chiều rộng kế thừa trong CSS?

Làm thế nào để tôi thừa hưởng CSS từ cha mẹ?

Các thuộc tính CSS có chiều rộng và chiều cao có được kế thừa theo mặc định không?

Làm thế nào để bạn có chiều rộng đầy đủ của một div cha mẹ?