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

Đă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 –

Trang 1

Đă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

EMAIL ARTICLES

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

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

Trang 2

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

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 ạ:

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…?

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

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 h {background: #eee ;}

2 #wrapper {width: 250px ;background - color: #EEE ;}

3 #box_model {padding: 0 5px ;}

Trang 3

11 Comments ( Comment bài này )

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

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

Trang 4

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

Trang 5

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

Trang 6

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

Trang 7

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)

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.

Tiêu đề	Độ lớn thực sự của box
Trường học	Trường Đại Học Công Nghệ Thông Tin
Chuyên ngành	Thiết Kế Web
Thể loại	Bài viết
Năm xuất bản	2008
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	7
Dung lượng	309,54 KB