CSS3 box-orient ÊôÐÔ

ʵÀý

ˮƽÅÅÁÐ div ÔªËØµÄ×ÓÔªËØ£º

div
{
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;

/* Safari¡¢Opera ÒÔ¼° Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;

/* W3C */
display:box;
box-orient:horizontal;
}

Ç××ÔÊÔÒ»ÊÔ

ä¯ÀÀÆ÷Ö§³Ö

ĿǰûÓÐä¯ÀÀÆ÷Ö§³Ö box-orient ÊôÐÔ¡£

Firefox Ö§³ÖÌæ´úµÄ -moz-box-orient ÊôÐÔ¡£

Safari¡¢Opera ÒÔ¼° Chrome Ö§³ÖÌæ´úµÄ -webkit-box-orient ÊôÐÔ¡£

¶¨ÒåºÍÓ÷¨

box-orient ÊôÐԹ涨¿òµÄ×ÓÔªËØÓ¦¸Ã±»Ë®Æ½»ò´¹Ö±ÅÅÁС£

Ìáʾ£ºË®Æ½¿òÖеÄ×ÓÔªËØ´Ó×óÏòÓÒ½øÐÐÏÔʾ£¬¶ø´¹Ö±¿òµÄ×ÓÔªËØ´ÓÉÏÏòϽøÐÐÏÔʾ¡£²»¹ý£¬box-direction ºÍ box-ordinal-group Äܹ»¸Ä±äÕâÖÖ˳Ðò¡£

ĬÈÏÖµ£º inline-axis
¼Ì³ÐÐÔ£º no
°æ±¾£º CSS3
JavaScript Óï·¨£º object.style.boxOrient="vertical"

Óï·¨

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
Öµ ÃèÊö ²âÊÔ
horizontal ÔÚˮƽÐÐÖдÓ×óÏòÓÒÅÅÁÐ×ÓÔªËØ¡£ ²âÊÔ
vertical ´ÓÉÏÏòÏ´¹Ö±ÅÅÁÐ×ÓÔªËØ¡£ ²âÊÔ
inline-axis ÑØ×ÅÐÐÄÚÖáÀ´ÅÅÁÐ×ÓÔªËØ£¨Ó³ÉäΪ horizontal£©¡£ ²âÊÔ
block-axis ÑØ×Å¿éÖáÀ´ÅÅÁÐ×ÓÔªËØ£¨Ó³ÉäΪ vertical£©¡£ ²âÊÔ
inherit Ó¦¸Ã´Ó¸¸ÔªËؼ̳Рbox-orient ÊôÐÔµÄÖµ¡£
VUE