溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS網(wǎng)頁布局錯位的方法的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS網(wǎng)頁布局錯位的方法文章都會有所收獲，下面我們一起來看看吧。
為何總計寬度
較量爭論網(wǎng)頁像素寬度是為了CSS網(wǎng)頁機關(guān)規(guī)正和兼容。思空見貫的我們布局支配結(jié)構(gòu)網(wǎng)頁或應(yīng)用padding、margin組織的時刻將合計整頁寬度，如果不算計無論是寬渡過大過小就會泛起錯位問題。
怎樣共計CSS寬度
例一：我們計算一個擺布結(jié)構(gòu)的構(gòu)造花樣。
假如總寬度為400px，那末擺布加起來就應(yīng)當小于400px，那咱們可能左邊為300px，左側(cè)為100px
準確代碼：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>支配結(jié)構(gòu)寬度較量爭論css5.com.cn</title> <style type="text/css"> .yangshi{width:400px;} .zuo{ float:left; width:300px; bac千克round:#CCC;} .you{ float:right; width:100px; background:#999} </style> </head> <body> <div class="yangshi"> <div class="zuo">左邊300px</div> <div class="you">左邊100px</div> </div> </body> </html>錯誤： 假設(shè)我們在總寬度執(zhí)拗情況下，左邊為300px，而左側(cè)為120px那總寬度超過了20px，我們看看會呈現(xiàn)甚么問題，DIV+CSS代碼下列：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>擺布結(jié)構(gòu)寬度計較css5.com.cn</title> <style type="text/css"> .yangshi{width:400px;} .zuo{ float:left; width:300px; bac公斤round:#CCC;} .you{ float:right; width:120px; background:#999} </style> </head> <body> <div class="yangshi"> <div class="zuo">左邊300px</div> <div class="you">左側(cè)100px</div> </div> </body> </html>我們依據(jù)上圖可看出因為總寬度梗概了20px，以是導(dǎo)致了擺布結(jié)構(gòu)不能平齊，就呈現(xiàn)了右邊往下掉。 何等就出現(xiàn)了錯位的兼容標題，多數(shù)在理論中由于咱們算計的忽略，一樣平常相差小的時辰是1px-2px，那樣就不會被咱們締造，所以拂拭錯位兼容可以從寬度算計著手。
例二：支配結(jié)構(gòu)中有1px邊框?qū)嵗?一樣平常擺布結(jié)構(gòu)中有1px邊框，今后再加上有些邊框這時咱們設(shè)置擺布結(jié)構(gòu)時辰就重要將此邊框?qū)挾群蛿[布結(jié)構(gòu)寬度共計在一起。 準確例子： CSS與html代碼以下：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>支配結(jié)構(gòu)寬度較量爭論css5.com.cn</title> <style type="text/css"> .yangshi{width:400px;} .zuo{ float:left; width:298px; border:1px solid #F00; bac公斤round:#CCC;} .you{ float:right; width:98px; bac公斤round:#999; border:1px solid #F00;} </style> </head> <body> <div class="yangshi"> <div class="zuo">左邊300px</div> <div class="you">右邊100px</div> </div> </body> </html>關(guān)于“CSS網(wǎng)頁布局錯位的方法”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“CSS網(wǎng)頁布局錯位的方法”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