Mfano wa Layout ya CSS - Width na Max-width

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

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

Kuweka kina kikubwa cha width Hii itakupunguza kuingia kwenye eneo la kina cha kuu. Kisha, unaweza kuingiza kimaumizi kwa kufikia auto, ili kuingiza kina kwenye kina cha kuu kwa uangalifu wa kimaumizi. Kina litakapata uwezo lilitakusaidia, na eneo la huzuni litakahusishwa kati ya kimaumizi kwa uangalifu wa kimaumizi:

Uwezo wa kina hiki cha <div> ni 500px, na kimaumizi kinaingia kwa kufikia auto.

Taradhisya:Kwa sababu ukurabu wa kijifunze cha wasemaji wa kizungu hau kufikia kimo cha kina kikuu cha kina hiki <div> 会发生问题。浏览器会将水平滚动条添加到页面。

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

Ukingo wa kikubwa wa <div> huzingatia 500px, na ukingo wa kijana wa kuzingatia kuzingatia kuzingatia.

Maelezo:Tafuta ukurudisha ukanda wa kifungu cha browser hadi ukurudisha kwenye 500 pixeli, ili kuona mawazo ya div mbili hizi!

Hii ni mifano ya div mbili ya juu:

Mifano

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

Jifunze Kupiga Matokeo