css layout study notes max-width_html/css_WEB-ITnose

Setting the width of a block-level element prevents it from filling the container from left to right. Then you can set the left and right margins to auto to center it horizontally. The element will occupy the width you specify, and then the remaining width will be divided into two left and right margins.

div{  width: 600px;  margin: 0 auto; }

The only problem is that when the browser window is narrower than the width of the element, the browser displays a horizontal scroll bar to accommodate the page.

Using max-width instead of width in this case allows the browser to handle small window situations better.

div {  max-width: 600px;  margin: 0 auto; }

This knowledge point is very simple, but I think it is very important, so I will record it~