Cơ bản về tính toán box model trong css

css trick
Nội dung trích xuất từ tài liệu:
Cơ bản về tính toán box model trong cssCơ bản về tính toán box model trong css !!!Nếu bạn nào đã tìm hiểu về css lâu , hoặc là thiết kế web lâu rùi thì chắc cái này biếtrùi ^^, mình đây chỉ là đọc và thấy cái này rất cần thiết cho người mới làm quen với nólên viết thui ^^(nhớ lại lúc mới vọc css cánh đây 1 tháng cứ không hiểu tại sao mìnhlại làm chạy được trên firefox chuẩn thì sang ie nó lại tùm lum):Ở đây như trong hình , nếu mà theo chuẩn w3c thì tổng chiều rộng sẽ là :total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-rightquên mất là các bạn phải nhớ nhé , cái width mà ta khai báo trong css ý ở w3c thì nó chỉlà chiều rộng của phần nội dung thui , tức là cái width trong công thức kia.-Còn đối với bác ie nhà ta :total width = margin-left + width + margin-rightCó nghĩa là bác ý thích chơi một mình một kiểu không giống ai , cái chiều rộng ra khaibáo trong css thì sẽ là tổng cộng của cả border và paddingCái này là rất quan trọng trong việc nếu ta thiết kế css theo kiểu chính xác đến từngpixelVí dụ : #news { padding:10px; border:1px solid; width:250px; }Giờ bạn lấy cái thước mét ra đo xem thì sẽ thấy bác firefox hay opera đều hiển thịđúng còn ie thì không ^^-Cánh khắc phục:+Tránh hoàn cảnh là nguyên nhân của vấn đề :VD có đoạn code sau cần làm: News News article 1 Lorem ipsum dolor sit amet News article 2 Lorem ipsum dolor sit amet Nếu với các trình duyệt chuẩn như firefox và opera thì để có được tổng chiều rộng là250px cho #news thì ta dùng code sau : #news { padding:10px; border:1px solid; width:228px; }nhưng sẽ gặp vấn đề với iethay vì dùng như vậy ta chèn thêm một thẻ div bao bọc xung quanh #new ví dụ banđầu với tên là #sidebar như sau: ... Và code sẽ như sau để chạy được tuốt trên các trình duyệt : #sidebar {width:250px} #news { padding:10px; border:1px solid; }Ở đây ta cho #sidebar có chiều rộng của phần nội dung là 250px , tránh đến việc đềcập trong thẻ #new là 228px để có được cùng một chiều rộng tương tự(nhưng nếu đềcập là 228 thì trên bác ie sẽ sạc T_T)+Dùng hack với firefox tránh cho ie5/win: #news { padding:10px; border:1px solid; width:250px; w\idth:228px; }khi gặp dòng w\idth:228px; thì ie5 sẽ không hiểu nhưng firefox thì hiểu và sẽ hiển thịchiều rộng của nội dung là 228px+Sử dụng bình luận có điều kiện cho ie6: Thì chỉ bác ie6 nhà ta hiểu đượcMong chia sẻ được chút kiến thức với mọi người!importantKhi code CSS gặp vấn đề ở độ rộng (width), chiều cao (height), nên thêm !importantvào phía sau. Ví dụ :#vidu{ width:10px !important; (FF, IE7 nhận cái giá trị width này) width:10px; (IE6 nhận giá trị width này)}#vidu{ #width:772px; /*only IE7 know*/ _width:800px; /*only IE6 know*/}Opacity / Transparency trên IE/FFCode:}Tôi là tôi7 thủ thuật CSS thường dùng đối với các lỗi cố ý của IENgày đăng: 2007-12-21Nguồn tin: Thông tin công nghệ Internet Explorer là trình duyệt web phổ biến nhấtdo nó được tích hợp chặt chẽ với Windows, lợi thế đó cho thấy sự ích kỉ và sinh ra sựáp đặt đối với người dùng, đặc biệt là các nhà phát triển. Có những đoạn mã đúngchuẩn XHTML có thể chạy tốt trên tất cả các trình duyệt đạt chuẩn hiển thị XHTMLnhưng chưa hẳn nó sẽ hiển đúng trên IE thậm chí IE còn không thèm trả lại kết quả.Dưới đây là 7 thủ thuật CSS thường dùng đối với các lỗi độc quyền của ngài IE trongquá trình thiết kế một trang Web.1. Lỗi hiển thị khốiSửa lỗi hiển thị cho các phiên bản IE6 về trước khi viền và khoảng cách với nội dungbao gồm cả chiều rộng của đối tượng.padding: 4em;border: 1em solid red;width: 30em;width/**/:/**/ 25em;2. Ghi chú điều kiệnNhững ghi chú này đơn giản là những ghi chú chỉ hiển thị đối với những phiên bảntrình duyệt nhất định do từng phiên bản có những lỗi khác nhau.Đoạn mã trên sẽ hiển thị mã CSS tương ứng trên tất cả các phiên bản trình duyệt IE,nếu bạn chỉ muốn nó được trình duyệt IE v5.01, v5.5 và v6 đọc được thì có thể dùngđoạn mã sau:Sau khi thử nghiệm chúng ta nên loai bỏ các đoạn mã đặc biệt trên để giảm nhẹ fileCSS cũng như giảm tải cho các trình duyệt khác, để áp dụng các mã CSS đặc biệt trêncho IE thì chỉ cần thêm đoạn mã sau vào phần header là đạt yêu cầu được nạp trongIE:Một vài kiểu mã điều kiện: IE - Bất kỳ phiên bản nào • lt IE version - Phiên bản trước version • lte IE version - Phiên bản trước hoặc bằng với version • IE version - Chỉ với phiên bản version • gte IE version - Phiên bản từ version • gt IE version - Phiên bản mới hơn version. •3. Min-width và Max-width - Độ rộng lớn tối đa và tối thiểu của một đối tượngTất cả các phiên bản của IE đều không hiểu đoạn mã này có ý nghĩa gì, chính vì vậychúng ta phải tạo một cách khác để nó có thể biết ta đang muốn gì dựa trên ví dụ vềviệc tạo một lớp có id=wrapper: Kế tiếp với đoạn mã tạo một lớp có độ rộng tốithiểu 750px:#wrapper{min-width: 750px;width:expression(document.body.clientWidth < 750? 750px: auto );}Đoạn mã sau có độ rộng tối thiểu 750px và tối đa 1220px:#wrapper{min-width: 750px;max-width: 1220px;width:expression(document.body.clientWidth < 750? 750px :document.body.clientWidth > 1220? 1220px : auto);}Một cách khác không dùng đến JS trong CSS:selector {min-height:500px;height:auto !important;height:500px;}Đoạn mã này cho kết quả như nhau trên các trình duyệt IE6, Mozilla/Firefox/Gecko,Opera 7.x+, Safari1.2; có lẽ là tối ưu nhất chăng ?4. Chọn đối tượngTùy từng phiên bản khác nhau của IE mà lỗi chọn đối tượng được sửa theo nhữngcách khác nhau như sau:- IE 6 trở về trước*html {}- IE 7 trở về trước*:first-child+html {}* html {}- IE 7*:first-child+html {}- IE 7 và các trình duyệt mới kháchtml>body {}- Các trình duy ...