溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“CSS網頁布局錯位原因是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS網頁布局錯位原因是什么”吧!
為甚么算計寬度
總計網頁像素寬度是為了CSS網頁布局規正與兼容。思空見貫的我們構造左右結構網頁或使用padding、margin組織的時辰將共計整頁寬度，如果不共計無論是寬度過大過小就會涌現錯位題目。
怎么計算CSS寬度
例一：我們共計一個支配結構的組織格式。
假如總寬度為400px，那末左右加起來就理應小于400px，那咱們可能左邊為300px，左邊為100px
粗略代碼：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>左右結構寬度計較css5.com.cn</title> <style type="text/css"> .yangshi{width:400px;} .zuo{ float:left; width:300px; bac公斤round:#CCC;} .you{ float:right; width:100px; bac千克round:#999} </style> </head> <body> <div class="yangshi"> <div class="zuo">左邊300px</div> <div class="you">右側100px</div> </div> </body> </html>
差遲： 如果咱們在總寬度倔強環境下，左邊為300px，而右側為120px那總寬度超越了20px，我們看看會泛起什么標題，DIV+CSS代碼下列：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>擺布結構寬度總計css5.com.cn</title> <style type="text/css"> .yangshi{width:400px;} .zuo{ float:left; width:300px; bac公斤round:#CCC;} .you{ float:right; width:120px; bac千克round:#999} </style> </head> <body> <div class="yangshi"> <div class="zuo">左邊300px</div> <div class="you">左側100px</div> </div> </body> </html>
我們按照上圖可看出由于總寬度可以或許了20px，以是招致了擺布結構不能平齊，就泛起了右邊往下掉。何等就泛起了錯位的兼容題目，大多數在現實中因為咱們共計的疏忽，一般相差小的時候是1px-2px，那樣就不會被咱們締造，以是掃除錯位兼容可以從寬度合計入手。
例二：左右結構中有1px邊框實例 通常擺布結構中有1px邊框，今后再加之有些邊框這時咱們設置裝備擺設擺布結構時候就重要將此邊框寬度與擺布結構寬度算計在一同。準確例子： CSS與html代碼以下：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>左右結構寬度共計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>終歸圖：
寬度配置截圖因左右結構都有1px的寬度這個時分各緊要減去擺布2像素的邊框寬度，所以左邊最后是298px，左邊為98px的寬度
如果不減去邊框將會造成一下成績：
DIV+CSS設置百分比寬度總計 無意偶爾候咱們也必要使用百分比來合計寬度，通常狀況也是總的百分比寬度，不克不及超過100%
到此，相信大家對“CSS網頁布局錯位原因是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
