CSS網(wǎng)頁布局方法總結(jié)
時間：2023-08-29 20:54:02 | 來源：網(wǎng)站運營
時間：2023-08-29 20:54:02 來源：網(wǎng)站運營
CSS網(wǎng)頁布局方法總結(jié)：##【博學(xué)谷學(xué)習(xí)記錄】超強總結(jié)，用心分享##
塊級標簽（容器布局標簽）：div，p，h1~h6, header, footer, form, ...
行內(nèi)標簽（設(shè)置寬高無效）：span，i，a，img，input，...
行內(nèi)塊標簽（特殊的行內(nèi)標簽（可設(shè)置高寬））：img，input，...
三種屬性標簽之間的切換方法：利用display屬性
塊級 ->行內(nèi) display: inline-block 行內(nèi) ->塊級 display: block
使得元素水平排列布局方式
1.display: inline-block 這種方法用來布局div盒子排列在一行會因為在書寫多個div順序換行導(dǎo)致出現(xiàn)一個未設(shè)置的margin值，即小縫隙，會影響布局。所以才出現(xiàn)了用浮動布局div盒子的方法
2.浮動的特點： 會脫離標準流，不占用原來的位置，并且會覆蓋沒有加浮動的盒子，但是又沒有完全覆蓋，盒子里面的文字不會被覆蓋。加了浮動的標簽盒子會頂對齊排列成一行，如果不想讓盒子頂對齊，就給盒子加margin-top值即可。加了浮動之后，加text-align：center；和margin：0 auto;不會生效，以為給了浮動盒子無法水平居中，
浮動的權(quán)限高于標準流。
浮動的對父盒子的影響: 給了子元素浮動之后會不占位置，導(dǎo)致無法撐開標準流父盒子的高度（前提是無法給一父盒子一個準確的高度的情況下），那么剩下的所有標準流的盒子會無視父盒子和里面的子盒子，直接沖到網(wǎng)頁最上面。
所以才會想著去清除浮動帶來影響：看見clearfix就說明這里清除了浮動
推薦使用
給父盒子加一個overflow：hidden;屬性即可快速實現(xiàn)清除浮動。定位：用于層疊元素
相對定位（position: relative）：相對于自己原來的位置移動（沒有脫標）。
絕對定位（positon: absolute）：相對于加了定位的父級為參照物移動，如果沒有加，以瀏覽器為參照物移動。加了絕對定位的盒子給margin： 0 auto 無法實現(xiàn)居中效果，如圖可以實現(xiàn)居中。
絕對定位的盒子居中用這個代替magin值固定定位（position: fixed)：用于固定頭部或者底部區(qū)域，中間內(nèi)容區(qū)域需要給頭部和底部空出padding值（會脫標）。
在線咨詢