CSS အစီအစဉ် - width နှင့် max-width

使用 width、max-width 和 margin: auto;

如上一章所述,块级元素始终占用可用的全部宽度(尽可能向左和向右伸展)。

设置块级元素的 width 将防止其延伸到其容器的边缘。然后,您可以将外边距设置为 auto,以将元素在其容器中水平居中。元素将占用指定的宽度,剩余空间将在两个外边距之间平均分配:

ဒီ <div> အရာ၏ အကျယ်အဝန်း ဖြစ်သည်။ ၅၀၀ပမာဏ့်၊ အခြောက်အရာ အစိတ်အစိတ်ကို auto ဖြင့် အစိတ်အစိတ်ကို အစိတ်အစိတ်ကို ဖြင့် စတင်ကျင်းပခြင်းကို ရပ်ဆိုင်းစေသည်。

သတိပြုချက်:ဘွန့်ကျင်နှင့် အရာတိုက်၏ အကျယ်အဝန်းကို လျှောက်ချိန်တွင် <div> 会发生问题。浏览器会将水平滚动条添加到页面。

在这种情况下,使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用,这一点很重要:

这个
元素的最大宽度为 500px,外边距设置为 auto。

提示:请将浏览器窗口的大小调整为小于 500 像素,以查看两个 div 之间的区别!

这是上面两个 div 的例子:

实例

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

亲自试一试