21xrx.com
2024-03-29 18:41:53 Friday
登录
  

CSS 布局 - width和max-width

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

在前面章节提到过,块级元素总是占有可用的宽度(尽可能的向左右延伸).

设置块级元素的宽度将阻止它伸展到其容器的边缘. 然后,您可以将margin设置为auto,以使元素在其容器内水平居中. 元素将占用指定的宽度,剩余的空间将在两个边距之间平均分配:

<div>元素的宽度是500px,并且margin设置为auto.

注意:当浏览器窗口小于元素的宽度时,上面的<div>会出现问题.浏览器会在页面里添加水平滚动条。

在这种情况下,使用max-width属性将改进浏览器对小窗口的处理. 当网站页面在小尺寸的屏幕上显示时很管用:

<div>元素有max-width属性,设置为500px,并且margin属性设置为auto.

提示:将浏览器窗口的宽调整为小于500px,以查看两个div之间的差异!

以下是上面两个div的示例:

例子

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2