CSS中，我們經(jīng)常會(huì)遇到需要讓一個(gè)元素自適應(yīng)頁(yè)面寬度，但是又不想讓它撐滿整個(gè)屏幕的情況。這時(shí)候，我們就需要設(shè)置元素的左右邊界自動(dòng)。

/* 設(shè)置元素左右邊界自動(dòng) */
.element {
margin: 0 auto;
}

以上代碼中，我們使用了margin屬性來(lái)設(shè)置元素的外邊距，其中0代表上下外邊距為0，auto代表左右外邊距自動(dòng)計(jì)算。

要使元素的左右邊界自動(dòng)，還需要滿足以下條件：

• 元素的寬度不能設(shè)置為100%；
• 元素必須是塊級(jí)元素，或者是display屬性為table、table-cell、flex等的元素。

因?yàn)閴K級(jí)元素默認(rèn)寬度是100%，如果不禁用該屬性，元素就會(huì)撐滿整個(gè)屏幕，自然就無(wú)法實(shí)現(xiàn)左右邊界自動(dòng)的效果。

需要注意的是，在一些特殊場(chǎng)景下，比如使用float屬性浮動(dòng)元素時(shí)，自動(dòng)邊界會(huì)失效。此時(shí)，我們可以設(shè)置一個(gè)固定的寬度，或者使用flex布局，避免出現(xiàn)意外的影響。