{"id":311455,"date":"2024-01-25T16:01:08","date_gmt":"2024-01-25T09:01:08","guid":{"rendered":"https:\/\/hoanghamobile.com\/tin-tuc\/?p=311455"},"modified":"2024-01-25T16:01:08","modified_gmt":"2024-01-25T09:01:08","slug":"css-display","status":"publish","type":"post","link":"https:\/\/hoanghamobile.com\/tin-tuc\/css-display\/","title":{"rendered":"C\u00e1ch s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh Display trong CSS"},"content":{"rendered":"

N\u1ebfu b\u1ea1n \u0111ang h\u1ecdc v\u1ec1 ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh th\u00ec c\u00e1c thu\u1ed9c t\u00ednh Display l\u00e0 ngu\u1ed3n ki\u1ebfn th\u1ee9c b\u1eaft bu\u1ed9c b\u1ea1n ph\u1ea3i bi\u1ebft \u0111\u1ebfn. V\u1eady kh\u00e1i ni\u1ec7m v\u00e0 c\u00e1c thu\u1ed9c t\u00ednh <\/span>CSS Display<\/b> c\u1ee5 th\u1ec3 bao g\u1ed3m nh\u1eefng g\u00ec? Trong b\u00e0i vi\u1ebft n\u00e0y, Ho\u00e0ng H\u00e0 Mobile s\u1ebd tr\u00ecnh b\u00e0y cho b\u1ea1n nh\u1eefng th\u00f4ng tin r\u00f5 nh\u1ea5t, c\u00f9ng v\u1edbi c\u00e1c v\u00ed d\u1ee5 tr\u1ef1c quan d\u1ec5 hi\u1ec3u.<\/span><\/p>\n

Thu\u1ed9c t\u00ednh Display trong CSS l\u00e0 g\u00ec?<\/b><\/h2>\n

\u0110\u1ed1i v\u1edbi l\u0129nh v\u1ef1c ph\u00e1t tri\u1ec3n web, CSS (Cascading Style Sheets) \u0111\u00f3ng vai tr\u00f2 quan tr\u1ecdng trong vi\u1ec7c \u0111\u1ecbnh d\u1ea1ng v\u00e0 tr\u00ecnh b\u00e0y giao di\u1ec7n c\u1ee7a trang web.Trong CSS, thu\u1ed9c t\u00ednh Display ch\u1ecbu tr\u00e1ch nhi\u1ec7m x\u00e1c \u0111\u1ecbnh c\u00e1ch m\u1ed9t ph\u1ea7n t\u1eed HTML hi\u1ec3n th\u1ecb tr\u00ean trang. \u0110i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 l\u00e0m thay \u0111\u1ed5i c\u00e1ch ph\u1ea7n t\u1eed t\u01b0\u01a1ng t\u00e1c v\u1edbi c\u00e1c ph\u1ea7n t\u1eed kh\u00e1c trong layout v\u00e0 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn vi\u1ec7c hi\u1ec3n th\u1ecb c\u1ee7a n\u00f3.<\/span><\/p>\n

Thu\u1ed9c t\u00ednh Display gi\u00fap \u0111\u1ecbnh ngh\u0129a lo\u1ea1i h\u00ecnh hi\u1ec3n th\u1ecb c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed. C\u00f3 nhi\u1ec1u gi\u00e1 tr\u1ecb kh\u00e1c nhau cho thu\u1ed9c t\u00ednh n\u00e0y, nh\u01b0 block, inline, inline-block, flex, grid, none, v\u00e0 nhi\u1ec1u gi\u00e1 tr\u1ecb kh\u00e1c n\u1eefa. M\u1ed7i gi\u00e1 tr\u1ecb mang l\u1ea1i c\u00e1c t\u00ednh ch\u1ea5t \u0111\u1eb7c bi\u1ec7t, \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1ch ph\u1ea7n t\u1eed t\u01b0\u01a1ng t\u00e1c v\u1edbi c\u00e1c ph\u1ea7n t\u1eed xung quanh v\u00e0 c\u00e1ch ch\u00fang n\u1eb1m trong flow c\u1ee7a trang.\u00a0<\/span><\/p>\n

\"css-display-1\"<\/picture><\/p>\n

V\u00ed d\u1ee5, khi m\u1ed9t ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp v\u1edbi gi\u00e1 tr\u1ecb “block”, n\u00f3 s\u1ebd chi\u1ebfm h\u1ebft chi\u1ec1u r\u1ed9ng c\u1ee7a trang v\u00e0 b\u1eaft \u0111\u1ea7u t\u1eeb m\u1ed9t d\u00f2ng m\u1edbi. Trong khi gi\u00e1 tr\u1ecb “inline” s\u1ebd cho ph\u00e9p ph\u1ea7n t\u1eed hi\u1ec3n th\u1ecb tr\u00ean c\u00f9ng m\u1ed9t d\u00f2ng v\u1edbi ph\u1ea7n t\u1eed kh\u00e1c m\u00e0 kh\u00f4ng l\u00e0m chuy\u1ec3n d\u00f2ng.\u00a0<\/span><\/p>\n

Ngo\u00e0i ra, c\u00e1c gi\u00e1 tr\u1ecb nh\u01b0 “flex” v\u00e0 “grid” l\u00e0m cho vi\u1ec7c qu\u1ea3n l\u00fd layout tr\u1edf n\u00ean linh ho\u1ea1t v\u00e0 hi\u1ec7u qu\u1ea3 h\u01a1n, gi\u00fap t\u1ea1o ra giao di\u1ec7n \u0111\u00e1p \u1ee9ng v\u00e0 linh ho\u1ea1t v\u1edbi c\u00e1c k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh kh\u00e1c nhau.<\/span><\/p>\n

Gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh CSS Display bi\u1ec3u th\u1ecb nh\u01b0 th\u1ebf n\u00e0o?<\/b><\/h2>\n

D\u1ef1a theo c\u1ea5u tr\u00fac m\u1eb7c \u0111\u1ecbnh, c\u00e1c tr\u00ecnh duy\u1ec7t website s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb theo m\u1ed9t c\u1ea5u tr\u00fac ph\u1ea7n t\u1eed kh\u00e1c nhau. Ch\u1eb3ng h\u1ea1n nh\u01b0 ph\u1ea7n t\u1eed \u0111\u01a1n gi\u1ea3n nh\u1ea5t l\u00e0 <div> s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb d\u01b0\u1edbi d\u1ea1ng “block”. Trong khi \u0111\u00f3, ph\u1ea7n t\u1eed <span> l\u1ea1i \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb d\u01b0\u1edbi d\u1ea1ng “inline”. \u0110\u1ec3 gi\u00fap b\u1ea1n hi\u1ec3u r\u00f5 h\u01a1n th\u00ec ch\u00fang t\u00f4i cung c\u1ea5p cho b\u1ea1n m\u1ed9t v\u00ed d\u1ee5 c\u1ee5 th\u1ec3 sau \u0111\u00e2y.<\/span><\/p>\n

\"css-display-2\"<\/picture><\/p>\n

T\u1eeb v\u00ed d\u1ee5 tr\u00ean ch\u00fang ta th\u1ea5y \u0111\u01b0\u1ee3c ba ph\u1ea7n t\u1eed <div> \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c bi\u1ec3u th\u1ecb d\u01b0\u1edbi d\u1ea1ng c\u00e1c “block” v\u00e0 m\u1ed7i “block” \u0111\u01b0\u1ee3c k\u00e9o d\u00e0i theo chi\u1ec1u r\u1ed9ng c\u1ee7a “container m\u1eb9” c\u0169ng nh\u01b0 b\u1eaft \u0111\u1ea7u 1 d\u00f2ng m\u1edbi. Ti\u1ebfp \u0111\u1ebfn l\u00e0 ba ph\u1ea7n t\u1eed <span> c\u00f9ng n\u1eb1m tr\u00ean m\u1ed9t d\u00f2ng, c\u0169ng nh\u01b0 chi\u1ec1u d\u00e0i v\u00e0 chi\u1ec1u r\u1ed9ng c\u1ee7a ch\u00fang \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh trong c\u00f9ng m\u1ed9t \u0111o\u1ea1n v\u0103n b\u1ea3n.\u00a0<\/span><\/p>\n

Tuy nhi\u00ean khi k\u1ebft h\u1ee3p c\u00f9ng thu\u1ed9c t\u00ednh Display th\u00ec c\u00e1c gi\u00e1 tr\u1ecb c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c ghi \u0111\u00e8 theo m\u1ed9t d\u1ea1ng m\u1eb7c \u0111\u1ecbnh. \u0110\u00e2y l\u00e0 m\u1ed9t quy t\u1eafc c\u1ef1c k\u1ef3 quan tr\u1ecdng m\u00e0 b\u1ea1n c\u1ea7n ph\u1ea3i bi\u1ebft \u0111\u1ebfn. Ch\u00ednh v\u00ec v\u1eady, ch\u00fang ta h\u00e3y c\u00f9ng nghi\u00ean c\u1ee9u ti\u1ebfp c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh kh\u00e1c c\u1ee7a Display trong CSS l\u00e0 nh\u01b0 th\u1ebf n\u00e0o b\u1ea1n nh\u00e9.<\/span><\/p>\n

C\u00e1ch s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh Display trong CSS, k\u00e8m v\u00ed d\u1ee5 minh h\u1ecda<\/b><\/h2>\n

Sau khi \u0111\u00e3 t\u00ecm hi\u1ec3u nh\u1eefng th\u00f4ng tin t\u1ed5ng quan v\u1ec1 Display trong CSS, ti\u1ebfp theo ch\u00fang ta s\u1ebd nghi\u00ean c\u1ee9u \u0111\u1ebfn ph\u1ea7n ki\u1ebfn th\u1ee9c quan tr\u1ecdng nh\u1ea5t b\u00e0i vi\u1ebft n\u00e0y. V\u1edbi m\u1ed7i thu\u1ed9c t\u00ednh Display kh\u00e1c nhau s\u1ebd c\u00f3 c\u00f4ng th\u1ee9c v\u00e0 quy lu\u1eadt t\u01b0\u01a1ng \u1ee9ng, do \u0111\u00f3 b\u1ea1n c\u1ea7n hi\u1ec3u v\u00e0 ph\u00e2n bi\u1ec7t \u0111\u01b0\u1ee3c t\u1eebng thu\u1ed9c t\u00ednh th\u00f4ng qua v\u00ed d\u1ee5 k\u00e8m theo.\u00a0<\/span><\/p>\n

Thu\u1ed9c t\u00ednh CSS Display – \u201cinline\u201d<\/b><\/h3>\n

Thu\u1ed9c t\u00ednh “display” trong CSS v\u1edbi gi\u00e1 tr\u1ecb “inline” \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh m\u1ed9t tuy\u1ebfn n\u1ed9i dung m\u00e0 kh\u00f4ng c\u00f3 ng\u1eaft xu\u1ed1ng d\u00f2ng. B\u00ean c\u1ea1nh \u0111\u00f3, thu\u1ed9c t\u00ednh n\u00e0y s\u1ebd kh\u00f4ng b\u1eaft \u0111\u1ea7u b\u1eb1ng m\u1ed9t d\u00f2ng m\u1edbi, m\u00e0 ch\u1ec9 chi\u1ebfm chi\u1ec1u r\u1ed9ng c\u1ee7a m\u00e0n h\u00ecnh (\u0111o\u1ea1n c\u00f2n kh\u1ea3 d\u1ee5ng). Hay n\u00f3i c\u00e1ch kh\u00e1c, n\u00f3 ch\u1ec9 chi\u1ebfm ph\u1ea1m vi c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed b\u00ecnh th\u01b0\u1eddng c\u00f3 th\u1ec3 chi\u1ebfm. Ch\u00ednh v\u00ec v\u1eady, c\u00f3 th\u1ec3 n\u00f3i thu\u1ed9c t\u00ednh n\u00e0y c\u00f3 c\u00e1ch ho\u1ea1t \u0111\u1ed9ng kh\u00e1 t\u01b0\u01a1ng \u0111\u1ed3ng v\u1edbi c\u00e1c ph\u1ea7n t\u1eed <span>. \u0110\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n th\u00ec b\u1ea1n \u0111\u1ecdc h\u00e3y nh\u00ecn v\u00e0o \u0111o\u1ea1n code v\u00ed d\u1ee5 trong h\u00ecnh nh\u00e9.<\/span><\/p>\n

\"css-display-3\"<\/picture><\/p>\n

L\u01b0u \u00fd: V\u00ec \u0111\u1ec3 c\u00e1c b\u1ea1n \u0111\u1ecdc hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 t\u00e1c d\u1ee5ng c\u1ee7a thu\u1ed9c t\u00ednh “inline” trong Dislay n\u00ean ch\u00fang t\u00f4i \u0111\u00e3 l\u01b0\u1ee3c b\u1ecf b\u1edbt ph\u1ea7n “padding”. B\u00ean c\u1ea1nh \u0111\u00f3, chi\u1ec1u d\u00e0i v\u00e0 chi\u1ec1u r\u1ed9ng c\u1ee7a thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh d\u1ef1a theo n\u1ed9i dung m\u00e0 ch\u00fang ch\u1ee9a. T\u1eeb \u0111\u00f3, b\u1ea1n kh\u00f4ng th\u1ec3 n\u00e0o thi\u1ebft l\u1eadp chi\u1ec1u d\u00e0i v\u00e0 chi\u1ec1u r\u1ed9ng c\u1ee7a n\u00f3 b\u1eb1ng CSS nh\u00e9.<\/span><\/p>\n

Thu\u1ed9c t\u00ednh Display – \u201cblock\u201d<\/b><\/h3>\n

Th\u00eam m\u1ed9t thu\u1ed9c t\u00ednh <\/span>CSS Display<\/b> th\u00fa v\u1ecb kh\u00e1c m\u00e0 c\u00e1c b\u1ea1n h\u1ecdc ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh c\u1ea7n bi\u1ebft, \u0111\u00f3 ch\u00ednh l\u00e0 “block”. Ph\u1ea7n t\u1eed block th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u1ecbnh d\u1ea1ng c\u00e1c ph\u1ea7n t\u1eed c\u00f3 k\u00edch th\u01b0\u1edbc l\u1edbn nh\u01b0 c\u00e1c \u0111o\u1ea1n v\u0103n b\u1ea3n, \u0111\u1ed3ng th\u1eddi ch\u00fang th\u01b0\u1eddng b\u1eaft \u0111\u1ea7u v\u00e0 k\u1ebft th\u00fac tr\u00ean m\u1ed9t d\u00f2ng m\u1edbi, t\u1ea1o ra s\u1ef1 ph\u00e2n t\u00e1ch r\u00f5 r\u00e0ng gi\u1eefa ch\u00fang v\u00e0 c\u00e1c ph\u1ea7n t\u1eed xung quanh. Chi ti\u1ebft h\u01a1n th\u00ec ph\u1ea7n t\u1eed n\u00e0y c\u00f3 th\u1ec3 k\u00e9o d\u00e0i to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng c\u1ee7a m\u00e0n h\u00ecnh, c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u0169ng t\u01b0\u01a1ng t\u1ef1 nh\u01b0 <div>. Tuy nhi\u00ean khi s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh n\u00e0y b\u1ea1n c\u0169ng \u0111\u1eebng qu\u00ean c\u00e1c d\u1ea5u ng\u1eaft d\u00f2ng tr\u01b0\u1edbc v\u00e0 sau c\u00e1c ph\u1ea7n t\u1eed nh\u00e9.\u00a0<\/span><\/p>\n

\"css-display-4\"<\/picture><\/p>\n

Thu\u1ed9c t\u00ednh Display – \u201cinline-block\u201d<\/b><\/h3>\n

Thu\u1ed9c t\u00ednh Display trong CSS v\u1edbi gi\u00e1 tr\u1ecb “inline-block” k\u1ebft h\u1ee3p t\u00ednh ch\u1ea5t c\u1ee7a “inline” v\u00e0 “block”, mang l\u1ea1i s\u1ef1 linh ho\u1ea1t v\u00e0 ki\u1ec3m so\u00e1t trong vi\u1ec7c \u0111\u1ecbnh d\u1ea1ng giao di\u1ec7n trang web. Khi m\u1ed9t ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp v\u1edbi gi\u00e1 tr\u1ecb “inline-block”, n\u00f3 s\u1ebd hi\u1ec3n th\u1ecb nh\u01b0 m\u1ed9t d\u00f2ng, nh\u01b0ng v\u1eabn gi\u1eef kh\u1ea3 n\u0103ng \u00e1p d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng c\u1ee7a kh\u1ed1i. \u0110\u1ed3ng th\u1eddi, c\u00e1c ph\u1ea7n t\u1eed c\u0169ng c\u00f3 \u0111\u1eb7c t\u00ednh gi\u1ed1ng v\u1edbi “block” \u1edf ch\u1ed7 l\u00e0 ch\u00fang ta c\u00f3 th\u1ec3 thay \u0111\u1ed5i chi\u1ec1u d\u00e0i v\u00e0 chi\u1ec1u r\u1ed9ng c\u1ee7a n\u00f3 b\u1eb1ng CSS. \u0110i\u1ec1u n\u00e0y l\u00e0m cho n\u00f3 ph\u00f9 h\u1ee3p cho c\u00e1c n\u00fat ho\u1eb7c ph\u1ea7n t\u1eed c\u00f3 k\u00edch th\u01b0\u1edbc kh\u00f4ng chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng c\u1ee7a trang.<\/span><\/p>\n

\"css-display-5\"<\/picture><\/p>\n

Thu\u1ed9c t\u00ednh Display – \u201clist-item\u201d<\/b><\/h3>\n

Thu\u1ed9c t\u00ednh <\/span>CSS display<\/b> v\u1edbi gi\u00e1 tr\u1ecb list-item \u0111\u00f3ng vai tr\u00f2 quan tr\u1ecdng trong vi\u1ec7c \u0111\u1ecbnh d\u1ea1ng v\u00e0 hi\u1ec3n th\u1ecb c\u00e1c ph\u1ea7n t\u1eed li\u00ean quan \u0111\u1ebfn danh s\u00e1ch tr\u00ean trang web. Khi m\u1ed9t ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp v\u1edbi gi\u00e1 tr\u1ecb list-item, n\u00f3 s\u1ebd hi\u1ec3n th\u1ecb nh\u01b0 m\u1ed9t m\u1ee5c trong danh s\u00e1ch, th\u01b0\u1eddng l\u00e0 k\u00e8m theo m\u1ed9t k\u00fd t\u1ef1 \u0111\u00e1nh s\u1ed1 ho\u1eb7c \u0111\u00e1nh d\u1ea5u. Theo \u0111\u00f3, t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng l\u00e0 ph\u1ea7n t\u1eed c\u1ea5p “block”, ti\u1ebfp \u0111\u1ebfn l\u00e0 v\u0103n b\u1ea3n tr\u1edf th\u00e0nh ph\u1ea7n t\u1eed “inline” v\u00e0 s\u1ebd c\u00f3 th\u00eam m\u1ed9t d\u1ea5u g\u1ea1ch \u0111\u1ea7u d\u00f2ng n\u1eb1m \u1edf b\u00ean tr\u00e1i.\u00a0<\/span><\/p>\n

\"css-display-6\"<\/picture><\/p>\n

Song song, vi\u1ec7c s\u1eed d\u1ee5ng gi\u00e1 tr\u1ecb list-item gi\u00fap ki\u1ec3m so\u00e1t v\u00e0 \u0111\u1ecbnh d\u1ea1ng c\u00e1c ph\u1ea7n t\u1eed danh s\u00e1ch m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng. B\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh giao di\u1ec7n c\u1ee7a m\u1ed7i m\u1ee5c danh s\u00e1ch b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh CSS kh\u00e1c nh\u01b0 \u201clist-style-type\u201d, \u201clist-style-image\u201d, hay \u201clist-style-position\u201d.<\/span><\/p>\n

Thu\u1ed9c t\u00ednh Display – “none”<\/b><\/h3>\n

Display None nh\u00ecn c\u00f3 v\u1ebb \u0111\u01a1n gi\u1ea3n, nh\u01b0ng \u0111\u00f4i khi b\u1ea1n s\u1ebd r\u1ea5t c\u1ea7n \u0111\u1ebfn vi\u1ec7c s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <\/span>CSS Display<\/b> n\u00e0y. Ch\u1ee9c n\u0103ng ch\u00ednh c\u1ee7a “none” l\u00e0 gi\u00fap \u1ea9n \u0111i m\u1ed9t ph\u1ea7n t\u1eed tr\u00ean trang web m\u00e0 kh\u00f4ng l\u00e0m \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn layout ho\u1eb7c c\u1ea5u tr\u00fac c\u1ee7a trang. Khi m\u1ed9t ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp v\u1edbi gi\u00e1 tr\u1ecb “none”, n\u00f3 s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb v\u00e0 kh\u00f4ng chi\u1ebfm kh\u00f4ng gian tr\u00ean trang, t\u1ee9c l\u00e0 n\u00f3 s\u1ebd m\u1ea5t kh\u1ecfi flow c\u1ee7a trang.\u00a0<\/span><\/p>\n

\"css-display-7\"<\/picture><\/p>\n

L\u01b0u \u00fd: S\u1eed d\u1ee5ng gi\u00e1 tr\u1ecb “none” l\u00e0m cho ph\u1ea7n t\u1eed tr\u1edf n\u00ean kh\u00f4ng hi\u1ec3n th\u1ecb, nh\u01b0ng v\u1eabn t\u1ed3n t\u1ea1i trong DOM (Document Object Model). Do \u0111\u00f3, n\u1ebfu b\u1ea1n mu\u1ed1n hi\u1ec3n th\u1ecb l\u1ea1i ph\u1ea7n t\u1eed, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh d\u1ea1ng l\u1ea1i thu\u1ed9c t\u00ednh display th\u00e0nh gi\u00e1 tr\u1ecb ph\u00f9 h\u1ee3p, ch\u1eb3ng h\u1ea1n nh\u01b0 “block” ho\u1eb7c “inline”.<\/span><\/p>\n

Thu\u1ed9c t\u00ednh CSS Display – “grid”<\/b><\/h3>\n

Gi\u00e1 tr\u1ecb “grid” trong CSS l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd cho vi\u1ec7c t\u1ea1o ra b\u1ed1 c\u1ee5c linh ho\u1ea1t v\u00e0 ph\u1ee9c t\u1ea1p tr\u00ean trang web. V\u1edbi m\u1ed7i m\u1ed9t ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp v\u1edbi gi\u00e1 tr\u1ecb “grid”, n\u00f3 s\u1ebd tr\u1edf th\u00e0nh m\u1ed9t “container grid”, gi\u00fap qu\u1ea3n l\u00fd b\u1ed1 c\u1ee5c theo h\u00e0ng v\u00e0 c\u1ed9t. H\u01a1n n\u1eefa, thu\u1ed9c t\u00ednh n\u00e0y c\u00f2n mang l\u1ea1i kh\u1ea3 n\u0103ng ki\u1ec3m so\u00e1t tuy\u1ec7t v\u1eddi. B\u1ea1n c\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc v\u00e0 t\u1ef7 l\u1ec7 c\u1ee7a c\u00e1c c\u1ed9t v\u00e0 h\u00e0ng, \u0111\u1ecbnh v\u1ecb c\u00e1c ph\u1ea7n t\u1eed con trong “grid” m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng, v\u00e0 th\u1eadm ch\u00ed n\u00f3 c\u00f2n c\u00f3 th\u1ec3 t\u1ea1o ra c\u00e1c “grid ph\u1ee5” b\u00ean trong “grid ch\u00ednh”.\u00a0<\/span><\/p>\n

\"css-display-8\"<\/picture><\/p>\n

\u0110\u1eb7c bi\u1ec7t, t\u00ednh \u1ee9ng d\u1ee5ng c\u1ee7a “grid” r\u1ea5t cao, nh\u1ea5t l\u00e0 trong x\u00e2y d\u1ef1ng c\u00e1c trang web \u0111\u00f2i h\u1ecfi c\u1ea5u tr\u00fac ph\u1ee9c t\u1ea1p. Ch\u1eb3ng h\u1ea1n nh\u01b0 b\u1ea3ng \u0111i\u1ec1u khi\u1ec3n qu\u1ea3n tr\u1ecb ho\u1eb7c trang ch\u1ee7 v\u1edbi nhi\u1ec1u kh\u1ed1i th\u00f4ng tin. N\u00f3 c\u0169ng gi\u00fap t\u1ed1i \u01b0u h\u00f3a kh\u00f4ng gian v\u00e0 t\u1ea1o ra trang web \u0111\u00e1p \u1ee9ng hi\u1ec7u qu\u1ea3.<\/span><\/p>\n

Thu\u1ed9c t\u00ednh Display trong CSS – “flex”<\/b><\/h3>\n

Thu\u1ed9c t\u00ednh Display trong CSS cu\u1ed1i c\u00f9ng m\u00e0 ch\u00fang t\u00f4i mu\u1ed1n chia s\u1ebb \u0111\u1ebfn b\u1ea1n, \u0111\u00f3 ch\u00ednh l\u00e0 “Flex”. Thu\u1ed9c t\u00ednh n\u00e0y t\u1ea1o ra s\u1ef1 t\u00ednh linh ho\u1ea1t \u0111\u00e1ng k\u1ec3 khi x\u00e2y d\u1ef1ng c\u00e1c b\u1ed1 c\u1ee5c trang web. B\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng c\u0103n gi\u1eefa, c\u0103n \u0111\u1ec1u kho\u1ea3ng c\u00e1ch hay \u0111\u1ea3o ng\u01b0\u1ee3c th\u1ee9 t\u1ef1 hi\u1ec3n th\u1ecb c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed con. Ngo\u00e0i ra, thu\u1ed9c t\u00ednh “flex” c\u00f2n h\u1ed7 tr\u1ee3 \u0111i\u1ec1u ch\u1ec9nh t\u1ef7 l\u1ec7 k\u00edch th\u01b0\u1edbc gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed theo \u00fd mu\u1ed1n c\u1ee7a ng\u01b0\u1eddi s\u1eed d\u1ee5ng.\u00a0<\/span><\/p>\n

\"css-display-9\"<\/picture><\/p>\n

S\u1eed d\u1ee5ng gi\u00e1 tr\u1ecb “flex” gi\u00fap t\u1ed1i \u01b0u h\u00f3a kh\u00f4ng gian v\u00e0 l\u00e0m cho trang web \u0111\u00e1p \u1ee9ng t\u1ed1t tr\u00ean nhi\u1ec1u k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh. N\u00f3 th\u01b0\u1eddng \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng trong vi\u1ec7c x\u00e2y d\u1ef1ng c\u00e1c thanh \u0111i\u1ec1u h\u01b0\u1edbng, c\u00e1c ph\u1ea7n t\u1eed \u0111\u01a1n gi\u1ea3n nh\u01b0 h\u1ed9p tho\u1ea1i ho\u1eb7c th\u1eadm ch\u00ed trong vi\u1ec7c t\u1ea1o ra b\u1ed1 c\u1ee5c ph\u1ee9c t\u1ea1p v\u00e0 \u0111\u1ed9ng.<\/span><\/p>\n

L\u01b0u \u00fd khi s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh Display trong CSS<\/b><\/h2>\n

Khi s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh display trong CSS, c\u00f3 m\u1ed9t s\u1ed1 l\u01b0u \u00fd quan tr\u1ecdng c\u1ea7n xem x\u00e9t \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o hi\u1ec7u su\u1ea5t v\u00e0 t\u00ednh linh ho\u1ea1t trong vi\u1ec7c thi\u1ebft k\u1ebf trang web. Ch\u00ednh v\u00ec v\u1eady, b\u1ea1n c\u1ea7n xem qua nh\u1eefng m\u1eb9o h\u1eefu \u00edch m\u00e0 Ho\u00e0ng H\u00e0 Mobile chia s\u1ebb ngay sau \u0111\u00e2y.<\/span><\/p>\n

Ch\u1ecdn gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh ph\u00f9 h\u1ee3p ng\u1eef c\u1ea3nh<\/b><\/h3>\n

C\u00e1c c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm nh\u01b0 Google r\u1ea5t \u01b0u ti\u00ean vi\u1ec7c s\u1eed d\u1ee5ng ng\u1eef c\u1ea3nh ch\u00ednh x\u00e1c \u0111\u1ec3 hi\u1ec3u c\u1ea5u tr\u00fac v\u00e0 \u00fd ngh\u0129a c\u1ee7a trang web. Do \u0111\u00f3, ng\u01b0\u1eddi l\u1eadp tr\u00ecnh n\u00ean s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <\/span>CSS Display<\/b> \u0111\u00fang c\u00e1ch nh\u1eb1m gi\u00fap tr\u00ecnh t\u00ecm ki\u1ebfm hi\u1ec3u r\u00f5 h\u01a1n v\u1ec1 c\u00e1ch trang web c\u1ee7a b\u1ea1n t\u1ed5 ch\u1ee9c th\u00f4ng tin. C\u1ed9ng th\u00eam v\u00e0o \u0111\u00f3, m\u00e3 ngu\u1ed3n s\u1ebd d\u1ec5 \u0111\u1ecdc v\u00e0 b\u1ea3o tr\u00ec h\u01a1n khi s\u1eed d\u1ee5ng “Display” m\u1ed9t c\u00e1ch logic. Vi\u1ec7c \u0111\u1eb7t gi\u00e1 tr\u1ecb ph\u00f9 h\u1ee3p v\u1edbi m\u1ed7i ph\u1ea7n t\u1eed gi\u00fap ng\u01b0\u1eddi d\u00f9ng nh\u00ecn v\u00e0o m\u00e3 ngu\u1ed3n m\u00e0 kh\u00f4ng c\u1ea7n xem x\u00e9t nhi\u1ec1u t\u00e0i li\u1ec7u h\u01a1n.<\/span><\/p>\n

\"css-display-10\"<\/picture><\/p>\n

Kh\u1ea3 n\u0103ng t\u01b0\u01a1ng th\u00edch v\u1edbi tr\u00ecnh duy\u1ec7t<\/b><\/h3>\n

Ng\u01b0\u1eddi d\u00f9ng s\u1eed d\u1ee5ng nhi\u1ec1u tr\u00ecnh duy\u1ec7t kh\u00e1c nhau nh\u01b0 Chrome, Firefox, Safari, Edge, hay Internet Explorer. M\u1ed7i tr\u00ecnh duy\u1ec7t c\u00f3 c\u00e1ch hi\u1ec3u v\u00e0 x\u1eed l\u00fd CSS kh\u00e1c nhau, v\u00e0 s\u1ef1 ch\u00fa \u00fd \u0111\u1ebfn t\u01b0\u01a1ng th\u00edch gi\u1eefa ch\u00fang gi\u00fap \u0111\u1ea3m b\u1ea3o trang web ho\u1ea1t \u0111\u1ed9ng m\u01b0\u1ee3t m\u00e0 tr\u00ean m\u1ecdi n\u1ec1n t\u1ea3ng. Ch\u01b0a k\u1ec3 \u0111\u1ebfn, c\u00e1c tr\u00ecnh duy\u1ec7t th\u01b0\u1eddng c\u00f3 nhi\u1ec1u phi\u00ean b\u1ea3n kh\u00e1c nhau v\u00e0 m\u1ed7i phi\u00ean b\u1ea3n c\u00f3 th\u1ec3 c\u00f3 s\u1ef1 kh\u00e1c bi\u1ec7t trong h\u1ed7 tr\u1ee3 v\u00e0 x\u1eed l\u00fd CSS.<\/span><\/p>\n

\"css-display-11\"<\/picture><\/p>\n

Th\u00eam v\u00e0o \u0111\u00f3, trang web c\u1ea7n ph\u1ea3i hi\u1ec3n th\u1ecb \u0111\u00fang tr\u00ean nhi\u1ec1u lo\u1ea1i thi\u1ebft b\u1ecb v\u00e0 k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh. N\u00ean vi\u1ec7c \u0111\u1ea3m b\u1ea3o t\u00ednh t\u01b0\u01a1ng th\u00edch tr\u00ecnh duy\u1ec7t gi\u00fap trang web ph\u1ea3n \u00e1nh \u0111\u00fang \u00fd \u0111\u1ed3 thi\u1ebft k\u1ebf tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb.<\/span><\/p>\n

K\u1ebft lu\u1eadn<\/b><\/h2>\n

Nh\u00ecn chung, <\/span>CSS Display<\/b> l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd \u0111\u1ec3 ki\u1ec3m so\u00e1t giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng, t\u1ed1i \u01b0u h\u00f3a tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng, c\u0169ng nh\u01b0 t\u1ea1o ra c\u00e1c trang web th\u00fa v\u1ecb v\u00e0 chuy\u00ean nghi\u1ec7p. \u0110\u1eb7c bi\u1ec7t, n\u1ebfu ng\u01b0\u1eddi d\u00f9ng c\u00f3 s\u1ef1 hi\u1ec3u bi\u1ebft s\u00e2u r\u1ed9ng v\u1ec1 c\u00e1c gi\u00e1 tr\u1ecb v\u00e0 c\u00e1ch ch\u00fang t\u01b0\u01a1ng t\u00e1c th\u00ec s\u1ebd t\u1eadn d\u1ee5ng \u0111\u01b0\u1ee3c t\u1ed1i \u0111a ti\u1ec1m n\u0103ng c\u1ee7a n\u00f3 trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n web.<\/span><\/p>\n

Xem th\u00eam:<\/strong><\/p>\n