手册目录
CSS教程手册
CSS高级
CSS基础教程
CSS中级教程
CSS3高级教程
CSS响应式设计
CSS实例
如上一章所述,块级元素始终占用可用的全部宽度(尽可能向左和向右伸展)。
设置块级元素的 width 将防止其延伸到其容器的边缘。然后,您可以将外边距设置为 auto,以将元素在其容器中水平居中。元素将占用指定的宽度,剩余空间将在两个外边距之间平均分配:
注意:当浏览器窗口小于元素的宽度时,上面这个 <div> 会发生问题。浏览器会将水平滚动条添加到页面。
在这种情况下,使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用,这一点很重要:
提示:请将浏览器窗口的大小调整为小于 500 像素,以查看两个 div 之间的区别!
这是上面两个 div 的例子:
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
相关视频
科技资讯
24小时阅读榜
1
2
3
4
5
6
7
8
9
10
精品课程
共5课时 | 17.4万人学习
共49课时 | 78.2万人学习
共29课时 | 62.5万人学习
共25课时 | 39.7万人学习
共43课时 | 73.8万人学习