Box Model _ Học thiết kế web theo chuẩn

Box Model | Hc thit k web theo chun.

http://www.izwebz.com/css/css-box-model/[8/10/2010 2:59:51 PM]

NAVIGATION

Nhng iu nn trnh khi thit k trang web

Phn mm FTP min ph FileZilla

Gii thiu v CSS3

jQuery Image Hover

Ngun icon min ph

ng lm na chng ri ngng

Giao din mi cho Izwebz

Lnh vc trung tm

Cch chn domain

Nhng iu nn trnh khi ti u ho cng c tm kim

PHP CO BN NNG CAO

tm hiu c php v phng thc PHP

Php ton v pht biu c iu kin trong php

$_POST v $_GET

Lm quen i tng Session

Khai bo hm, chn tp tin v tp tin dng chun

Cch x l chui, mng, kiu DataTime

Thao tc trn c s d liu MySQL

PHP v Database

Phn trang vi PHP

Xa, Cp nht d liu dng mng

To Mailing List: PHP & Mysql

RECENT COMMENTS

Random News Popular

EMAIL ARTICLES

Box Model

October 8, 2008 7 comments

Bt c thnh phn no bn to ra trong code XHTML u c bao

quanh bi mt hp k c dng ch bn g ra cng c mt hp bao

quanh n. gi tr mc nh ng vin cng nh mu sc ca hp l trong sut do vy bn

khng thy c. Nhng vi CSS bn c th cho hin th ng vin cng nh mu nn

ca bt c i tng no trong trang m bn mun. v d di y ti cho hin th ng

vin ca th p v th h1 v mu nn l mu #EEE bn thy c khi nim hp baoquanh i tng.

Dng ch vi ng vin v mu nn

Nhung vi CSS bn c th cho hin th ungvin cng nhu mu nn ca bt c i tung notrong trang m bn mun. v d dui y ticho hin th ung vin ca th

Box Model

Box Model l khi nim rt c bn v cng l quan trng nht ca CSS. Bi v n quyt nh

cc thnh phn trn trang web s c xut hin nh th no v chng tng tc vi nhau

ra lm sao. Di y l hnh minh ho cho bn thy r c nhng thnh phn ca hp v

chng ta c th tc ng n n nh th no

