• fans
  • 1036 reader
  • followers

Khi thiết kế giao diện nhiều cột sử dụng CSS thì độ lớn của các box rất quan trọng và chúng chịu ảnh hưởng rất lớn đến nhau. Nếu một box này bị phình to ra hơn kích thước bạn muốn, nó có thể đẩy box bên cạnh di chuyển sang hướng khác và hậu quả là cả giao diện của bạn sẽ không theo ý muốn. Cho nên để nắm rõ được cách mà CSS tác động đến độ lớn của box sẽ giúp bạn có cái nhìn rõ ràng hơn về sự ảnh hưởng lẫn nhau giữa các thành phần. Và đây cũng là một trong những điều gây phiền toái nhất của CSS.

Ví dụ bạn tạo một đoạn văn bản với độ rộng width: 250px và cho hiển thị màu nền là màu vàng nhạt cho dễ nhìn.

Đoạn văn có độ rộng là 250px và màu vàng

Bây giờ ta sẽ thêm padding vào để cho phần chữ không bị chạm vào viền. Ở phần này tôi sẽ cho giá trị padding là 10px vào bên tay trái và phải của nội dung. Như đã nói trong phần padding, giá trị padding sẽ đẩy nội dung vào trong đường biên. Nhưng trong thực tế nó lại làm độ rộng của phần này tăng lên tổng cộng là 20px

Đoạn văn có độ rộng là 250px và màu vàng

Bây giờ nếu bạn thêm border trái và phải với giá trị là 5px mỗi bên

Đoạn văn có độ rộng là 250px và màu vàng

Khi thêm border vào, nó cũng sẽ làm tăng toàn bộ độ lớn của cả phần. Bây giờ box ban đầu đã có độ lớn là 280px.

Cuối cùng nếu bạn thêm Margin là 30 px vào mỗi bên trái phải nữa thì toàn bộ phần này sẽ chiếm một khoảng cách lớn hơn nhiều so với giá trị 250px lúc ban đầu. Nếu bạn nghĩ khi thêm padding và border vào box sẽ không làm tăng kích thước của box, nhưng trong thực tế lại cho thấy điều ngược lại.

Đoạn văn có độ rộng là 250px và màu vàng

Hiểu được vấn đề này là chìa khoá chủ chốt để sau này chúng ta sẽ học cách tạo dựng giao diện nhiều cột bằng CSS. Khi bạn phải làm việc với giao diện có nhiều thành phần tương tác lẫn nhau, một trong số đó thay đổi độ lớn ngoài ý muốn sẽ có tác động đến những thành phần khác. Do vậy chỉ cần một phần nào đó hiển thị sai ý bạn, có thể cả giao diện sẽ không được như ý nữa. Chính vì thế người ta hay tạo một thẻ <div> lớn với độ rộng của giao diện họ muốn sau đó thì tạo các thẻ <div> khác nằm trong nó. Bằng cách này bạn có thể duy trì được độ lớn mà bạn muốn mà không sợ bị các thành phần khác làm thay đổi.

Trong ví dụ dưới đây tôi đặt độ lớn của đoạn văn bản sau là 250 px và nằm trong một thẻ div bao quanh

<div id="wrapper">
  <div id="box_model">
  <h3>Box Model</h3>
  <p>Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực 
sự của box. cho dù khi tôi thêm giá trị padding bằng 5px vào 
mỗi bên trái phải, nó cũng không làm tăng độ lớn. Mà ngược lại, 
nó sẽ bị đầy lùi vào biên là 5px .</p>
  </div><!--End #box_model-->
</div><!--End #wrapper-->

Bây giờ bạn hãy đặt độ lớn của thẻ div có id=”box_model” là 250px chứ không phải id=”wrapper”

