Độ lớn thực sự của Box | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/do-lon-thuc-su-cua-box/[8/10/2010 3:03:04 PM] NAVIGATION Đăng ký domain với 1and1 Từ PSD sang HTML (phần 3/5) WordPress Theme – Comment và Custom Comment Căn giữa Tabbed Navigation Đơn giản trong thiết kế Giới thiệu về CSS PHP Căn Bản – Bài 7 – Phần 2 Căn bản PHP – Bài 4 – Phần 2 Style Latest Post khác với post thường Dropdown Menu với CSS PHP CO BẢN – NÂNG CAO tìm hiểu cú pháp và phương thức PHP Phép toán và phát biểu có điều kiện trong php $_POST và $_GET Làm quen đối tượng Session Khai báo hàm, chèn tập tin và tập tin dùng chun Cách xử lý chuỗi, mảng, kiểu DataTime Thao tác trên cơ sở dữ liệu MySQL PHP và Database Phân trang với PHP Xóa, Cập nhật dữ liệu dạng mảng Tạo Mailing List: PHP & Mysql RECENT COMMENTS Random News Popular EMAIL ARTICLES Độ lớn thực sự của Box October 9, 2008 11 comments 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 CSS CSS Cơ bản jQuery jQuery Cơ bản Phát triển Web Bài viết, kinh nghiệm Videos Các thể loại WordPress Tutorials, Hacks HOME CÂU HỎI THƯỜNG GẶP LIÊN HỆ TÁC GIẢ BẢN QUYỀN Độ lớn thực sự của Box | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/do-lon-thuc-su-cua-box/[8/10/2010 3:03:04 PM] QUẢNG CÁO Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here for Free $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here for Free Tạo WordPress Theme – Dựng xHTML (16) chicken_roll: hahaha hay quá hết chổ trê (thanks you very much much…) nghe anh nói đây ko Tạo WordPress Theme – Slice hình (22) chicken_roll: ui ui hay quá cảm ỏn nhiều học rất nhiều từ anh và Anh CS thanks phát cho có Tạo WordPress Theme – Search form và Random Posts (15) DiVIVu: @ajimoto & tuyen: Làm thế này là được bạn ạ: <script type="text/javascript& PHP Căn Bản – Bài 9 (40) pham duy: Vang ban angelthao_0984884679 da noi dung do chung t con chan chu gi nua ma khong giup doan: ai muốn xem bằng file swf thì down KMP về mà dùng cái này còn hay hơn media của win nhiều Lập trình web và sự Lười nhác (23) kien: Không còn gì để nói :-s Tạo trang web đầu tiên (41) ho nga: ? ho nga: huhu sao làm web mệt dzữ vậy a hai ui…? Đ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 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” 1 <div id="wrapper"> 2 <div id="box_model"> 3 <h3>Box Model</h3> 4 <p>Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực 5 sự của box. cho dù khi tôi thêm giá trị padding bằng 5px vào 6 mỗi bên trái phải, nó cũng không làm tăng độ lớn. Mà ngược lại, 7 nó sẽ bị đầy lùi vào biên là 5px .</p> 8 </div><! End #box_model > 9 </div><! End #wrapper > 1 h3 {background:#eee;} 2 #wrapper {width: 250px;background-color:#EEE;} 3 #box_model {padding: 0 5px;} Độ lớn thực sự của Box | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/do-lon-thuc-su-cua-box/[8/10/2010 3:03:04 PM] 11 Comments ( Comment bài này ) « Clear và Float Box Model » Những bài viết có liên quan Box Model Clear và Float Pseudo Class Thứ bậc trong XHTML Giới thiệu về CSS $20 in Free Clicks to place your ad here. Join Free now! www.your-site.com Your Ad Here! BIDVERTISER ADS 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. 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. 1 #box_model {padding: 0 5px;border: 10px solid black;} Compatible Implant Trilobe Compatible Implant The $145.00 Alternative www.BlueSkyBio.com Độ lớn thực sự của Box | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/do-lon-thuc-su-cua-box/[8/10/2010 3:03:04 PM] Thinh says: September 24, 2009 at 6:50 am 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ó! Reply OGEN says: December 7, 2009 at 8:11 am 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” Reply lukas says: January 6, 2010 at 2:58 am 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! Reply Hoàng Minh Tuấn says: January 13, 2010 at 7:25 am Đúng là người có kinh nghiệm có khác. Thank Anh nhé.! Reply Cuội says: January 19, 2010 at 6:33 pm 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! Reply doremon says: March 23, 2010 at 2:36 am 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 Reply Tường Vi says: Reply Độ lớn thực sự của Box | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/do-lon-thuc-su-cua-box/[8/10/2010 3:03:04 PM] April 4, 2010 at 7:25 pm Cám ơn Anh nhiều rambu says: June 1, 2010 at 5:40 pm anh ơi sao chỉ cố định đựoc độ rộng mà chiều cao của nó vẫn tự dài ra Reply Khoa says: June 10, 2010 at 10:10 pm 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 Reply Độ lớn thực sự của Box | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/do-lon-thuc-su-cua-box/[8/10/2010 3:03:04 PM] Leave a comment ( Chọn hình đại diện ) 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 Khoa says: June 10, 2010 at 10:17 pm 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!!! Reply huuquynh says: July 14, 2010 at 3:15 am 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 Reply Tên bạn Email Website Comment Submit Độ lớn thực sự của Box | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/do-lon-thuc-su-cua-box/[8/10/2010 3:03:04 PM] Chọn kiểu gõ: Tự động TELEX VNI Tắt Luu ý khi post comment: Không "bóc tem" topic Dùng lời lẽ có văn hoá và lịch sự Xem trang FAQs trước khi hỏi Bạn có thể dùng thẻ HTML như:<strong>, <em>, <a> Wrap code trong dấu `backtick` (dấu trên phím Tab) © 2008-2010 izwebz, All Rights Reserved. BACK TO TOP Powered by WordPress | Hand coded and designed by Demon Warlock Izwebz is solemnly hand coded and designed from scratch by Demon Warlock. It is also very proud of being powered by WordPress, which is an exceptionally well written and beautiful CMS Rules are not made to be broken at Izwebz Bạn không được tự ý copy và phát hành lại nội dung của izwebz nếu chưa được sự đồng ý của tôi. Biết tôn trọng và cư xử hòa nhã với mọi người Không "bóc tem" bài viết. Izwebz được quyền xóa những comment nào không phù hợp với nội dung của trang web Câu hỏi thường gặp Liên hệ Tác giả Bản quyền Trang web vẫn đang trong quá trình phát triển về nội dung. Do vậy nếu bạn có khả năng hãy đóng góp bài viết hoặc bạn có thể quảng cáo trang web đến những người mà bạn biết. Được vậy tôi sẽ rất biết ơn bạn. . này Reply Tên bạn Email Website Comment Submit Độ lớn thực sự của Box | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/do-lon-thuc-su-cua -box/ [8/10/2010 3:03:04 PM] Chọn kiểu gõ: Tự động TELEX VNI. ngay chữ box model, anh xem giùm em cái. http://img148.imageshack.us/img148/1979/boxmodel.jpg Reply Tường Vi says: Reply Độ lớn thực sự của Box | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/do-lon-thuc-su-cua -box/ [8/10/2010. làm đến đây và test thử độ rộng bằng cách viết 1 dòng chữ khoang Reply Độ lớn thực sự của Box | Học thiết kế web theo chuẩn. http://www.izwebz.com/css/do-lon-thuc-su-cua -box/ [8/10/2010 3:03:04