Cơ bản về tính toán box model trong css !!! 2007-07-23 23:02:45

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ết rù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ình lại làm chạy được trên firefox chuẩn thì sang ie nó lại tùm lum):
http://www.456bereastreet.com/i/box-model.gif
Ở đâ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-right

quê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-right

Có 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 khai báo trong css thì sẽ là tổng cộng của cả border và padding
Cá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ừng pixel
Ví 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:

    <div id="news">
    <h2>News</h2>
    <ul>
    <li>
    <h3>News article 1</h3>
    <p>Lorem ipsum dolor sit amet</p>
    </li>
    <li>
    <h3>News article 2</h3>
   <p>Lorem ipsum dolor sit amet</p>
   </li>
   </ul>
   </div>

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 ie
thay 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:

    <div id="sidebar">
    <div id="news">
    ...
    </div>
    </div>

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:

   <!--[if lt IE 6]>
    <style type="text/css">
    #news {width:250px}
    </style>
    <![endif]-->

Thì chỉ bác ie6 nhà ta hiểu được
Mong chia sẻ được chút kiến thức với mọi người

Tra loi 8 comment(s) NguyÅn Minh Tân 2007-07-23 23:02:45

NguyÅn Minh Tân 2007-07-23 23:05:43

Quên mất đây là bài mình tổng hợp lại khi đọc ở trang
http://www.456bereastreet.com là một trang web rất nổi tiếng về css

Còn đây là link bài gốc của nó ^^!
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model

Tra loi

vmt 2007-08-14 08:54:16

thanks pác nhìu, đối với newbie như mình thì cái này đúng là mới và có ích. lâu nay toàn phải dùng table để canh cho đúng kích thước không à, dùng div canh đúng kích thước theo lý thuyết thì hiển thị bị sai tứ tung mà không biết vì sao(nay thì biết rùi :)).

Tra loi

TG 2007-08-14 09:24:17

TG làm web bấy lâu nay mà cũng không phân biệt được sự khác biệt này :) thanks NguyÅn Minh Tân much

Tra loi

TK 2007-08-14 11:38:19

Hú hú! sao rắc rối thế. Mí thằng làm phần mềm sao nó chơi ngang thế nhỉ. ~_~ chỉ khổ mình. chả bít cái gì!

Tra loi

Khong ten 2007-10-20 09:47:38

Cám ơn các bạn nhé.Bây giờ thì mình có thể làm được rồi.

Tra loi

hehe 2007-12-17 06:15:11

Mở rộng tầm mắt
thanks

Tra loi

hikaru_mod 2008-03-18 10:49:58

mình là Newbie thấy phpbasic có nhiều bài viết rất bổ ích
Thanks

Tra loi

vietcms.com 2008-05-21 04:34:39

Nhieu luc cung ko giong ly thuyet dau, vi css co tinh ke thua nen neu nam dau do trong cai ji thi lai khac cai vu cong tru nhan chia kia. Tien day cho minh hoi ai biet hok:

Mot dong van ban nam trong 1 the <ul><li>{content}</li></ul>
neu ul nay nam trong 1 <div> ko co thuoc tinh bk thi text se hien thi tot, con neu <div> co bg mau gi do thi se ko hien thi bt tru khi keo chuot qua moi hien len.

(Van de nay la cua IE6)

Tra loi

Y kien