Chiều rộng được tính như thế nào trong CSS?

Vị trí và kích thước của [các] hộp của phần tử đôi khi được tính tương ứng với một hình chữ nhật nhất định, được gọi là khối chứa phần tử. Khối chứa của một phần tử được định nghĩa như sau

1. Khối chứa trong đó các mạng sống là một hình chữ nhật được gọi là khối chứa ban đầu. Đối với phương tiện liên tục, nó có kích thước của và được neo tại điểm gốc canvas; . Thuộc tính 'hướng' của khối chứa ban đầu giống như đối với phần tử gốc
2. Đối với các phần tử khác, nếu vị trí của phần tử là 'tương đối' hoặc 'tĩnh', thì khối chứa được tạo bởi cạnh nội dung của hộp tổ tiên gần nhất
3. Nếu phần tử có 'vị trí. fixed', khối chứa được thiết lập bởi trong trường hợp phương tiện liên tục hoặc vùng trang trong trường hợp phương tiện được phân trang
4. Nếu phần tử có 'vị trí. tuyệt đối', khối chứa được thiết lập bởi tổ tiên gần nhất với 'tuyệt đối', 'tương đối' hoặc 'cố định', theo cách sau
   1. Trong trường hợp tổ tiên là một phần tử nội tuyến, khối chứa là hộp giới hạn xung quanh các hộp đệm của hộp nội tuyến đầu tiên và cuối cùng được tạo cho phần tử đó. Trong CSS 2. 1, nếu phần tử nội tuyến được chia thành nhiều dòng, khối chứa không được xác định
   2. Mặt khác, khối chứa được hình thành bởi tổ tiên

   Nếu không có tổ tiên như vậy, khối chứa là khối chứa ban đầu

Trong phương tiện được phân trang, một phần tử được định vị tuyệt đối được định vị tương ứng với khối chứa nó, bỏ qua mọi ngắt trang [như thể tài liệu liên tục]. Phần tử sau đó có thể bị hỏng trên một số trang

Đối với nội dung được định vị tuyệt đối phân giải thành một vị trí trên một trang khác với trang đang được trình bày [trang hiện tại] hoặc phân giải thành một vị trí trên trang hiện tại đã được hiển thị để in, máy in có thể đặt nội dung

• trên một vị trí khác trên trang hiện tại,
• trên một trang tiếp theo, hoặc
• có thể bỏ qua nó

Lưu ý rằng phần tử cấp khối được chia thành nhiều trang có thể có chiều rộng khác nhau trên mỗi trang và có thể có các giới hạn dành riêng cho thiết bị

[các] ví dụ

Không định vị, các khối chứa [C. B. ] trong tài liệu sau

   
      Illustration of containing blocks
   
   
      

      
This is text in the first paragraph...
      
This is text  in the 
      second paragraph.
      

   

được thành lập như sau

Đối với hộp được tạo bởi C. B. được thiết lập bởi htmlinitial C. B. [phụ thuộc vào UA]bodyhtmldiv1bodyp1div1p2div1em1p2strong1p2

Nếu chúng ta định vị "div1"

   #div1 { position: absolute; left: 50px; top: 50px }

khối chứa nó không còn là "body" nữa;

Nếu chúng ta định vị cả "em1"

   #div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }

bảng chứa các khối trở thành

Đối với hộp được tạo bởi C. B. được thiết lập bởi htmlinitial C. B. [phụ thuộc vào UA]bodyhtmldiv1initial C. B. p1div1p2div1em1div1strong1em1

Bằng cách định vị "em1", khối chứa nó trở thành hộp tổ tiên được định vị gần nhất [i. e. , được tạo bởi "div1"]

'chiều rộng'Giá trị.   . . Tự động. Ban đầu. tự độngÁp dụng cho. tất cả các phần tử nhưng không được thay thế các phần tử nội tuyến, các hàng trong bảng và các nhóm hàng Được kế thừa. không có phần trăm. tham khảo chiều rộng chứa blockMedia. Giá trị được tính toán. tỷ lệ phần trăm hoặc 'tự động' như đã chỉ định hoặc độ dài tuyệt đối

Thuộc tính này chỉ định các hộp

