以margin爲中心的元素的負邊界邊界：0 auto;

Question

我有一個固定寬度的頁面，我想用Border CSS命令添加一個簡單的邊框。但是，我不希望這個邊框將氣泡放在頁面上，並使較小的屏幕具有水平滾動條。我對CSS的評價不是很高，但是我足夠了解我研究了使用負邊距來抵消邊框的寬度，因爲我已經做了類似的操作來爲其他元素添加邊框，而我不想移動邊框。但是當我在主容器div上這樣做時，所有內容都會偏離中心並砸到頁面的左側。我正在使用Blueprint CSS框架，我發現裏面有一些東西弄亂了我的利潤空間，我發現主容器應用了一個「保證金：0汽車;」將其集中在頁面上。

所以，我現在問，我該如何在頁面上應用負邊界邊界，同時仍將屏幕布局居中？我試圖將容器包裝在一個div中，並將邊界和負邊距應用到它，但沒有骰子，我嘗試在容器中嵌套一個div，並將邊框應用於容器，但是這種情況也很糟糕。有人在這裏扔我一塊骨頭！

Answer 1

如果負餘量正在工作，您可以通過添加具有固定寬度的包裝div和margin: 0 auto來獲得居中。

在我的測試中，負邊距並沒有改變盒子的寬度。其他一些策略：

1. 調整div的寬度以抵消邊框添加的寬度。
2. 將背景圖像添加到模擬左右邊界的div。
3. 使用JavaScript檢測窗口的寬度並在必要時刪除邊框。
4. 添加body { overflow-x: hidden }來抑制水平滾動條。
5. 使用CSS3 media query僅當有足夠空間時才添加邊框（對於舊版瀏覽器，可選地返回JavaScript（請參閱＃3））。

更新：而是負利潤的，你也許可以使用box-sizing: border-box使邊框沒有在第一時間加入到元素的寬度。