thành phần block và inline _ học thiết kế web theo chuẩn.

Thành phần Block và Inline | Học thiết kế web theo chuẩn.
3:04:15 PM]
NAVIGATION
Câu Đố Trong Tuần 1
Giới thiệu về CSS
Giới thiệu Google webmaster
Cách chọn domain
Giao diện liquid với CSS – Phần 2
Thiết lập Mail Server Localhost
Luôn đọc lại bài viết của mình
HTML cơ bản – Phần 2
Đặt tên cho hình ảnh thế nào cho có lợi
Tạo kiểu chữ đổ bóng
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
Thành phần Block và Inline
January 14, 2010 9 comments
Khái niệm về Inline và Block là một khái niệm hết sức cơ bản nhưng

cũng cực kỳ quan trọng trong CSS. Hiểu được từng đặc điểm của
mỗi thành phần là chìa khóa quan trọng để bạn có thể vận hành CSS theo ý muốn. Trong bài
này tôi sẽ nói về chức năng của từng thành phần. Tuy nhiên tôi sẽ vẫn giữ nguyên từ chuyên
ngành là Block và Inline mà không dịch ra tiếng Việt là “khối” và “trong dòng” nghe cùi quá.
Khi các thành phần HTML được hiển thị trên trình duyệt nó thường có 2 cách hiển thị là theo
Block và Inline. Nói hình tượng để bạn dễ hiểu thì các thành phần Block giống như một bàn
cờ và các thành phần Inline là quân cờ. Các quân cờ nằm trong bàn cờ và bàn cờ thì không
bao giờ nằm trong quân cờ. Đây cũng là một nguyên tắc cơ bản nhất của Inline và Block.
Thành phần inline có thể nằm trong thành phần Block, nhưng Block không thể nằm trong
thành phần Inline.
Lý thuyết thì là vậy nhưng hơi mơ hồ khó hiểu, cách tốt nhất là chúng ta học từ ví dụ ở dưới.
Ví dụ về Block
Thẻ <p> và <div> là hai thành phần mặc định Block phổ biến nhất. Chỉ khi bạn khai báo
trong CSS và muốn biến nó thành inline với Property là Display: inline thì nó mới thành inline.
Ví dụ tôi có một thẻ <div> như sau:
Bạn sẽ thấy dòng chữ này chiếm hết độ rộng của thành phần mẹ chứa nó và tự động xuống hàng mới
Nếu tôi viết tiếp thì dòng mới sẽ bị đẩy xuống dưới dù cho nó được viết cùng hàng với dòng
ở trên nằm trong thẻ <div>
Các thành phần Block bao gồm
<div>: Là thành phần trắng dùng để làm “hộp” chứa.
<h1> ….<h6>: Các headings
<p>: Thẻ này dùng để mở đầu và kết thúc một đoạn văn 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
Thành phần Block và Inline | Học thiết kế web theo chuẩn.
3:04:15 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
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…?
<li>, <dt>, <dd>: hiển thị danh sách.
<table>, <blockquote>, <pre> và <form>
Ví dụ về thành phần Inline
Ví dụ tôi có một đoạn văn như sau, và trong đó tôi có một cặp thẻ <strong>, nó không bắt
thành phần nằm trong nó phải xuống hàng mà nó chỉ “nhẹ nhàng” chui vào giữa và sống
hạnh phúc trong đó. Cũng giống như quân cờ nằm trong bàn cờ vậy.
Các thành phần inline bao gồm
<span>, <a>, <em>, <br />
<img>
Ví dụ hình mặt cười này
sẽ xuất hiện ở trong dòng mà không ép chữ xuống hàng mới. Nó
chỉ chiếm khoảng không gian tối thiểu mà nó cần. Giống như quân cờ chỉ chiếm một khoảng
không gian nhất định của nó mà thôi. Chứ nó không ảnh hưởng đến bàn cờ.
<input>

Display Property
Cái hay của CSS là bạn không chỉ bị ép buộc sử dụng giá trị mặc định của từng thành phần.
Mà bạn có thể thay đổi cách hiển thị của nó theo ý mình. Ví dụ một thành phần <li> theo
mặc định là dạng Inline nhưng bạn có thể biến nó thành block với CSS tương ứng là Display:
block. Đây chính là một phần rất quan trọng trong thiết kế giao diện. Nó mở ra một chân trời
mới với các cách sắp xếp thành phần mà chỉ bị giới hạn bằng khả năng thiết kế của bạn.
Được áp dụng nhiều nhất là khi bạn sử dụng <li> làm menu như rất nhiều trang web. Ở mặc

