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 Show
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
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
đượ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)bodyhtmldiv1bodyp1div1p2div1em1p2strong1p2Nế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. p1div1p2div1em1div1strong1em1Bằ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ướiGiá 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
Đố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;
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
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
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à
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
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ộpGiá 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 < min-widthmin-widthmin(min-width * h/w, max-height)h > max-heightmax(max-height * w/h, min-width)max-heighth < min-heightmin(min-height * w/h, max-width)min-height(w > 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 < min-width) and (h < min-height), where (min-width/w ≤ min-height/h)min(max-width, min-height * w/h)min-height(w < min-width) and (h < min-height), where (min-width/w > min-height/h)min-widthmin(max-height, min-width * h/w)(w < min-width) and (h > max-height)min-widthmax-height(w > max-width) and (h < min-height)max-widthmin-heightSau đó áp dụng các quy tắc ở trên, như thể được tính như giá trị này 'chiều cao'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ột bảng và nhóm cột Được kế thừa. không có phần trăm. xem văn xuôiMedia. Giá trị được tính toán. tỷ lệ phần trăm hoặc 'tự động' (xem văn xuôi bên dưới) 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ế. Xem các quy tắc được sử dụng thay thế Các giá trị có ý nghĩa như sau Lưu ý rằng chiều cao của khối chứa phần tử được định vị tuyệt đối không phụ thuộc vào kích thước của chính phần tử đó và do đó, tỷ lệ phần trăm chiều cao trên phần tử đó luôn có thể được giải quyết. Tuy nhiên, có thể chiều cao không được biết cho đến khi các phần tử xuất hiện sau trong tài liệu được xử lý Giá trị âm cho là bất hợp pháp (các) ví dụ Ví dụ: quy tắc sau đặt chiều cao nội dung của đoạn văn thành 100 pixel p { height: 100px }
Các đoạn có chiều cao của nội dung vượt quá 100 pixel sẽ theo thuộc tính Để tính toán các giá trị của , , , , và phải phân biệt giữa các loại hộp khác nhau
Đối với Điểm 1-6 và 9-10, các giá trị được sử dụng của 'top' và 'bottom' được xác định theo các quy tắc trong phần 9. 4. 3 Ghi chú. các quy tắc này áp dụng cho phần tử gốc giống như bất kỳ phần tử nào khác Ghi chú. Giá trị được sử dụng của 'chiều cao' đượ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. Chiều cao của khu vực nội dung phải dựa trên phông chữ, nhưng thông số kỹ thuật này không chỉ định cách. Một UA có thể, e. g. , hãy sử dụng hộp thư đến hoặc phần tăng dần và giảm dần tối đa của phông chữ. (Cái sau sẽ đảm bảo rằng các nét chữ có các phần bên trên hoặc bên dưới hộp em-box vẫn nằm trong khu vực nội dung, nhưng dẫn đến các hộp có kích thước khác nhau cho các phông chữ khác nhau; cái trước sẽ đảm bảo tác giả có thể kiểm soát kiểu nền tương ứng với 'chiều cao dòng' . ) Ghi chú. cấp 3 của CSS có thể sẽ bao gồm một thuộc tính để chọn thước đo phông chữ nào được sử dụng cho chiều cao nội dung Phần đệm dọc, đường viền và lề của hộp nội tuyến, không được thay thế bắt đầu ở trên cùng và dưới cùng của khu vực nội dung và không liên quan gì đến. Nhưng chỉ the được sử dụng khi tính chiều cao của hộp dòng Nếu sử dụng nhiều hơn một phông chữ (điều này có thể xảy ra khi các nét tượng trưng được tìm thấy trong các phông chữ khác nhau), chiều cao của vùng nội dung không được xác định bởi thông số kỹ thuật này. Tuy nhiên, chúng tôi khuyên bạn nên chọn chiều cao sao cho khu vực nội dung vừa đủ cao cho (1) hộp thư đến hoặc (2) phần tăng dần và giảm dần tối đa của tất cả các phông chữ trong phần tử. Lưu ý rằng kích thước này có thể lớn hơn bất kỳ kích thước phông chữ nào có liên quan, tùy thuộc vào căn chỉnh đường cơ sở của phông chữ 10. 6. 2 Các phần tử được thay thế nội tuyến, các phần tử được thay thế ở cấp độ khối trong luồng thông thường, các phần tử được thay thế 'khối nội tuyến' trong luồng thông thường và các phần tử được thay thế nổiNếu hoặc là 'tự động', giá trị được sử dụng của chúng là 0 Nếu và cả hai đều có giá trị được tính là 'auto' và phần tử cũng có chiều cao nội tại, thì chiều cao 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à 'tự động' và phần tử có tỷ lệ nội tại thì giá trị được sử dụng là
Mặt khác, nếu có giá trị tính toán là 'auto' và phần tử có chiều cao nội tại, thì chiều cao 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ị đã sử dụng của phải được đặt thành chiều cao của hình chữ nhật lớn nhất có 2. 1, có chiều cao không lớn hơn 150px và có chiều rộng không lớn hơn chiều rộng của thiết bị Phần này cũng áp dụng cho các phần tử không được thay thế ở cấp độ khối trong luồng thông thường khi 'tràn' không được tính thành 'hiển thị' nhưng đã được truyền tới chế độ xem Nếu hoặc là 'tự động', giá trị được sử dụng của chúng là 0. Nếu là 'tự động', chiều cao phụ thuộc vào việc phần tử có bất kỳ phần tử con cấp khối nào hay không và phần tử đó có phần đệm hay đường viền hay không Chiều cao của phần tử là khoảng cách từ cạnh nội dung trên cùng của nó đến cạnh áp dụng đầu tiên sau đây
Chỉ trẻ em trong luồng bình thường được tính đến (i. e. , các ô nổi và các ô được định vị tuyệt đối sẽ bị bỏ qua và các ô được định vị tương đối được xem xét mà không tính đến phần bù của chúng). Lưu ý rằng hộp con có thể là một Đố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, vị trí tĩnh cho 'top' là khoảng cách từ cạnh trên của khối chứa đến cạnh lề trên của hộp giả định sẽ 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à . (Lưu ý rằng do các quy tắc trong phần này cũng có thể yêu cầu giả định một giá trị được tính toán khác cho 'hiển thị'. ) Giá trị âm nếu hộp giả thuyết nằm trên 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ó vị trí cố định là khối chứa ban đầu thay vì khung nhìn Đối với các phần tử được định vị tuyệt đối, các giá trị được sử dụng của kích thước dọc phải thỏa mãn ràng buộc này
Nếu cả ba 'top', 'height' và 'bottom' đều tự động, hãy đặt 'top' thành vị trí tĩnh và áp dụng quy tắc số ba bên dưới Nếu không ai trong số ba là 'tự động'. Nếu cả 'lề trên' và 'lề dướ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. Nếu một trong số 'lề trên' hoặc 'lề dướ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 'đáy' và giải quyết giá trị đó Nếu không, hãy chọn một trong sáu quy tắc sau áp dụng
Tình huống này tương tự như tình huống trước, ngoại trừ phần tử có chiều cao. Trình tự thay thế bây giờ là
Phần này áp dụng cho
Nếu hoặc là 'tự động', giá trị được sử dụng của chúng là 0. Nếu là 'tự động', thì Đối với các phần tử 'inline-block', hộp lề được sử dụng khi tính toán chiều cao của hộp dòng Trong một số trường hợp nhất định (xem, e. g. , phần trở lên), chiều cao của phần tử thiết lập bối cảnh định dạng khối được tính như sau Nếu nó chỉ có các con ở mức nội tuyến, thì chiều cao là khoảng cách giữa đỉnh của hộp dòng trên cùng và đáy của hộp dòng dưới cùng Nếu nó có con cấp khối, chiều cao là khoảng cách giữa cạnh lề trên của hộp con cấp khối trên cùng và cạnh lề dưới của hộp con cấp khối dưới cùng Các ô con ở vị trí tuyệt đối bị bỏ qua và các hộp có vị trí tương đối được xem xét mà không cần bù trừ. Lưu ý rằng hộp con có thể là một Ngoài ra, nếu phần tử có bất kỳ phần tử con nổi nào có cạnh lề dưới nằm dưới cạnh nội dung dưới cùng của phần tử, thì chiều cao sẽ được tăng lên để bao gồm các cạnh đó. Chỉ các số float tham gia vào bối cảnh định dạng khối này mới được tính đến, e. g. , float bên trong hậu duệ được định vị tuyệt đối hoặc float khác không Đôi khi rất hữu ích khi giới hạn chiều cao của các phần tử trong một phạm vi nhất định. Hai thuộc tính cung cấp chức năng này 'min-height'Value. . . 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ột bảng và nhóm cột Được kế thừa. không có phần trăm. xem văn xuôiMedia. Giá trị được tính toán. tỷ lệ phần trăm theo quy định hoặc độ dài tuyệt đối 'chiều cao tối đa'Giá trị. . . 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ột bảng và nhóm cột Được kế thừa. không có phần trăm. xem văn xuôiMedia. 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 chiều cao của hộp trong một phạm vi nhất định. Các giá trị có ý nghĩa như sau Chỉ định chiều cao tính toán 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 cao của hộp được tạo. Nếu chiều cao của khối chứa không được chỉ định rõ ràng (i. e. , 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ị phần trăm được coi là '0' (đối với ) hoặc 'không' (đối với ). none(Only on ) Không giới hạn chiều cao của hộpGiá trị âm cho và là bất hợp pháp Trong CSS 2. 1, hiệu ứng của 'chiều cao tối thiểu' và 'chiều cao tối đa' trên bảng, bảng nội tuyến, ô bảng, hàng của bảng và nhóm hàng 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. Việc thay đổi đã sử dụng không ảnh hưởng đến việc thu hẹp ký quỹ trừ khi được yêu cầu cụ thể bởi các quy tắc cho hoặc trong Tuy nhiên, đối với các phần tử được thay thế bằng cả hai và được tính là 'tự động', hãy sử dụng thuật toán bên dưới để tìm chiều rộng và chiều cao đã sử dụng. Sau đó, áp dụng các quy tắc ở trên, sử dụng chiều rộng và chiều cao kết quả như thể chúng là các giá trị được tính toán Như được mô tả trong phần trên, tác nhân người dùng chuyển các hộp cấp độ nội tuyến vào một ngăn xếp dọc của. Chiều cao của hộp dòng được xác định như sau
Các phần tử nội tuyến trống tạo ra các hộp nội tuyến trống, nhưng các hộp này vẫn có lề, phần đệm, đường viền và chiều cao của dòng và do đó ảnh hưởng đến các tính toán này giống như các phần tử có nội dung CSS giả định rằng mọi phông chữ đều có chỉ số phông chữ xác định chiều cao đặc trưng bên trên đường cơ sở và độ sâu bên dưới nó. Trong phần này, chúng tôi sử dụng A để chỉ chiều cao đó (đối với một phông chữ nhất định ở một kích thước nhất định) và D độ sâu. Ta cũng định nghĩa AD = A + D, khoảng cách từ đỉnh đến đáy. (Xem ghi chú bên dưới để biết) Lưu ý rằng đây là số liệu của toàn bộ phông chữ và không cần phải tương ứng với phần tăng dần và phần giảm dần của bất kỳ nét chữ riêng lẻ nào Tác nhân người dùng phải căn chỉnh các ký tự trong hộp nội tuyến không được thay thế với nhau theo các đường cơ sở có liên quan của chúng. Sau đó, đối với mỗi nét vẽ, hãy xác định A và D. Lưu ý rằng glyphs trong một phần tử có thể đến từ các phông chữ khác nhau và do đó không nhất thiết phải có cùng A và D. Nếu hộp nội tuyến hoàn toàn không chứa glyph, thì nó được coi là chứa (một glyph vô hình có chiều rộng bằng 0) với A và D của phông chữ khả dụng đầu tiên của phần tử Tuy nhiên, đối với mỗi nét vẽ, hãy xác định chữ L hàng đầu để thêm vào, trong đó L = - AD. Một nửa phần đầu được thêm vào phía trên A và nửa còn lại bên dưới D, tạo cho hình tượng và phần đầu của nó có tổng chiều cao trên đường cơ sở là A' = A + L/2 và tổng chiều sâu là D' = D + L/2 Ghi chú. L có thể âm Chiều cao của hộp nội tuyến bao quanh tất cả các hình tượng và nửa đầu của chúng ở mỗi bên và do đó chính xác là 'chiều cao dòng'. Hộp các phần tử con không ảnh hưởng đến chiều cao này Mặc dù lề, đường viền và phần đệm của các phần tử không được thay thế không tham gia vào phép tính hộp dòng, nhưng chúng vẫn được hiển thị xung quanh hộp nội tuyến. Điều này có nghĩa là nếu chiều cao được chỉ định bởi nhỏ hơn chiều cao nội dung của các hộp được chứa, nền và màu của phần đệm và đường viền có thể "chảy máu" vào các hộp dòng liền kề. Tác nhân người dùng nên hiển thị các hộp theo thứ tự tài liệu. Điều này sẽ làm cho các đường viền trên các dòng tiếp theo tô lên các đường viền và văn bản của các dòng trước đó Ghi chú. CSS 2. 1 không xác định khu vực nội dung của hộp nội tuyến là gì (xem bên trên) và do đó, các UA khác nhau có thể vẽ nền và đường viền ở những vị trí khác nhau Ghi chú. Các triển khai sử dụng phông chữ OpenType hoặc TrueType nên sử dụng chỉ số "sTypoAscender" và "sTypoDescender" từ bảng OS/2 của phông chữ cho A và D (sau khi chia tỷ lệ thành kích thước phông chữ của phần tử hiện tại). Trong trường hợp không có các chỉ số này, nên sử dụng chỉ số "Đi lên" và "Đi xuống" từ bảng HHEA Trên một nội dung bao gồm các phần tử, 'line-height' chỉ định chiều cao tối thiểu của các hộp dòng trong phần tử. Chiều cao tối thiểu bao gồm chiều cao tối thiểu phía trên đường cơ sở và độ sâu tối thiểu bên dưới nó, chính xác như thể mỗi hộp dòng bắt đầu bằng hộp nội tuyến có chiều rộng bằng 0 với các thuộc tính chiều cao dòng và phông chữ của phần tử. Chúng tôi gọi hộp tưởng tượng đó là "thanh chống. " (Cái tên lấy cảm hứng từ TeX. ) Chiều cao và độ sâu của phông chữ bên trên và bên dưới đường cơ sở được giả định là số liệu có trong phông chữ. (Để biết thêm chi tiết, hãy xem CSS cấp 3. ) Trên phần tử không được thay thế, 'line-height' chỉ định chiều cao được sử dụng trong tính toán chiều cao của hộp dòng Các giá trị cho thuộc tính này có ý nghĩa như sau normalYêu cầu tác nhân người dùng đặt giá trị đã sử dụng thành giá trị "hợp lý" dựa trên phông chữ của phần tử. Giá trị có cùng ý nghĩa với. Chúng tôi đề xuất một giá trị được sử dụng cho 'bình thường' giữa 1. 0 đến 1. 2. là 'bình thường'. Độ dài đã chỉ định được sử dụng trong tính toán chiều cao của hộp dòng. Giá trị âm là bất hợp pháp. Giá trị được sử dụng của thuộc tính là số này nhân với kích thước phông chữ của phần tử. Giá trị âm là bất hợp pháp. Giống như giá trị được chỉ định. Thuộc tính là tỷ lệ phần trăm này nhân với kích thước phông chữ được tính toán của phần tử. Giá trị âm là bất hợp pháp(các) ví dụ Ba quy tắc trong ví dụ dưới đây có cùng chiều cao dòng kết quả div { line-height: 1.2; font-size: 10pt } /* number */
div { line-height: 1.2em; font-size: 10pt } /* length */
div { line-height: 120%; font-size: 10pt } /* percentage */
Khi một phần tử chứa văn bản được hiển thị bằng nhiều phông chữ, tác nhân người dùng có thể xác định giá trị 'bình thường' theo kích thước phông chữ lớn nhất Ghi chú. Khi chỉ có một giá trị của cho tất cả các hộp nội tuyến trong hộp chứa khối và tất cả chúng đều có cùng một phông chữ (và không có phần tử thay thế, phần tử khối nội tuyến, v.v. ), điều trên sẽ đảm bảo rằng các đường cơ sở của các dòng liên tiếp cách nhau chính xác. Điều này rất quan trọng khi các cột văn bản ở các phông chữ khác nhau phải được căn chỉnh, ví dụ như trong một bảng 'căn chỉnh dọc'Giá trị. đường cơ sở. phụ. siêu. hàng đầu. văn bản trên cùng. tên đệm. đáy. văn bản dưới cùng. . . Ban đầu. đường cơ sởÁp dụng cho. Các phần tử cấp độ nội tuyến và 'ô bảng' Được kế thừa. không có phần trăm. tham khảo 'line-height' của chính phần tửMedia. Giá trị được tính toán. cho và độ dài tuyệt đối, nếu không thì như được chỉ định Thuộc tính này ảnh hưởng đến vị trí dọc bên trong hộp dòng của các hộp được tạo bởi phần tử cấp độ nội tuyến Ghi chú. Các giá trị của thuộc tính này có ý nghĩa khác nhau trong ngữ cảnh của các bảng. Vui lòng tham khảo phần trên để biết chi tiết Các giá trị sau chỉ có ý nghĩa đối với phần tử nội tuyến gốc hoặc đối với phần tử bộ chứa khối gốc Trong các định nghĩa sau, đối với các phần tử không được thay thế nội tuyến, hộp được sử dụng để căn chỉnh là hộp có chiều cao là 'chiều cao dòng' (chứa các nét tượng trưng của hộp và nửa đầu ở mỗi bên, xem ). Đối với tất cả các phần tử khác, hộp được sử dụng để căn chỉnh là hộp lề đường cơ sởCăn chỉnh đường cơ sở của hộp với đường cơ sở của hộp chính. Nếu hộp không có đường cơ sở, hãy căn chỉnh cạnh lề dưới với đường cơ sở của hộp chính. middleCăn chỉnh trung điểm dọc của hộp với đường cơ sở của hộp chính cộng với một nửa chiều cao x của hộp chính. hạ thấp đường cơ sở của hộp xuống vị trí thích hợp cho các chỉ số dưới của hộp cha. (Giá trị này không ảnh hưởng đến kích thước phông chữ của văn bản phần tử. ) superNâng đường cơ sở của hộp lên vị trí thích hợp cho các chỉ số trên của hộp cha. (Giá trị này không ảnh hưởng đến kích thước phông chữ của văn bản phần tử. )text-topCăn chỉnh phần trên cùng của hộp với phần trên cùng của khu vực nội dung của phần chính (xem phần ). text-bottomCăn chỉnh đáy của hộp với đáy của khu vực nội dung của cha mẹ (xem phần ). Tăng (giá trị dương) hoặc thấp hơn (giá trị âm) hộp theo khoảng cách này (phần trăm của giá trị). Giá trị '0%' có nghĩa giống như 'đường cơ sở'. Tăng (giá trị dương) hoặc thấp hơn (giá trị âm) hộp theo khoảng cách này. Giá trị '0cm' có nghĩa giống như 'đường cơ sở'Các giá trị sau căn chỉnh phần tử liên quan đến hộp dòng. Vì phần tử có thể có các phần tử con được căn chỉnh tương ứng với nó (do đó có thể có các phần tử con được căn chỉnh tương ứng với chúng), các giá trị này sử dụng các giới hạn của cây con được căn chỉnh. Cây con được căn chỉnh của một phần tử nội tuyến chứa phần tử đó và các cây con được căn chỉnh của tất cả các phần tử nội tuyến con có giá trị 'căn dọc' được tính không phải là 'trên cùng' hoặc 'dưới cùng'. Đỉnh của cây con được căn chỉnh là đỉnh cao nhất trong số các đỉnh của hộp trong cây con và đáy tương tự topCăn chỉnh đỉnh của cây con đã căn chỉnh với đỉnh của hộp dòng. bottomCăn chỉnh phần dưới cùng của cây con đã căn chỉnh với phần dưới cùng của hộp dòngĐường cơ sở của 'bảng nội tuyến' là đường cơ sở của hàng đầu tiên của bảng Đường cơ sở của 'khối nội dòng' là đường cơ sở của hộp dòng cuối cùng của nó trong luồng bình thường, trừ khi nó không có hộp dòng trong luồng hoặc nếu thuộc tính 'tràn' của nó có giá trị được tính toán khác với 'hiển thị', trong Chiều rộng 100% có nghĩa là gì trong CSS?nếu bạn chỉ định chiều rộng. 100%, tổng chiều rộng của phần tử sẽ bằng 100% khối chứa nó cộng với bất kỳ lề ngang, phần đệm và đường viền nào .
Chiều rộng và chiều cao được tính như thế nào trong CSS?Ở đây kích thước của phần tử được tính như sau. chiều rộng = đường viền + phần đệm + chiều rộng của nội dung và chiều cao = đường viền + phần đệm + chiều cao của nội dung .
Là chiều rộng 100 và chiều rộng 100%?Câu trả lời là Không . vì 100 là pixel và 100% là phần trăm kích thước tổng thể của trang.
Cách tính chiều rộng div?Để đo chiều rộng của phần tử div, chúng ta sẽ sử dụng thuộc tính offsetWidth của JavaScript . Thuộc tính này của JavaScript trả về một số nguyên biểu thị chiều rộng bố cục của một phần tử và được đo bằng pixel. |
