1. 程式人生 > >html+css+js整體布局——[防止瀏覽器擴大,界面排版混亂]

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

100% 擴大 img utl ans right inner div soft

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,解釋圖如下:

技術分享圖片

技術分享圖片

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