CSS正交也叫做CSS的分離思想。在CSS中，每一個屬性都代表著一個獨立的樣式。這些樣式是相互獨立的，之間不存在任何的關聯關系。在實際的應用中，CSS正交可以使得我們的代碼更加容易維護和擴展。

/* 錯誤示范 */
.box{
background-color: #f00;
width: 200px;
height: 100px;
margin: 10px;
border-radius: 5px;
text-align: center;
padding: 10px;
}
/* 正確示范 */
.box{
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
border-radius: 5px;
text-align: center;
background-color: #f00;
}

上面的代碼中，我們可以看到第一個示范中，屬性的順序并不是按照一定的規則排列的，而是亂序的。這種示范雖然不會影響最終的效果，但是對代碼的可讀性和維護性都會帶來很大的影響。

在CSS中，規定了一定的屬性排列順序，可以讓我們編寫的代碼更易于閱讀和維護。

/* 屬性排列的順序 */
.selector{
/* 這一段代表我們的布局樣式 */
display: ;
position: ;
float: ;
clear: ;
left: ;
right: ;
top: ;
bottom: ;
/* 這一段代表我們的盒子模型 */
margin: ;
padding: ;
width: ;
height: ;
border: ;
border-radius: ;
box-shadow: ;
/* 這一段代表我們的文本和字體 */
color: ;
font-size: ;
font-weight: ;
font-family: ;
text-align: ;
line-height: ;
text-shadow: ;
/* 這一段代表我們的背景和顏色 */
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
background-size: ;
/* 這一段代表我們的變換 */
transform: ;
transform-origin: ;
}

在CSS中，我們要嚴格按照屬性排列的順序進行編寫，這樣可以使得代碼更加清晰明了，也可以提高我們的開發效率。同時，為了讓代碼更加清晰，我們還可以使用注釋來對代碼進行適當的劃分。