Layout CSS - width dan max-width

Gunakan width, max-width dan margin: auto;

Seperti yang disebutkan di bab sebelumnya, elemen block selalu mengambil seluruh lebar yang tersedia (meluas sejauh mungkin ke kiri dan kanan).

Tetapkan elemen block width Ini akan menghalangnya untuk meluas ke pinggir kontainer. kemudian, anda boleh tetapkan jarak tempat diperbuatkan ke auto untuk mengatur elemen untuk di tengah kontainer. Elemen akan mengambil lebar yang ditetapkan, sisa ruang akan diatur rata di antara dua jarak tempat diperbuatkan:

Lebar elemen <div> ini adalah 500px, jarak tempat diperbuatkan diatur ke auto.

Perhatian:Sesuatu ini, apabila tinggi tetingkap pelayar lebih kecil daripada lebar elemen. <div> 会发生问题。浏览器会将水平滚动条添加到页面。

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

这个 <div> 元素的最大宽度为 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;
}

亲自试一试