CSS lấy chiều rộng của cha mẹ
|
Thuộc tính Show Thí dụIn this example, the "child" has its width property set so that it will use the full width of the parent but the max-width property constrains its width to 150px.
HTML sao chép mã <div id="parent"> <div id="child"> The Mozilla community produces a lot of great software. </div> </div> CSS sao chép mã #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; } Giá trị nội dung phù hợp có thể được sử dụng để đặt chiều rộng của một phần tử dựa trên kích thước nội tại mà nội dung của nó yêu cầu HTML sao chép mã <div id="parent"> <div id="child"> Child Text </div> </div> CSS sao chép mã #parent { background: lightblue; width: 300px; } #child { background: gold; width: 100%; max-width: -moz-fit-content; max-width: -webkit-fit-content; } cú phápCSS sao chép mã /* giá trị______45_______Chiều rộng không có giá trị lớn nhất.#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }0Xem #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }0 để biết các đơn vị có thể. #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }2Được chỉ định là #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }2 chứa chiều rộng của khối. #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }4 Chiều rộng ưu tiên nội tại. #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }5 Chiều rộng tối thiểu nội tại. #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }6 Chiều rộng khối chứa trừ đi lề ngang, đường viền và phần đệm. Một số trình duyệt triển khai tên cổ cho từ khóa này, #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }7. #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }8 Giống như #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }9 cú pháp chính thứcCSS sao chép mã Sự miêu tảThuộc tính
<div id="parent"> <div id="child"> Child Text </div> </div>5 ghi đè max-widthGiá trị ban đầunoneÁp dụng cho tất cả các phần tử trừ các phần tử nội tuyến không được thay thế, các hàng trong bảng và các nhóm hàngInheritednoPercentagestham chiếu đến chiều rộng của khối chứaMediavisualComputed valuetỷ lệ phần trăm như đã chỉ định hoặc độ dài tuyệt đối hoặc noneAnimatableyes, dưới dạng , hoặc calc(); . Thứ tự chính tắcthứ tự không mơ hồ duy nhất được xác định bởi ngữ pháp chính thứcXem thêm
thông số kỹ thuậtSpecificationStatusComment Work Draft Thêm các từ khóa#parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }4, #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }5, #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }8 và #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }6. Cả bản nháp của Hộp CSS3 và Chế độ viết CSS3 đã xác định tại một số điểm những từ khóa này. Những bản nháp này được thay thế bởi thông số kỹ thuật này. Bản thảo làm việc Xác định max-width là hoạt hình. Đề xuất Định nghĩa ban đầu
Tính năngChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)Hỗ trợ cơ bản1. 01. 0 (1. 7 hoặc sớm hơn)7. 04. 02. 0. 2 (416), /*0[1] Không hỗ trợ(Có)Không hỗ trợ(Yes)No support #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }4, #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }5, #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }8, and /*4 #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }7 No support [3]3.0 (1.9)-moz [2] Không hỗ trợKhông hỗ trợNo support [3] Tính năng AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileHỗ trợ cơ bản ????? [1] CSS2. 1 rõ ràng rời khỏi hành vi của /*0 không xác định. Do đó, mọi hành vi đều là CSS2. 1-tuân thủ; [2] Gecko triển khai thử nghiệm các định nghĩa được đưa ra trong CSS3 Basic Box. Cái này định nghĩa #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }7 chứ không phải #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }6. Ngoài ra, định nghĩa của #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }8 đơn giản hơn trong CSS3 Sizing [3] WebKit triển khai một đề xuất trước đó để đặt chiều cao thành chiều cao nội tại. các từ khóa #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }4, và #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }5 Không có từ tương đương cho #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }6 hoặc #parent { width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }8 Chiều rộng có được kế thừa trong CSS không?Các thuộc tính CSS như chiều cao, chiều rộng, đường viền, lề, phần đệm, v.v. không được kế thừa .
Làm cách nào để tính chiều rộng của div trong CSS?Để đ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. Giá trị trả về. Trả về chiều rộng pixel bố cục của phần tử tương ứng.
Chiều rộng được tính như thế nào trong CSS?Thuộc tính chiều rộng trong CSS chỉ định chiều rộng của vùng nội dung của phần tử . Vùng “nội dung” 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). Trong ví dụ trên, các phần tử có tên lớp là. bọc sẽ rộng bằng 80% so với phần tử cha của chúng.
Chiều rộng 100% nghĩa là gì?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 . |