1 p {border: solid 1px red; background-color:#bbeeff;}2 h1 {border: solid 1px red; background-color:#bbeeff;}

CSSCSS C bn

jQueryjQuery C bn

Pht trin WebBi vit, kinh nghim

VideosCc th loi

WordPressTutorials, Hacks

HOME CU HI THNG GP LIN H TC GI BN QUYN



QUNG CO

Your Ad Here for Free$20 in Free Clicks to place your adhere. Join Free now!www.your-site.com

Your Ad Here for Free$20 in Free Clicks to place your ad

To WordPress Theme Dng xHTML (16)

chicken_roll: hahaha hay qu ht ch tr (thanks you

very much much) nghe anh ni y ko...

To WordPress Theme Slice hnh (22)

chicken_roll: ui ui hay qu cm n nhiu hc rt nhiu

t anh v Anh CS thanks pht cho c...

To WordPress Theme Search form v Random

Posts (15)

DiVIVu: @ajimoto & tuyen: Lm th ny l c bn :



here. Join Free now!www.your-site.com



Your Ad Here!

BIDVERTISER ADS

nhng v d trn mi mt loi u c 3 gi tr tng ng v theo th t l: border-style, border-width v border-color. Bn c th khai bo chng ring bit nh sau:

hoc gp chung vo mt nh sau

Margin

Bn ngoi border l margin, n c dng to khong cch gia cc thnh phn. Cc

thnh phn margin, border v padding u c mc nh l 0. Nhng mi trnh duyt li

mc nh mt kiu, do vy khi vit code CSS bn nn lun reset cc gi tr ny li thnh 0

trnh phin phc sau ny.

Tnh b ca Margin

Tnh nng cui cng ca Margin m bn cn bit l tnh b ca n. V d hnh di y ti

c ba on vn bn v u c margin-top: 50px v margin-bottom: 30px c xp chng ln

nhau. C th bn ngh v margin-bottom ca on vn bn trn l 30px v margin-top ca

on vn bn k tip l 50px th tng cng 2 on vn ny s phi cch nhau mt khong l

80 px. Nhng trong thc t li khng phi vy. Khi c hai gi tr margin c thit lp, th

margin ln s nut margin b hay n b vo nhau. Do vy v d di, n ch cch nhau

50 px v khong cch gia chng l khong cch ca margin c thit lp ln hn.

on vn th nht

on vn th hai

on vn th ba

Code CSS

Cch vit rt gn

Trong v d trn bn thy ti dng {margin: 50px 0px 30px 0px;} y chnh l cchvit tt trong CSS khi bn phi lm vic vi Border, Padding v Margin. Th t ca n lun

theo chiu kim ng h Top, Right, Bottom v Left. Bn c th nh nh kiu 12 gi, 3 gi, 6

gi v 9 gi.

V d khi bn mun tc ng n Margin ca mt thnh phn bt k bn c th vit y

l:

1 p {border-style: dashed; border-width: 3px; border-color: yellow;}

1 p {border: 3px dashed yellow;}

1 * {margin: 0; padding: 0;}

1 p {border: 1px solid red; margin: 50px 0px 30px 0px;}

1 {margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px;}



7 Comments ( Comment bi ny )

ln thc s ca Box Class v ID

Nhng bi vit c lin quan

ln thc s ca Box

Pseudo Class

Clear v Float

Th bc trong XHTML

Contextual Position

hoc bn c th gin lc n n gin nh sau tit kim thi gian v cng sc, bn ch

cn du cch gia cc gi tr:

Bn khng cn phi vit ht ton b 4 gi tr, nu mt trong 4 gi tr trn b thiu, th n s

ly gi tr ca cnh i din vi n.

Trong v d ny, bi v cnh bn tri khng c do vy gi tr ca cnh bn phi c s

dng v n c dy l 10 px. Cn nu nh ch c duy nht mt gi tr nh sau

Th c 4 cnh s c dy l 12px. Chnh v th bn khng th b trng gi tr no c. Nu

bn mun mt cnh no khng hin th, bn phi khai bo n vi gi tr l 0. Tuy nhin,

khi gi tr l 0 bn khng cn phi khai bo n v.

Nu bn khai bo gi tr bng 0, bn khng bt buc phi thm n v o vo ng sau.

Nhng trnh nhm ln v sau ny c phi chnh sa s tit kim thi gian hn.

1 {margin:5px 10px 15px 20px;}

1 {margin:12px 10px 6px;}

1 {margin:12px;}

1 {border:0px 0px 2px 4px;}

Compatible ImplantTrilobe Compatible Implant The $145.00 Alternativewww.BlueSkyBio.com

Tran says:

October 18, 2009 at 6:56 am

Em gp rc ri vi margin, di y, em cho margin vo 1 class, ri trong file html

em chn class vo th margin khng chy. Em tht s khng hiu sai u,

Reply



y l CSS ca em :

@charset "utf-8";/* CSS Document */

tieude, cth1, date, time, match {font-family:Tahoma, Geneva, sans-serif; }tieude {font-size:36px; color:#F00; border-style:solid; border-width:thin; border-color:#F00; padding:5px; }cth1 {font-size:14px; color:#9C9; }date {font-size:24px; color:#C66; }time {font-size:18px; color:#F96; }

Demon Warlock says:

October 18, 2009 at 7:41 am

Thuc tnh margin u cn phi s dng class em? nu em mun thnh phn no c

margin th em s dng selector chn n thi.

V d em mun tieude c margin th em lm th ny

Nn s dng cch vit tt trong CSS cho tit kim thi gian em.

tieude {margin: 20px 0px;}

Reply

NickB says:

October 18, 2009 at 11:43 pm

n gin khng chy l do sai c php nu l class th . cn id th #

VD .tieude {margin: 20px 0px;}

Kim tra li hen

Reply

mrlonganh says:

December 29, 2009 at 7:05 am

kh hay v chi tit

Reply

Ngc Vit says:

May 2, 2010 at 10:17 am

anh i cho em hi padding:inherit l sao ?

em khng hiu inherit l sao ht.

Reply

thoandien says: Reply



Leave a comment ( Chn hnh i din )

July 20, 2010 at 11:45 pm

Cho anh DW.

Em c mt thc mc l ti sao li margin-top: 50px v margin-bottom: 30px, d

bit c tnh b ca n khi chng chn ci gi tr ln nht p dng vo th html.

Theo tnh b ca margin th chn gi tr l 50px, vy cn gi tr 30px khi no th p

dng vo h anh? n c nh hng ntn? c cn thit gi tr margin-bottom: 30px

hay l margin-bottom: 0px;

Clackken Smith says:

July 21, 2010 at 6:27 pm

C v bn cha hiu v gi tr Margin. H thng margin bao gm 4 kiu.

margin-top : Khong cch pha trn.

margin-bottom : Khong cch pha di.

margin-left : Khong cch bn tri.

margin-right : Khong cch bn phi.

Cc gi tr trn s c lp vi nhau, nu bn ch mun box ca mnh c khong cch

pha trn m thi, cn li cc khong cch khc th khng thay i th bn ch s

dng mi margin-top.

- Trng hp bn mun khong cch u th ch s dng gi tr margin m thi,

khng cn cc gi tr top, bottom

Reply

Tn bn

Email

Website

Comment



Chn kiu g: T ng TELEX VNI Tt

Luu khi post comment:

Khng "bc tem" topic

Dng li l c vn ho v lch s

Xem trang FAQs trc khi hi

Bn c th dng th HTML nh:, ,

Wrap code trong du `backtick` (du trn phm 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

Bn khng c t copy v pht hnh

li ni dung ca izwebz nu cha c s

ng ca ti.

Bit tn trng v c x ha nh vi mi

ngi

Khng "bc tem" bi vit.

Izwebz c quyn xa nhng comment

no khng ph hp vi ni dung ca trang

web

Cu hi thng gp

Lin h

Tc gi

Bn quyn

Trang web vn ang trong qu trnh pht trin

v ni dung. Do vy nu bn c kh nng hy

ng gp bi vit hoc bn c th qung co

trang web n nhng ngi m bn bit.

c vy ti s rt bit n bn.

izwebz.comBox Model | Hc thit k web theo chun.

9tL2Nzcy9jc3MtYm94LW1vZGVsLwA=: form1: s:

9tL2Nzcy9jc3MtYm94LW1vZGVsLwA=: form9: submit: author: email: url: comment: viet_method:

Documents

Box Model _ Học thiết kế web theo chuẩn