html+css+js整體布局——[防止瀏覽器擴大，界面排版混亂]

1，body——》width：100%

body {
    background-color: rgb(238, 238, 238);
    color: rgb(51, 51, 51);
    display: block;
    font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei",
        sans-serif;
    font-size: 14px;
    height: 11229.7px;
    line-height: 16.8px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    outline-color: rgb(51, 51, 51);
    outline-style: none;
    outline-width: 0px;
    text-size-adjust: 100%;
    width: 100%;/* 縮放：設置為百分比*/
}

2，第一個內容div的width：100%

#content {
    background-position-x: center;
    background-position-y: top;
    background-repeat-x:no-repeat;
    background-repeat-y:no-repeat;
    color: rgb(51, 51, 51);
    display: block;
    font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei",
        sans-serif;
    font-size: 14px;
    height: 10685px;
    line-height: 16.8px;
    outline-color: rgb(51, 51, 51);
    outline-style: none;
    outline-width: 0px;
    text-size-adjust: 100%;
    /* width: 1899px; */
    width: 100%;/* 縮放：設置為百分比*/
}

3，第一個內容div中的視覺上居中內容div的margin-left和margin-right都設為auto，這個視覺上居中的div的width設為固定值

#content-inner {
    color: rgb(51, 51, 51);
    display: block;
    font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei",
        sans-serif;
    font-size: 14px;
    height: 10685px;
    line-height: 16.8px;
    margin-bottom: 0px;
    /* margin-left: 349.5px;
    margin-right: 349.5px; */
    margin-left: auto;/* 縮放：設置為auto */
    margin-right: auto;/* 縮放：設置為auto */
    margin-top: 0px;
    outline-color: rgb(51, 51, 51);
    outline-style: none;
    outline-width: 0px;
    text-size-adjust: 100%;
    width: 1200px;/* 縮放：設置為固定值 */
}

4，為什么要這樣設置？

　　body的width：100%，第一個內容div的：width保證了界面的伸縮性，視覺上居中的內容div設置固定值保證了界面不具有伸縮性，其左右邊距的auto卻幫助其在界面上自動控制。

5，解釋圖如下：