css布局学习笔记之max-width_html/css_WEB-ITnose
程序员文章站
2022-04-19 10:10:25
...
设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。
div{ width: 600px; margin: 0 auto; }
唯一的问题是,当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。
在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。
div { max-width: 600px; margin: 0 auto; }
这个知识点很简单,但是我觉得它很重要,于是也记录下来吧~
下一篇: 运行时发错,望高人指点,多谢
推荐阅读
-
【原】《DIV+CSS商业案例与网页布局开发精讲》读书笔记(2)_html/css_WEB-ITnose
-
css3中 弹性盒模型布局之box-flex_html/css_WEB-ITnose
-
JavaScript学习笔记:取数组中最大值和最小值_html/css_WEB-ITnose
-
【学习笔记之CSS+DIV】CSS入门_html/css_WEB-ITnose
-
css3学习之flex实现几种多列布局
-
HTML DOM(学习笔记一)_html/css_WEB-ITnose
-
Extjs学习笔记之七 布局_extjs
-
Bootstrap布局之栅格系统学习笔记
-
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
-
CSS学习笔记之字体样式