width=100%でスクロールバーが表示される場合について

詳細
今日学生から質問がありましたが、width=100%でスクロールバーが出る場合について、ソースコードを審査しました

.main{
    width:100%;
    height:200px;
    background:rgba(0,0,0,0.5);
    border:1px solid green;
}

明らかにbordeの枠線で、私があげた解決方法は2つあります.
(1)セットボックスモデル

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

content-box:要素幅=要素内容
ボックスモデルborder-box:要素幅=コンテンツ+内側余白+枠線
(2)widthをautoに変更
理由:
原因を知るには、まずCSSのwidth:100%とwidth:autoの違いを明らかにしなければならない.
①width:100%はmargin-left margin-rightの属性値を含まず、親コンテナの幅にmargin-left/margin-rightを含む値を直接取ります.marginが設定されている場合、新しいwidth値は容器の幅にmarginを加えた値です.(よく観察すると)marginに対応するエッジを加えると設定の空白が多くなることがわかります.また、横スクロールバーが画面の範囲を超えているため、横スクロールバーが多くなります.(これは親容器に対してbodyです).
②width:autoはいつも行全体を占めている!!!width:autoにはmargin-left/margin-rightのプロパティ値が含まれます.その値にはmargin-left/margin-rightの値が含まれます.このmarginの値はすでに含まれています(つまり、行全体です).marginの値を設定するには、行全体を使用してmarginの値を減算すると、現在の幅が得られます.減算されたこの値は、対応するエッジが空白になります.顕著な特徴は、この横スクロールバーが現れないこと、すなわち幅が増加していないことである.
 
 
 
 
 
 
.