HTML中，給一個(gè)DIV添加一個(gè)邊框，那么這個(gè)DIV的寬度和高度就增加成為這個(gè)DIV的寬度加上這個(gè)邊框的寬度，那么我們?nèi)绾巫屵吙虿徽紝挾饶?#xff1f;

我們做網(wǎng)站時(shí)可以添加邊框box-sizing屬性：讓邊框不占寬度，在DIV寬度內(nèi)畫邊框。

box-sizing屬性允許以特定的方式定義匹配某個(gè)區(qū)域的特定元素。

例如，假如您需要并排放置兩個(gè)帶邊框的框，可通過將 box-sizing 設(shè)置為 "border-box"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。

語法box-sizing: content-box|border-box|inherit;

屬性值：值描述

content-box這是由 CSS2.1 規(guī)定的寬度高度行為。

寬度和高度分別應(yīng)用到元素的內(nèi)容框。

在寬度和高度之外繪制元素的內(nèi)邊距和邊框。

border-box為元素設(shè)定的寬度和高度決定了元素的邊框盒。

就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。

通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

inherit規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。

示例：

div.container {

width: 30em;

border: 1em solid;

}

div.box {

box-sizing: border-box;

-moz-box-sizing: border-box;

/* Firefox */

-webkit-box-sizing: border-box;

/* Safari */

width: 50%;

border: 1em solid red;

float: left;

}

這個(gè) div 占據(jù)左半部分。這個(gè) div 占據(jù)右半部分。

效果圖：

總結(jié)

以上是生活随笔為你收集整理的html 最小边框宽度,css如何让div边框不占宽度？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。