định nếu bạn có một list như sau:
Nó sẽ xuất hiện như sau ở trình duyệt
Home
About
Services
FAQs
Contact
Nếu bạn muốn nó xuất hiện trong cùng một hàng thì bạn có thể khai bao CSS như sau:
1 <ul>
2 <li><a href="#">Home</a></li>
3 <li><a href="#">About</a></li>
4 <li><a href="#">Services</a></li>
5 <li><a href="#">FAQs</a></li>
6 <li><a href="#">Contact</a></li>
7 </ul>
1 .menuNav li {
2 display:inline;
3 background-color:#eee;
4 border:1px solid red;
5 margin:0; padding:0px 10px;
6 }
đây là inline element
button
Thành phần Block và Inline | Học thiết kế web theo chuẩn.
3:04:15 PM]
9 Comments
( Comment bài này )
« WordPress Theme – Comment và Custom Comment Tạo WordPress Theme – Content Slider »
Những bài viết có liên quan
Display Property

Phần 1: Chuyển PSD thành xHTML
Tạo thanh Navigation với Photoshop
Những cách trình bày CSS
Tránh lạm dụng thẻ Div
Your Ad Here for Free
$20 in Free Clicks to place your ad
here. Join Free now!
www.your-site.com
Your Ad Here!
BIDVERTISER ADS
Bạn cũng có thể tham khảo thêm video tutorial tôi đã làm về Display Property trong CSS để
hiểu thêm chi tiết.


Compatible Implant
Trilobe Compatible Implant The $145.00 Alternative
www.BlueSkyBio.com
nhtera says:
January 14, 2010 at 9:32 pm
Câu này anh DW gõ nhầm chút
“Ví dụ một thành phần theo mặc định là dạng Block nhưng bạn có thể biến nó thành
block với CSS tương ứng là Display: block.”
Reply
Demon Warlock says:
January 15, 2010 at 7:04 am
Oh, hehe, sorry nhé!
Reply
CuongNguyen says:
January 15, 2010 at 8:51 am
Hay thật ! Cái này rất bổ ích cho mình đây ! Hôm nọ vừa xem người ta sử dụng

cái inline này trên video mà không hiểu để làm gì, cám ơn anh DW nhé !
Em đang rất muốn làm cái comments mà anh DW chưa ra TUT. Mong anh sẽ ra
cái TUT làm comment để em và mọi người học tập !
Reply
Thành phần Block và Inline | Học thiết kế web theo chuẩn.
3:04:15 PM]
Demon Warlock says:
January 19, 2010 at 7:21 am
Ẹc! Video Comment to vật vã ngay trên trang chủ mà chú bảo chưa có
. Thiệt tình.
Reply
kimsangyoo says:
January 19, 2010 at 12:57 am
Ah Hình như em hiểu vấn đề rùi!
Cho em hỏi một câu nữa thui nha. Kết luận cuối cùng là , …, , , mặc định của nó là
Block phải không ạ? Tức là mình không cần khai báo thì trình duyệt sẽ tự hiểu là
Block đúng không ạ!
Rất …rất Cám ơn Bác DW về bài viết này.
P/S:Ngay khi em đọc thấy Title của bài viết là em biết Bác đã cố tình dành cho em rùi
Reply
kimsangyoo says:
January 19, 2010 at 12:59 am
Éc! Sorrry em chèn sai thẻ html: Sửa lại chỗ …( hàng thứ hai ) là , , …, ,
Reply
Demon Warlock says:
January 19, 2010 at 7:22 am
chèn code vào giữa hai dấu ` dấu nằm trên phím tab đó.
Reply
newbie_it says:
March 28, 2010 at 2:21 pm

hi!,anh cho em hỏi 1 câu ngoài lề 1 chút,hiện tại em đang tập tành thiết kế web và
code CSS,em có 1 chỗ vướng mắc thế này,trang web em viết khi zoom in hoặc zoom
out thì các thành phần trong trang co giãn không đồng đều,và không giữ nguyên vị trí
như cũ nữa,không giống như các trang trên mạng dù phóng to hay thu nhỏ thì các
thành phần vẫn giữ nguyên vị trí cũ.anh có thể giúp em giải quyết được không!
Reply
Phoebe says:
July 17, 2010 at 11:19 am
“Ví dụ một thành phần theo mặc định là dạng Inline nhưng bạn có thể biến nó thành
block với CSS tương ứng là Display: block.”
anh mixed up chữ inline và block rồi
Reply
Thành phần Block và Inline | Học thiết kế web theo chuẩn.
3:04:15 PM]
Leave a comment
( Chọn hình đại diện )
Chọn kiểu gõ: Tự động TELEX VNI Tắt
Tên bạn
Email
Website
Comment
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.
Submit
Thành phần Block và Inline | Học thiết kế web theo chuẩn.
3:04:15 PM]