h3 {background:#eee;}
#wrapper {width: 250px;background-color:#EEE;}
#box_model {padding: 0 5px;}
box model CSS

Bạn sẽ thấy nội dung bị đẩy lùi vào trong với giá trị là 5px thay vì bị phình to ra như ở trên. Thậm chí bạn có thể thêm đường viền vào và nó cũng vẫn giữ nguyên được giá trị ban đầu.

#box_model {padding: 0 5px;border: 10px solid black;}
box model CSS

Bằng cách tạo một thẻ <div> bao quanh, bạn đã có thể quản lý được độ rộng thực sự của box và không sợ nó thay đổi mỗi khi bạn thêm các thành phần như padding, margin hoặc border nữa. Ở những bài kế tiếp trong phần thiết kế giao diện, tôi sẽ sử dụng kỹ thuật này rất nhiều. Do vậy bạn hãy hiểu kỹ phần này trước khi tiếp tục sang phần sau.

Bài học rút ra được ở bài này là khi bạn tạo giao diện bằng CSS và bạn thiết lập độ lớn cho một thành phần bất kỳ. Bạn thực chất là phải thiết lập độ lớn cho nội dung nằm trong nó. Bất cứ giá trị padding, margin hay border được thêm vào sẽ làm cho nó phình ra và chiếm một khoảng không lớn hơn giá trị ban đầu.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • tac ke hoa

    Anh DW , cho e hoi : e tạo mà ko cần tag bao quanh, e thấy đều giống nhau, vậy dung tag bao quanh để làm gì. E Cam On!

  • Pingback: PSD sang HTML – BUSSINESS LAYOUT -

  • Pingback: PSD sang HTML – BUSSINESS LAYOUT

  • petervn

    chính xác lạ Bây giờ Nếu bạn hãy đặt độ lớn của thẻ div có id=”box_model” là 250px chứ không phải id=”wrapper” thì nó sẽ phình cái
    phần id=”wrapper” ra! :)

  • iam.toan

    word-wrap:break-word;

    Bạn sử dụng code css đó sẽ làm đoạn text dài xuống hàng khi gặp biên

  • hai dang

    Anh ơi chỉ em cách làm border giống trang web nhatcuong.com/dien-thoai/p363/ với. Khi hover nó hiện lên boder ấy. Em làm hover qua mà hình nó chạy linh tinh luôn mặc dù em đã đặt width là 25% cho thẻ div rùi :(. Cám ơn anh nhìu :)

  • http://gocshare.com nguyen

    thank admin nhiều. bài viết rất bổ ích

  • http://misoblog.net/ Miso

    Bây giờ bạn hãy đặt độ lớn của thẻ div có id=”box_model” là 250px chứ không phải id=”wrapper”

    Trong khi CSS thì vẫn là đặt width cho wrapper. Chỗ này bị nhầm bác DW à.

  • http://www.depla.net Crazy KV

    Bây giờ bạn hãy đặt độ lớn của thẻ div có id=”box_model” là 250px chứ không phải id=”wrapper”

    h3 {background:#eee;}
    #wrapper {width: 250px;background-color:#EEE;}
    #box_model {padding: 0 5px;}

    Anh DW sửa lại cái đoạn này trong bài viết! Em đã gà rồi mà đọc tới đây, em phải đọc lại 10 lần mới hiểu được đó!

  • http://it2hut.net nhtera

    Em mới tìm hiểu thêm về css3 thì nó có thuộc tính box-sizing có thể giải quyết được vấn đề phình to không mong muốn của box khi set padding và border .

     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
    

    Bác DW lúc nào làm thêm CSS3 hay HTML5 cho bà con mở mang tầm mắt hihi :D

    • mineizurs

      Vụ này của FF với Safari, IE8 không có (IE9 thì mình không biết, vì mình vẫn xài Win XP^^)

      • Balick

        IE9 với Google Chrome có hỗ trợ -webkit- mà bạn

  • http://www.banquyenphanmem.org vivaacong

    em vừa xem xong video của anh và làm 1 bài với code sau.
    code css:
    *{margin: 0; padding: 0}
    #wrapper{
    background-color: red;
    width: 500px;
    margin: 20px auto;
    }
    #container{
    background-color: yellow;
    width: 200px;
    padding-left: 5px;
    padding-right: 5px;
    }

    code html

    hehe song trn doi dksfjkasjfksdjfksjakfjdkajfdsk

    dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

    nhưng kết quả là text của em vượt ra khỏi box container, em ko up được hình lên nên hơi khó giải thích, nói chung là text nó dài loằng ngoằng và không tự xuống hàng để nằm gọn trong box container như mình đã style trong css, mong anh giải thích giúp về vấn đề này, tks anh.

    • http://www.izwebz.com Demon Warlock

      Tại e gõ chữ không bình thường, cái dòng chữ dxdddd của e quá trời dài và nó được hiểu là một từ đơn nhg vô cùng dài. giờ e xóa cái đoạn đó đi và điền vào một đoạn chữ bt xem Sao.

      • http://nhat.0fees.net/relax Trần Ngọc Nhật

        Chào Anh DW em có ý định chia sẻ một video trên izwebz nhưng thời gian này thi hơi bận rộn có thể ra tết em sẽ làm video anh có thể cho em biết muốn chia sẻ video lên izwebz thì phải gửi video cho anh hay sao anh ? anh co thể gửi phản hồi vào mail : anhchangthode22145@gmail.com anh nha

        • http://www.izwebz.com Demon Warlock

          Em cứ làm video rồi upload lên Mediafire. Sau đó gửi cho anh link tới file đó cộng với hình minh hoạ (nếu có), và một chút giới thiệu hoặc diễn giải về Video.

    • http://it2hut.net nhtera

      Trong css 3 đã có giải pháp cho 1 từ dài miên man như vậy :D
      Đó là dùng thuộc tính

      word-wrap: break-word;

      . Nó có tác dụng ngắt từ và xuống dòng nếu vượt quá độ rộng của box chứa nó.

      • http://nhat.0fees.net/relax Trần Ngọc Nhật

        Thích như vậy thì cho javascript đi chứ css3 trình duyệt chưa phổ biến mà làm gì có chữ nào tới mức đó việt nam với có chữ dài nhât là 7 chữ cái thôi còn làm email hay cái gì đó thì khoảng 50 chữ là hộc máu rồi có ai mà rỗi công soạn một cái dài tới vậy đâu

    • hoangvantuyen

      Giữa các từ bạn phải có dấu cách,nếu không co dấu cách cứ viết 1 từ thật dài thì sẽ in ra cả từ đó mà không xuống dòng.Giờ ban thử viêt ddddddd dddddd ddddddd dddd sẽ xuống dòng thôi.

  • Teo2

    @ Bây giờ bạn hãy đặt độ lớn của thẻ div có id=”box_model” là 250px chứ không phải id=”wrapper”

    Chỗ này em không hiểu, rõ ràng là đặt thẻ div có id=”wrapper” là 250px mà

    • nhtera

      @Teo2
      Chắc nhầm thôi nhưng ai cũng hiểu :D

  • huuquynh

    cảm ơn rất nhiều em cũng mới học css nên rất cần những bài viết thế này

  • Khoa

    sorry! mình viết comment ở trên nó không hiện các tag. Cơ bản các div mình đặt ở trên là div#header( Chứa Banner và menu top), div#main(bao bọc div#left(chứa menu nằm bên trái, div#right(chứa quảng cáo nằm bên phải),div#content(chứa nội dung của website)….. Hy vọng bạn có thể giải đáp thắc mắc cho mình qua mail: zzllhotboyllzz@yahoo.com
    Thanks bạn nhiều!!!

  • Khoa

    Mình có 1 số thắc mặc mong bạn giải đáp. Ví dụ phần body tôi có:

    Nơi đặt banner chính và menutop

    Chứa menu nằm bên trái
    Chứa quảng cáo nằm bên phải
    Chứa nội dung của website

    Copyright

    Và tôi định dạng CSS cho các div như sau:

    *{
    margin:0px;
    padding:0px;
    }
    body{
    witdh:100%;
    margin:0px;
    }
    div#header{
    height:150px; //vừa đủ để add background
    background:banner.png;
    }
    div#left{
    width:180px;
    float:left;
    }
    div#right{
    width:180px;
    float:right;
    }
    div#content{
    margin-left:185px;
    margin-right:185px;
    }

    cơ bản là mình làm đến đây và test thử độ rộng bằng cách viết 1 dòng chữ khoang hơn 100 ký tự, không có dấu cách (để giả sử đoạn này như 1 liên kêt (link) vào phần div id=”content” thì mình thấy nó bị lồi sang div id=”right”. Điều chỉnh trình duyệt fullsreen thì vẫn bình thường (máy mình có độ phân giải 1920×1080).
    Như vậy, Bạn có thể hướng dẫn cho mình khắc phục được lỗi này không? Nói đơn giản là mình muốn hiệu chỉnh sao cho div id=”content” co giãn được ví dụ như trang http://freshwap.net
    Thanks bạn nhiều!!!!
    P/S: mình không biết nên gửi câu hỏi này chỗ nào nên mình viết trên comment này.Hy vọng bạn sẽ đọc đuọc và hồi âm qua mail cho mình. Thanks bạn lần nữa

  • rambu

    anh ơi sao chỉ cố định đựoc độ rộng mà chiều cao của nó vẫn tự dài ra

  • Tường Vi

    Cám ơn Anh nhiều

  • doremon

    Em thử làm theo như trong bài hướng dẫn nhưng nó không có dòng màu vàng ngay chữ box model, anh xem giùm em cái.
    http://img148.imageshack.us/img148/1979/boxmodel.jpg

    • Minh Anh

      có lẽ anh đánh mã màu bị nhầm thôi , bạn thử bằng 1 mã màu khác xem sao?? vì mình ko nghĩ màu #eee là đúng

  • http://my.opera.com/babylove_die Cuội

    Giờ thì em đã biết tại sao cái box của mình nó lại phình to ra như thế, chắc chắn sẽ áp dụng cho các website của công ty và cảm ơn anh rất nhiều! :)

  • Hoàng Minh Tuấn

    Đúng là người có kinh nghiệm có khác. Thank Anh nhé.!

  • http://comeco.vn lukas

    Bài này rất hữu ích, nếu không coi kỹ bài này chắc chắn giao diện của chúng ta dễ có vấn đề. Cảm ơn nhiều!

  • http://www.chayzo.com OGEN

    Bài viết thật hữu ích. Thanks admin
    Nội dung phía dưới có sự nhầm lẫn.

    Bây giờ bạn hãy đặt độ lớn của thẻ div có id=”box_model” là 250px chứ không phải id=”wrapper”

    /**/
    Bây giờ bạn hãy đặt độ lớn của thẻ div có id=”wrapper” là 250px chứ không phải id=”box_model”

  • Thinh

    Bài viết rất hay! rất cảm ơn! Tôi rất thích bài này và tôi sẽ ứng dụng nó!

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives