CSS是一種用于網頁樣式布局的語言，可以讓我們的頁面更加美觀，但是有時我們會遇到一些問題，比如布局亂動等問題。下面我就來分享一下如何設置不亂動的CSS布局。

CSS布局，讓網頁更美觀。但是，如果不注意一些技巧，可能會有些問題。 比如，當你改變一個元素的大小時，整個頁面的布局可能會隨之發生變化，這就是所謂的“布局亂動”。

不過，有一些技巧可以避免這種情況的發生。

.box {
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #000;
box-sizing: border-box;
}

首先，我們要使用盒子模型。盒子模型有兩種類型：content-box和border-box。在border-box模式下，元素的寬度和高度包含了邊框的大小。這意味著，當你改變元素大小時，邊框不會改變，因此整個頁面的布局也不會發生變化。

其次，我們可以使用flex布局，這是一種非常流行的布局技術。flex布局讓元素有更多的自由度，可以讓它們沿著水平或垂直方向移動，同時也能讓它們自適應寬度和高度。

最后，我們還可以使用position定位來使元素保持固定位置。對于一些重要的元素，可以使用position: fixed來保持它們在頁面上固定不動。

總結來說，通過盒子模型、flex布局和position定位，我們就能輕松設置出不亂動的CSS布局。當我們改變任何一個元素的大小或位置時，頁面的布局都能保持穩定。