Thuộc tính này không áp dụng cho các phần tử không được thay thế. Độ rộng nội dung của các hộp của phần tử nội tuyến không được thay thế là độ rộng của nội dung được hiển thị bên trong chúng [trước bất kỳ độ lệch tương đối nào của phần tử con]. Nhớ lại rằng các hộp nội tuyến chảy vào. Chiều rộng của các hộp dòng được cung cấp bởi chúng, nhưng có thể bị rút ngắn bởi sự hiện diện của

Các giá trị có ý nghĩa như sau

Chỉ định chiều rộng của vùng nội dung bằng đơn vị chiều dài. Chỉ định chiều rộng phần trăm. Tỷ lệ phần trăm được tính tương ứng với chiều rộng của hộp được tạo. Nếu chiều rộng của khối chứa phụ thuộc vào chiều rộng của phần tử này, thì bố cục kết quả không được xác định trong CSS 2. 1. Ghi chú. Đối với các phần tử được định vị tuyệt đối có khối chứa dựa trên phần tử chứa khối, tỷ lệ phần trăm được tính tương ứng với chiều rộng của hộp đệm của phần tử đó. Đây là một thay đổi so với CSS1, trong đó tỷ lệ phần trăm chiều rộng luôn được tính theo hộp nội dung của phần tử gốc. autoThe width phụ thuộc vào giá trị của các thuộc tính khác. Xem các phần bên dưới

Giá trị âm cho là bất hợp pháp

[các] ví dụ

Ví dụ: quy tắc sau sửa độ rộng nội dung của đoạn văn là 100 pixel

p { width: 100px }

Các giá trị của phần tử , , và thuộc tính như được sử dụng cho bố cục phụ thuộc vào loại hộp được tạo và phụ thuộc vào nhau. [Giá trị được sử dụng cho bố cục đôi khi được gọi là. ] Về nguyên tắc, các giá trị được sử dụng giống như các giá trị được tính toán, với 'tự động' được thay thế bằng một số giá trị phù hợp và tỷ lệ phần trăm được tính toán dựa trên khối chứa, nhưng có những ngoại lệ. Các tình huống sau đây cần được phân biệt

1. các yếu tố nội tuyến, không thay thế
2. nội tuyến, các yếu tố thay thế
3. cấp độ khối, các phần tử không được thay thế trong luồng bình thường
4. cấp độ khối, các phần tử được thay thế trong luồng bình thường
5. yếu tố nổi, không thay thế
6. yếu tố nổi, thay thế
7. các yếu tố được định vị tuyệt đối, không thay thế
8. các yếu tố được định vị tuyệt đối, được thay thế
9. 'khối nội tuyến', các phần tử không được thay thế trong luồng thông thường
10. 'khối nội tuyến', các phần tử được thay thế trong luồng bình thường

Đối với Điểm 1-6 và 9-10, giá trị của 'trái' và 'phải' trong trường hợp các phần tử được định vị tương đối được xác định theo quy tắc trong

Ghi chú. Giá trị được sử dụng của 'chiều rộng' được tính bên dưới là giá trị dự kiến ​​và có thể phải được tính nhiều lần, tùy thuộc vào và , hãy xem phần bên dưới

tài sản không áp dụng. Giá trị được tính toán của 'auto' cho hoặc trở thành giá trị '0' được sử dụng

Giá trị được tính toán của 'auto' cho hoặc trở thành giá trị '0' được sử dụng

Nếu và cả hai đều có giá trị được tính là 'auto' và phần tử cũng có chiều rộng nội tại, thì chiều rộng nội tại đó là giá trị được sử dụng của

Nếu và cả hai đều có các giá trị được tính là 'auto' và phần tử không có chiều rộng nội tại nhưng có chiều cao nội tại và tỷ lệ nội tại;

[chiều cao đã sử dụng] * [tỷ lệ nội tại]

Nếu cả hai "height" và "auto" đều có giá trị tính toán là "auto" và phần tử này có tỷ lệ nội tại nhưng không có chiều cao hoặc chiều rộng nội tại, thì giá trị được sử dụng của "width" sẽ không được xác định trong CSS 2. 1. Tuy nhiên, có ý kiến ​​cho rằng, nếu bản thân chiều rộng của khối chứa không phụ thuộc vào chiều rộng của phần tử được thay thế, thì giá trị được sử dụng của 'chiều rộng' được tính từ phương trình ràng buộc được sử dụng cho các phần tử không được thay thế ở cấp độ khối trong luồng bình thường

