html+css+js整體布局——[防止瀏覽器擴大,界面排版混亂]
阿新 • • 發佈:2019-02-07
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整體布局——[防止瀏覽器擴大,界面排版混亂]