CSS樣式表是網頁設計和開發中最重要的工具之一。它們為網頁提供了美觀的布局和外觀，以及強大的交互功能。但是，在某些情況下，CSS可能會自動撐開元素的寬度，這可能會導致布局混亂和不必要的滾動條。以下是一些避免CSS自動撐開元素寬度的技巧。

/* 避免使用默認的盒模型 */
* {
box-sizing: border-box;
}
/* 明確設置元素的寬度 */
div {
width: 200px;
}
/* 使用浮動來布局 */
.container {
float: left;
width: 50%;
}
/* 使用Flexbox布局 */
.container {
display: flex;
align-items: center;
}
/* 使用絕對定位 */
.container {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
}
/* 避免使用百分比寬度 */
.container {
width: 500px;
}
.child {
width: 200px;
}
/* 使用calc()函數 */
.container {
width: calc(50% - 10px);
}
/* 使用max-width和min-width */
.container {
max-width: 800px;
min-width: 400px;
}
/* 使用overflow屬性來處理溢出 */
.container {
overflow: hidden;
}
/* 避免使用padding和border */
.container {
padding: 0;
border: none;
}

在設計和開發網頁時，我們需要了解如何使用CSS來控制元素的寬度和高度，以及如何避免自動撐開。這些技巧可以幫助我們創建出更美觀和有效的網頁設計。