độ lớn thực sự của box _ học thiết kế web theo chuẩn.

Độ lớn thực sự của Box | Học thiết kế web theo chuẩn.
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.
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.
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.
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.
/>Reply
Tường Vi says:
Reply
Độ lớn thực sự của Box | Học thiết kế web theo chuẩn.
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.

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

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:

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.
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.