Css mở rộng màu nền bên ngoài div
|
Các phần tử nằm ngoài giới hạn bên trái hoặc bên trên không tạo thanh cuộn. Ở phía bên kia, bóng kéo dài sang phải. Nhưng bóng không được tính đến khi tính toán bố cục, vì vậy điều này cũng sẽ không tạo ra thanh cuộn Mát lạnh. Chúng tôi đã thay đổi thành công màu nền của div này. Tiếp theo, chúng ta hãy tìm hiểu thêm về tài sản này. Hãy xem cách thuộc tính màu nền ảnh hưởng đến các phần của mô hình hộp CSS. Màu nền và Mô hình Hộp CSS. Theo mô hình hộp CSS, tất cả các phần tử HTML có thể được mô hình hóa dưới dạng hộp hình chữ nhật Thuộc tính tràn kiểm soát những gì xảy ra với nội dung vượt ra ngoài giới hạn của nó. hãy tưởng tượng một div trong đó bạn đã đặt rõ ràng là rộng 200px, nhưng chứa hình ảnh rộng 300px. Hình ảnh đó sẽ nhô ra khỏi div và hiển thị theo mặc định Div bên trong là không cần thiết — chúng tôi đã thêm nó cho mục đích tạo kiểu CSS. May mắn thay, có những giải pháp đa trình duyệt không yêu cầu thẻ bổ sung Nhưng nếu chúng ta muốn một phần tử mở rộng trực quan để bao phủ toàn bộ chiều rộng của chế độ xem, chẳng hạn như màu nền cho tiêu đề hoặc các tiêu đề riêng lẻ thì sao? Cách tốt nhất để kéo dài hình ảnh cho vừa với nền của một phần tử là sử dụng thuộc tính CSS3, cho kích thước nền và đặt nó bằng cover Tôi đang mong màu #background mở rộng toàn bộ chiều rộng của trình duyệt nhưng không được. #header1 có lề. 0 ô tô; . 820px; Nhiều hình nền với kích thước nền. Bạn có thể áp dụng màu nền cho phần tử html, sau đó áp dụng hình nền cho phần tử nội dung và sử dụng thuộc tính kích thước nền để đặt thành 50% chiều rộng của trang. Điều này dẫn đến một hiệu ứng tương tự, mặc dù sẽ thực sự chỉ được sử dụng trên độ dốc nếu bạn tình cờ sử dụng một hoặc hai hình ảnh Chỉ cần thêm kích thước nền. 100% kiểu cho phần tử mà bạn đã áp dụng hình nền. Hoạt động trong Firefox, Safari và Opera Ban đầu có nghĩa là một công cụ đơn giản để nhóm các thành phần trang, thẻ DIV mang đến cho người thiết kế thêm tính linh hoạt và kiểm soát bố cục khi nó được kết hợp với các thuộc tính Biểu định kiểu xếp tầng (CSS)
Nhà thiết kế sử dụng DIV để tạo bố cục trang phức tạp mà không cần sử dụng bảng. Thật không may, khi bố cục trở nên phức tạp hơn, các vấn đề về khả năng tương thích của trình duyệt sẽ tăng lên Các vấn đề về khả năng tương thích với CHIỀU CAO VÀ CHIỀU RỘNG Hãy xem xét một trong những cách bố trí đơn giản nhất xung quanh. hai cột đặt cạnh nhau. Một cái chứa menu điều hướng và cái kia chứa nội dung trang. Đây có vẻ là ứng cử viên lý tưởng để chuyển đổi từ bố cục dựa trên bảng sang bố cục CSS Nó có ý nghĩa. cả DIV và bảng đều có thể được lồng vào nhau, có các thuộc tính HEIGHT và WIDTH được đặt, chứa các đường viền, v.v. Tuy nhiên, có một sự khác biệt lớn trong hành vi. Nếu bạn hiểu vấn đề này, bạn sẽ tiết kiệm cho mình rất nhiều thời gian gỡ lỗi bực bội. Ghi lại điều này Các ô của bảng kéo dài để vừa với nội dung được đặt bên trong chúng, nhưng DIV có thể không Giống như rất nhiều vấn đề thiết kế gây phiền nhiễu, vấn đề cơ bản không nằm ở chính các quy tắc CSS, mà là cách các trình duyệt chọn diễn giải chúng Các trình duyệt Mozilla, Netscape và Opera hiểu các giá trị này là các phép đo chính xác và không cho phép các giá trị HEIGHT hoặc WIDTH của DIV vượt quá những gì bạn chỉ định. Vì vậy, nếu bạn đặt các thuộc tính HEIGHT và WIDTH cho DIV, sau đó chèn hình ảnh hoặc văn bản chiếm nhiều dung lượng hơn, màn hình sẽ trở thành một mớ hỗn độn Internet Explorer dễ tha thứ hơn nhiều. Nó coi các giá trị HEIGHT và WIDTH là các giá trị tối thiểu và mở rộng DIV để chứa tất cả nội dung bạn muốn - giống như một ô của bảng Ai đúng? . Có vẻ như Explorer đang giúp ích cho bạn, nhưng hãy xem xét kết quả nếu bạn đang sử dụng định vị tuyệt đối để đặt tất cả các thành phần trang. Nếu một DIV hiển thị lớn hơn bạn mong đợi, nội dung quan trọng khác có thể bị ẩn khỏi chế độ xem So sánh màn hình Explorer và Netscape Nhìn vào mã HTML bên dưới. Đặc biệt chú ý đến các giá trị HEIGHT và WIDTH trên các lớp và trên các hình ảnh bên trong phần HEAD Bên trong phần CƠ THỂ Lưu ý rằng quy tắc CSS đặt RỘNG của DIV điều hướng thành 125px, nhưng chúng tôi đã đặt một hình ảnh bên trong DIV có chiều rộng 163px. Cũng lưu ý các giá trị HEIGHT trên hai DIV. Cả hai đều được đặt thành 75% cửa sổ trình duyệt, nhưng DIV điều hướng có thể cần nhiều chỗ hơn thế Đây là cách nó hiển thị trong Explorer 6. 0. DIV điều hướng mở rộng sang bên phải để chứa toàn bộ hình ảnh logo Happy Puppy và các mục menu. Lưu ý cách menu DIV cao hơn DIV nội dung Trong Netscape7. 1, toàn bộ logo Happy Puppy xuất hiện, nhưng chiều rộng DIV điều hướng không kéo dài để phù hợp với nó. Đó là lý do tại sao phần lớn nội dung văn bản DIV ghi đè lên hình ảnh logo. Chiều cao của cả hai DIV được cố định ở mức 75%, do đó, nội dung bổ sung sẽ hết cả hai vào khoảng trắng bên dưới Không có trang nào trông tuyệt vời như vậy, nhưng phiên bản Explorer ít nhất có thể đọc được Giải pháp DIV lồng nhau cho Explorer Phiên bản Explorer dù đẹp hơn nhưng vẫn chưa hoàn hảo. May mắn thay, rất dễ khắc phục - mặc dù đây là giải pháp chỉ dành cho Explorer Đặt cả hai DIV vào một DIV vùng chứa được đặt thành 100% chiều cao của trang và đặt cả hai DIVS bên trong thành 100%. Chúng sẽ lấp đầy DIV vùng chứa và chiều cao của cả hai sẽ bằng nhau Thay đổi thuộc tính HEIGHT của cả hai DIV thành 100% và thêm lớp kiểu này vào quy tắc CSS của bạn. . thùng chứa {chiều cao. 100%} và sau đó áp dụng nó cho vùng chứa DIV trong phần CƠ THỂ Đây là kết quả trong Explorer Màn hình trong Netscape không thay đổi khi bạn thực hiện việc này, nhưng phiên bản Explorer gần với những gì bạn mong đợi. Nếu bạn chắc chắn rằng tất cả (hoặc ít nhất là đại đa số) khách truy cập của bạn đang sử dụng Explorer, điều này sẽ giải quyết vấn đề của bạn. Đó là một giải pháp bố trí tuyệt vời, không có bảng Tài sản tràn Nếu bạn cần một giải pháp đa trình duyệt hơn, có lẽ thuộc tính OVERFLOW là dành cho bạn. Tiêu chuẩn W3C mô tả tình huống như thế này "Nói chung, nội dung của hộp khối được giới hạn ở các cạnh nội dung của hộp. Trong một số trường hợp nhất định, một hộp có thể bị tràn, nghĩa là nội dung của nó nằm một phần hoặc toàn bộ bên ngoài hộp. " Thuộc tính OVERFLOW có thể có một trong bốn giá trị khác nhau
Việc thêm thuộc tính OVERFLOW vào cả hai DIV sẽ giữ nội dung bên trong DIV nhưng cũng tạo ra cảm giác "khung" có thể không làm hài lòng cả nhà thiết kế và khách truy cập Khi chúng tôi thêm "tràn. cuộn" quy tắc CSS sang vùng chứa DIV, chúng tôi nhận được màn hình này trong Netscape 7. 1 và Nhà thám hiểm Lưu ý thanh cuộn bên phải. Nội dung của phần vùng chứa sẽ cuộn trong khi điều hướng vẫn tĩnh. Nó mang lại cảm giác "đóng khung", nhưng có thể giúp giữ chân khách truy cập nếu bạn có một số trang quá dài |