Mặt khác, nếu có giá trị được tính là 'auto' và phần tử có chiều rộng nội tại, thì chiều rộng nội tại đó là giá trị được sử dụng của

Mặt khác, nếu có giá trị tính toán là 'auto', nhưng không có điều kiện nào ở trên được đáp ứng, thì giá trị được sử dụng sẽ trở thành 300px. Nếu 300px quá rộng để vừa với thiết bị, UAs nên sử dụng chiều rộng của hình chữ nhật lớn nhất có 2. 1 tỷ lệ và phù hợp với thiết bị thay thế

Các ràng buộc sau phải giữ trong số các giá trị được sử dụng của các thuộc tính khác

+ + + + + + = chiều rộng của

Nếu 'chiều rộng' không phải là 'tự động' và 'độ rộng đường viền bên trái' + 'phần đệm bên trái' + 'chiều rộng' + 'phần đệm bên phải' + 'chiều rộng đường viền bên phải' [cộng với bất kỳ 'lề-trái' nào

Nếu tất cả những điều trên có giá trị được tính toán khác với 'tự động', thì các giá trị được cho là "quá hạn chế" và một trong các giá trị được sử dụng sẽ phải khác với giá trị được tính toán của nó. Nếu thuộc tính của khối chứa có giá trị 'ltr', thì giá trị được chỉ định sẽ bị bỏ qua và giá trị được tính toán để làm cho đẳng thức đúng. Nếu giá trị của là 'rtl', điều này xảy ra thay vào đó

Nếu có chính xác một giá trị được chỉ định là 'tự động', thì giá trị được sử dụng của nó sẽ xuất phát từ đẳng thức

Nếu được đặt thành 'tự động', mọi giá trị 'tự động' khác sẽ trở thành '0' và theo sau đẳng thức kết quả

Nếu cả hai và là 'tự động', giá trị được sử dụng của chúng bằng nhau. Điều này căn giữa phần tử theo chiều ngang đối với các cạnh của khối chứa

Giá trị sử dụng của được xác định như đối với. Sau đó, các quy tắc được áp dụng để xác định lợi nhuận

Nếu hoặc được tính là 'tự động', giá trị được sử dụng của chúng là '0'

Nếu được tính là 'tự động', thì giá trị được sử dụng là chiều rộng "thu nhỏ cho vừa"

Tính toán chiều rộng thu nhỏ cho vừa với tương tự như tính toán chiều rộng của một ô trong bảng bằng thuật toán bố trí bảng tự động. đại khái. tính toán chiều rộng ưa thích bằng cách định dạng nội dung mà không ngắt dòng trừ nơi xảy ra ngắt dòng rõ ràng và cũng tính toán chiều rộng tối thiểu ưu tiên, e. g. , bằng cách thử tất cả các ngắt dòng có thể. CSS 2. 1 không xác định thuật toán chính xác. Thứ ba, tìm chiều rộng có sẵn. trong trường hợp này, đây là chiều rộng của khối chứa trừ đi các giá trị đã sử dụng của 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width'

Sau đó, chiều rộng co lại cho phù hợp là. tối thiểu [tối đa [chiều rộng tối thiểu ưa thích, chiều rộng khả dụng], chiều rộng ưu tiên]

Nếu hoặc được tính là 'tự động', giá trị được sử dụng của chúng là '0'. Giá trị sử dụng của được xác định như đối với

Đối với mục đích của phần này và phần tiếp theo, thuật ngữ "vị trí tĩnh" [của một phần tử] đại khái đề cập đến vị trí mà một phần tử sẽ có trong luồng bình thường. chính xác hơn

• Khối chứa vị trí tĩnh là khối chứa một hộp giả định có thể là hộp đầu tiên của phần tử nếu giá trị được chỉ định của nó là 'tĩnh' và 'số float' được chỉ định của nó là 'không'. [Lưu ý rằng do các quy tắc trong phép tính giả định này cũng có thể yêu cầu giả định một giá trị được tính khác cho 'hiển thị'. ]
• Vị trí tĩnh cho 'trái' là khoảng cách từ cạnh trái của khối chứa đến cạnh lề trái của hộp giả định sẽ là hộp đầu tiên của phần tử nếu thuộc tính của nó là 'tĩnh' và 'không' . Giá trị âm nếu hộp giả thuyết nằm bên trái của khối chứa
• Vị trí tĩnh cho 'phải' là khoảng cách từ cạnh phải của khối chứa đến cạnh lề phải của cùng một hộp giả định như trên. Giá trị dương nếu hộp giả định nằm bên trái cạnh của khối chứa

Nhưng thay vì thực sự tính toán kích thước của hộp giả định đó, các tác nhân người dùng có thể tự do đoán vị trí có thể xảy ra của nó

Với mục đích tính toán vị trí tĩnh, khối chứa các phần tử được định vị cố định là khối chứa ban đầu thay vì khung nhìn và tất cả các hộp có thể cuộn phải được giả định là được cuộn về điểm gốc của chúng

Ràng buộc xác định các giá trị được sử dụng cho các phần tử này là

'trái' + 'lề trái' + 'độ rộng đường viền bên trái' + 'phần đệm bên trái' + 'chiều rộng' + 'phần đệm bên phải' + 'độ rộng đường viền bên phải' + 'lề bên phải' + 'phải

Nếu cả ba 'trái', 'chiều rộng' và 'phải' là 'tự động'. Trước tiên, hãy đặt bất kỳ giá trị 'tự động' nào cho 'lề trái' và 'lề phải' thành 0. Sau đó, nếu thuộc tính 'direction' của phần tử thiết lập khối chứa vị trí tĩnh là 'ltr', hãy đặt 'left' thành và áp dụng quy tắc số ba bên dưới;

Nếu không có cái nào trong số ba cái là 'tự động'. Nếu cả 'lề-trái' và 'lề-phải' đều là 'tự động', hãy giải phương trình với ràng buộc bổ sung là hai lề có giá trị bằng nhau, trừ khi điều này làm cho chúng âm, trong trường hợp đó khi hướng của khối chứa là . Nếu một trong các 'lề trái' hoặc 'lề phải' là 'tự động', hãy giải phương trình cho giá trị đó. Nếu các giá trị bị giới hạn quá mức, hãy bỏ qua giá trị cho 'trái' [trong trường hợp thuộc tính 'hướng' của khối chứa là 'rtl'] hoặc 'phải' [trong trường hợp 'hướng' là 'ltr'] và giải quyết

Nếu không, hãy đặt các giá trị 'tự động' cho 'lề trái' và 'lề phải' thành 0 và chọn một trong sáu quy tắc sau áp dụng

1. 'trái' và 'chiều rộng' là 'tự động' và 'phải' không phải là 'tự động', khi đó chiều rộng sẽ được thu nhỏ lại cho vừa. Sau đó giải quyết cho 'trái'
2. 'trái' và 'phải' là 'tự động' và 'chiều rộng' không phải là 'tự động', thì nếu thuộc tính 'hướng' của phần tử thiết lập khối chứa vị trí tĩnh là 'ltr' đặt 'trái' thành , nếu không . Sau đó tìm 'trái' [nếu 'hướng' là 'rtl'] hoặc 'phải' [nếu 'hướng' là 'ltr']
3. 'chiều rộng' và 'phải' là 'tự động' và 'trái' không phải là 'tự động', khi đó chiều rộng sẽ được thu nhỏ lại cho vừa. Sau đó giải quyết cho 'đúng'
4. 'trái' là 'tự động', 'chiều rộng' và 'phải' không phải là 'tự động', sau đó tìm 'trái'
5. 'chiều rộng' là 'tự động', 'trái' và 'phải' không phải là 'tự động', sau đó tìm 'chiều rộng'
6. 'phải' là 'tự động', 'trái' và 'chiều rộng' không phải là 'tự động', sau đó tìm 'phải'

Tính toán chiều rộng thu nhỏ cho vừa với tương tự như tính toán chiều rộng của một ô trong bảng bằng thuật toán bố trí bảng tự động. đại khái. tính toán chiều rộng ưa thích bằng cách định dạng nội dung mà không ngắt dòng trừ nơi xảy ra ngắt dòng rõ ràng và cũng tính toán chiều rộng tối thiểu ưu tiên, e. g. , bằng cách thử tất cả các ngắt dòng có thể. CSS 2. 1 không xác định thuật toán chính xác. Thứ ba, tính toán chiều rộng có sẵn. điều này được tìm thấy bằng cách giải 'chiều rộng' sau khi đặt 'trái' [trong trường hợp 1] hoặc 'phải' [trong trường hợp 3] thành 0

Sau đó, chiều rộng co lại cho phù hợp là. tối thiểu [tối đa [chiều rộng tối thiểu ưa thích, chiều rộng khả dụng], chiều rộng ưu tiên]

Trong trường hợp này, áp dụng cho đến hết và bao gồm cả phương trình ràng buộc, nhưng phần còn lại được thay thế bằng các quy tắc sau

Nếu là 'tự động', giá trị được sử dụng là chiều rộng đối với các phần tử nổi

Giá trị được tính toán của 'auto' cho hoặc trở thành giá trị '0' được sử dụng

Chính xác như

'giá trị chiều rộng tối thiểu'.   . . Ban đầu. 0Áp dụng cho. tất cả các phần tử nhưng không được thay thế các phần tử nội tuyến, các hàng trong bảng và các nhóm hàng Được kế thừa. không có phần trăm. tham khảo chiều rộng chứa blockMedia. Giá trị được tính toán. tỷ lệ phần trăm theo quy định hoặc độ dài tuyệt đối

'giá trị chiều rộng tối đa'.   . . không ai. Ban đầu. không áp dụng cho. tất cả các phần tử nhưng không được thay thế các phần tử nội tuyến, các hàng trong bảng và các nhóm hàng Được kế thừa. không có phần trăm. tham khảo chiều rộng chứa blockMedia. Giá trị được tính toán. tỷ lệ phần trăm như đã chỉ định hoặc độ dài tuyệt đối hoặc 'không'

Hai thuộc tính này cho phép tác giả giới hạn độ rộng nội dung trong một phạm vi nhất định. Các giá trị có ý nghĩa như sau

Chỉ định chiều rộng được sử dụng tối thiểu hoặc tối đa cố định. Chỉ định tỷ lệ phần trăm để xác định giá trị được sử dụng. Tỷ lệ phần trăm được tính tương ứng với chiều rộng của hộp được tạo. Nếu chiều rộng của khối chứa âm, giá trị được sử dụng bằng không. Nếu chiều rộng của khối chứa phụ thuộc vào chiều rộng của phần tử này, thì bố cục kết quả không được xác định trong CSS 2. 1. none[Only on ] Không giới hạn chiều rộng của hộp

Giá trị âm cho và là bất hợp pháp

Trong CSS 2. 1, tác dụng của 'độ rộng tối thiểu' và 'độ rộng tối đa' trên bảng, bảng nội tuyến, ô bảng, cột bảng và nhóm cột không được xác định

Thuật toán sau đây mô tả cách hai thuộc tính ảnh hưởng đến thuộc tính

Các bước này không ảnh hưởng đến giá trị thực được tính toán của các thuộc tính trên

Tuy nhiên, đối với các phần tử được thay thế có tỷ lệ nội tại và cả hai và được chỉ định là 'tự động', thuật toán như sau

Chọn từ bảng các giá trị chiều cao và chiều rộng đã giải quyết cho vi phạm ràng buộc thích hợp. Lấy max-width và max-height là max[min, max] sao cho min ≤ max đúng. Trong bảng này w và h là viết tắt của kết quả tính toán chiều rộng và chiều cao bỏ qua các thuộc tính , , và. Thông thường, đây là chiều rộng và chiều cao nội tại, nhưng chúng có thể không có trong trường hợp các phần tử được thay thế bằng tỷ lệ nội tại

Ghi chú. Trong trường hợp chiều rộng hoặc chiều cao rõ ràng được đặt và thứ nguyên khác là tự động, việc áp dụng giới hạn tối thiểu hoặc tối đa cho phía tự động có thể gây ra tình trạng quá giới hạn. Thông số kỹ thuật rõ ràng trong hành vi nhưng nó có thể không phải là điều mà tác giả mong đợi. Thuộc tính phù hợp với đối tượng CSS3 có thể được sử dụng để thu được các kết quả khác nhau trong tình huống này

Constraint ViolationResolved WidthResolved Heightnonewhw > max-widthmax-widthmax[max-width * h/w, min-height]w  max-heightmax[max-height * w/h, min-width]max-heighth  max-width] and [h > max-height], where [max-width/w ≤ max-height/h]max-widthmax[min-height, max-width * h/w][w > max-width] and [h > max-height], where [max-width/w > max-height/h]max[min-width, max-height * w/h]max-height[w